Sabtu, 15 Januari 2011

Membuat Tombol Share Melayang pada Blog



OK masih pada postingan tentang blog, kalau pada postingan sebelumnya saya pernah memberitahu cara membuat search box melayang, kali ini saya ingin memberitahu sesuatu yang mirip, yaitu membuat tombol share melayang. Kodenya juga sebenernya hampir sama, cuma di edit sedikit. Saya hanya menggabungkan kode share dari AddThis dengan kode untuk membuatnya melayang. Kalo mao lihat demonya lihat di laboratorium blog saya disini.

OK sudah cukup basa-basinya, untuk membuatnya.. seperti biasa login ke Blogger → Rancangan → Edit HTML

Lalu letakan kode berikut diatas kode ]]></b:skin>

#melayangin_toolboxnya {
background: transparent; 
border: none;
width: 40px; /*lebar kotak melayangnya*/
position: fixed;
_position:absolute;
top:248px; /*maksudnya, 248 pixel dari atas, boleh diganti jadi bottom: blablablapx; */
left:0px; /*maksudnya, 0 pixel dari kiri.. bisa diganti menjadi right kalau mau diletakan di sebelah kanan*/
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); 
}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}

kode yang berbackground hijau adalah kode untuk melayangnya, dan background biru untuk kode tombol Sharenya... kalau mau edit, edit bagian yang saya beri keterangan dengan font berwarna biru..

Terakhir letakan kode di bawah ini diatas kode </body>

<div id='melayangin_toolboxnya'>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='http://3.bp.blogspot.com/_rKLBTcXIDJY/TS5fnmcnB7I/AAAAAAAABXU/roYdpsqUYNc/s000/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='http://1.bp.blogspot.com/_rKLBTcXIDJY/TS5fn5vmQ3I/AAAAAAAABXY/oBhwkqSuGaY/s000/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='http://3.bp.blogspot.com/_rKLBTcXIDJY/TS5foC-nATI/AAAAAAAABXc/pd7mGnd0n24/s000/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='http://1.bp.blogspot.com/_rKLBTcXIDJY/TS5foLN6sgI/AAAAAAAABXg/3xMmJx_T2sw/s000/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='http://4.bp.blogspot.com/_rKLBTcXIDJY/TS5foR06z-I/AAAAAAAABXk/u3gqfjTPhHE/s000/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='http://4.bp.blogspot.com/_rKLBTcXIDJY/TS5fosoWehI/AAAAAAAABXo/ZuwxwRycRRQ/s000/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='http://2.bp.blogspot.com/_rKLBTcXIDJY/TS5fotyKo7I/AAAAAAAABXs/TXjfHrA8bOk/s000/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>

Kalau sudah, pratinjau terlebih dahulu untuk memastikan

Kalau sudah berhasil baru simpan template...

OK sekian postingan kali ini, semoga bermanfaat....

5 komentar:

  1. Oke, makasih atas postingannya, sangat bermanfaat! n aku dah terapkan di blog aku,,,

    BalasHapus
  2. mantab, ., gan ,. , nicee infoo ,. ,.

    BalasHapus
  3. wah.... bagus negh sob, sangat membantu..
    sob, kl misal kotak komentar biar langsung muncul di bawah postingan caranya gimana sih ? selain melalui draft.blogger.com..? coz dh Q coba gk brhasl sob. kl ad sempet, tlng bkiN tutorial ny yach sob... thn'x

    BalasHapus
  4. makasih gan.. jangan lupa kunjungi http://dunia-googel.blogspot.com..
    cari cheat pb disitu!!

    BalasHapus
  5. udah dipraktek,,,,jadi. thanks ya,,

    BalasHapus

Tulis Komentar Disini