Tips dan Trik Memasang Widget di sudut blog

Setelah meminta izin ke yang empunya posting, kembali Kojek menulis tentang sebuah ide sederhana untuk mempercatik tampilan blog. Adapun trik kali ini adalah bagaimana caranya kita memasang sebuah widget/aksesoris,image atau banner ke salah satu sudut blog seolah olah widget/aksesoris,image atau banner itu tadi seakan-akan melayang-layang di blog kita. Bukan cuma satu sudut saja yg bisa kita hias dengan trik ini, keempat sudut blog bisa kita pasangi berbagai gadget atau widge/aksesoris. Namun pertimbangkanlah dari segi estetika (ceaellah ... ). Jangan malah membuat pengunjung bingung dan yang pasti perhatikan loading pagenya. Jadi Inga' .. Inga' ....




Untuk demonya, klik disini




A. WIDGET/ AKSESORIS DI SUDUT KIRI BAWAH


1. Login dulu ke blogger lalu klik "Layout -->> Edit HTML

2. Cari kode ]]></b:skin> kemudian tempatkan kode di bawah ini di atas kode ]]></b:skin>

#trik_kiribawah {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Kode yang berwarna biru adalah nama dari script ini, kode bottom yang berwarna kuning bisa di ganti dengan top kemudian kode left yang berwarna hijau bisa di ganti dengan right


4. Langkah selanjutnya yaitu letakkan script berikut ini sebelum kode </body>

<div id='trik_kiribawah'>
<script src='http://widgets.amung.us/classic.js' type='text/javascript'/><script type='text/javascript'>WAU_classic(&#39;hu1vhdkrz2pe&#39;)</script><br/>
<a href='ymsgr:sendIM?entobet'> <img src='http://opi.yahoo.com/online?u=entobet&amp;m=g&amp;t=9&amp;l=us'/></a>
</div>

5. Kode yang berwarna biru adalah kode widget yang bisa diganti dengan widget lain sesuai selera.

6. klik save lalu view blog untuk melihat hasilnya.


B. WIDGET/ AKSESORIS DI SUDUT KANAN BAWAH

Nah, sekarang kita akan memasang widget/aksesoris lain ke sudut kanan blog kita. Langkah pemasangannya sama dengan langkah langkah di atas. Hanya perlu mengedit beberapa kode saja. Agar lebih jelas saya uraikan aja di sini akal-akalan kita ...

Perhatikan baik baik perubahan 2 buah script/kode di bawah ini :

a. Kode Pertama :

#trik_kananbawah {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

a. Kode Ke dua :

<div id='trik_kananbawah'>
<script src='http://widgets.amung.us/classic.js' type='text/javascript'/><script type='text/javascript'>WAU_classic(&#39;hu1vhdkrz2pe&#39;)</script><br/>
<a href='ymsgr:sendIM?entobet'> <img src='http://opi.yahoo.com/online?u=entobet&amp;m=g&amp;t=9&amp;l=us'/></a>
</div>

Pada kode pertama perubahannya bisa di lihat seperti di bawah ini :

kode #trik_kiribawah { berubah menjadi #trik_kananbawah {

lalu left berubah menjadi right

Pada kode ke dua, nama kodenya yang kita rubah yaitu

<div id='trik_kiribawah'>

menjadi

<div id='trik_kananbawah'>

Jangan lupa menggati kode yang berada di antara kode <div id='trik_kananbawah'> dan kode </div> dengan kode widget/aksesoris yang lain.

Anda juga tinggal mengedit sedikit saja kode-kode tersebut bila ide Anda sama nyelenehnya denganku yaitu "MEMASANG WIDGET/AKSESORIS DI KEEMPAT SUDUT BLOG". Ada yang mau nyoba ...????

Catatan : Terima Kasih untuk KENDHIN yang telah memberi izin untuk mencatut scriptnya.


Back to Top