Cara Membuat Widget Show Hide di Sudut Kanan Bawah Blog

on Senin, 23 September 2013

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).
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.

1. Login ke akun Blogger sobat.
2. Masuk ke bagian Tata Letak.
3. Klik tambahkan gadget di posisi mana saja, hasilnya tetap akan berada di pojok kanan bawah Blog sobat.
4. Pilih mode HTML / Javascript.
5. 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. Contohnya widget tombol follow twitter (dapatkan script-nya disini) dan widget like box facebook (dapatkan script-nya disini).

6. 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.
Ranking: 5
 
© Netter Indonesia All Rights Reserved
Get smart with the Netter Indonesia