Tentang Ilmu Komputer, Android, Panduan Blogging dan Tips di Internet.

Cara Membuat Widget Show Hide di Sudut Kanan Bawah Blog

Kadang-kadang pada Blog yang kita miliki kita ingin memasang widget yang kita anggap penting dengan tampilan yang dapat menarik perhatian pengunjung. Tujuanya agar terjadi sebuah aktivitas pada widget tersebut, aktivitas apa pun itu. Contohnya, kita mempunyai halaman Blog kita di Facebook. Dan kita memasang widget like box fans page halaman tersebut pada Blog yang kita miliki. Tentunya ini dilakukan agar semakin banyak orang yang menyukai halaman Blog kita di Facebook. Untuk dapat menarik perhatian pengunjung Blog lebih banyak, tidak sedikit Blogger yang memasang widget like box facebook melayang, atau widget like facebook yang tiba-tiba muncul di depan layar (orang awam bilang).

Widget Show Hide di Sudut Kanan Bawah Blog

Menurut saya widget seperti itu jelas mengganggu pemandangan pengunjung saat sedang membaca sebuah artikel. Apalagi jika widget tersebut muncul berkali-kali dan menghalangi artikel yang sedang dibaca oleh pengunjung. Jangan sampai membuat pengunjung kesal deh sobat, apalagi jika membuat pengunjung malah meninggalkan Blog yang sobat cintai. Saya sendiri pernah mendapat kritik dari pengunjung karena memasang widget melayang ini, "sangat mengganggu pemandangan saya", katanya.

Ada cara lain untuk menyajikan widget yang sobat anggap penting ini. Widget ini tentu terasa lebih nyaman bagi para pengunjung jika dibandingkan dengan widget melayang. Setidaknya tidak terlalu mengganggu pemandangan pengunjung karena widget ini terdapat di posisi sudut kanan bawah pada blog yang tentunya tidak akan menghalangi artikel. Selain itu widget ini hanya akan tampil ketika layar digulir ke bawah pada jarak tertentu, dan akan hilang kembali jika layar digulir ke atas atau jika pengunjung meng-klik tombol close pada widget. Karena saya orang yang masih awam, widget ini saya sebut Widget Show Hide di Sudut Kanan Bawah Blog, hehe. Perhatikan saja contoh tampilanya berikut ini.

Widget Show Hide di Sudut Kanan Bawah Blog

Nah, dengan menyimak sedikit penjelasan dan melihat screenshot di atas, apakah sobat tertarik untuk menerapkanya di blog sobat? Jika jawabanya iya, atau sobat sekedar ingin mencobanya, silakan ikuti langkah-langkahnya berikut ini.

Cara Membuat Widget Show Hide di Sudut Kanan Bawah Blog

  • Login ke akun Blogger sobat.
  • Masuk ke bagian Tata Letak.
  • Klik tambahkan gadget di posisi mana saja, hasilnya tetap akan berada di pojok kanan bawah Blog sobat.
  • Pilih mode HTML / Javascript.
  • Masukan kode di bawah ini.

<!--Slidbox -->
     <script type="text/javascript" src="http://marewainfo.googlecode.com/files/slidboxordinary.js"></script>
<div style="position:fixed; width:342px; overflow:hidden; bottom:20px;
right:10px; display:none;
background: #ffffff repeat; -moz-border-radius:15px; -webkit-border-radius:15px;
border-radius:15px; border:2px solid #111111;" id="fbslidebox">
    <div style="width:300px; padding:10px; margin:0 auto; overflow:hidden;">
        <a href="#" style="float:right; color:#999; padding:0 3px;
border:1px solid #CCC; text-decoration:none; font-size:9px; font-family:Verdana, Geneva, sans-serif;" id="fbcloseslidebox">X</a>
        <strong style="color:#808080;"><center>Pesan Pada Widget</center></strong>

<==Masukan script widget disini==>

        </div></div>
<!--Slidbox end -->

  • Ubah tulisan berwarna biru dengan pesan pada widget yang sobat inginkan. Contoh: "Follow dan Like Yah Sobat".
  • Masukan script widget yang sobat inginkan pada tulisan berwarna merah. Sobat bisa memasukan lebih dari satu widget. Namun jangan terlalu banyak yah sobat, menurut saya tampilanya kurang bagus. Masukan maksimal 2 script widget saja.
  • Setelah selesai menentukan tampilanya, silakan klik Simpan.
Sebenarnya script widget yang saya berikan diatas masih bisa sobat ubah tampilanya, contohnya pada kode berwarna oranye. Silakan saja modifikasi dengan kreasi sobat sendiri. Semoga pembahasan kali ini bermanfaat.

Artikel terkait : Cara Membuat Widget Show Hide di Sudut Kanan Bawah Blog

Artikel Blog Regi Brader Lainnya :

20 komentar:

  1. keren gan , ntar ane terapkan diblog baru ...

    ReplyDelete
  2. thx sob
    http://duniagame7.blogspot.com/

    ReplyDelete
  3. sob , kalau script fanpagenya boleh pake yg HTML 5 ga? atau bisanya pake IFRAME ?
    mohon pencerahannya..

    ReplyDelete
    Replies
    1. Saya belum mencobanya sob, silakan coba saja yah ngga susah kok...

      Delete
  4. Setiap ilmu yang dishare tidak akan habis, tetapi malah bertambah kebaikannya. Terima kasih telah berbagi. Layak untuk dicoba.

    ReplyDelete
  5. mantab tutorialnya gan, akhirnya ketemu juga caranya.

    ReplyDelete
  6. thanks scripnya + tutorialnya sob . . .


    http://sahrul-ti.blogspot.com

    ReplyDelete
  7. tutorial mas ini memang maknyos heheee..tadi sebelah juga koment cara membuat pop up melayang facebook sekarang coba lagi cara membuat iklan muncul di bawah sidebar eh muncul juga..thanks kunjungi juga ya mas http://netiplisiskom.blogspot.com/

    ReplyDelete
  8. thx sob
    http://si-kudil.blogspot.com/

    ReplyDelete

  9. Thank's infonya,mantap gan artikelnya , , ,,,

    ReplyDelete
  10. mantap dan sangat bermanfaat gan... jangan pernah bosan berbagi ya gan... terus smangat...
    kunbal ya di www.fazrin.com

    ReplyDelete
  11. agan agan tahu cara untuk membuat widget floating di samping , yg mau ane pasangkan widgte chating ym dan kontak

    ReplyDelete
  12. makasih gan informasinya keren (y)
    jangan lupa kunjungi blog saya dan jangan lupa follow juga
    hanya Di http://unik-ituindah.blogspot.com/2015/06/keunikan-seorang-yang-fans-anime.html

    ReplyDelete
  13. bagus infonya gan jangan lupa kunjungi juga www.arasgames.com

    ReplyDelete
  14. thankas gan infonya, saya coba dulu

    ReplyDelete
  15. Thanks gan bermanfaat banget, jangan lupa kunjungi blog saya http://novans-565.blogspot.co.id/

    ReplyDelete
  16. thanks gan. tutornya, tapi knapa yg munculnya cuma Pesan Pada Widget doang yah..

    ReplyDelete

Copyright © 2013-2016 Blog Regi Brader - All Right Reserved