Cara Membuat 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.
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 -->
<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.
Categories
:
Widget Show Hide di Sudut Kanan Bawah
_afiliates.jpg)
0 komentar :
Posting Komentar