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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS-DG-ZAgNEiF53m3IFCTvdcDGWv5PPCTR-x6cqZ77rXQSOeodW4O0VY1DeJHDqdEigKoW5CVSWOLdesa_uUhEadihgJ-AFNqeLlVfrbPaCEtR9vXG30eMMz9UoRyNlMobJkRHtSU-30E1/s0/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5aBQm4CrRmx5O6oJrU0ukRrIek-yRfO3BwtIUUlO-evgaNKDlkYH99NrVLW1QTNlqkFF2SCyjzKK4PD-GMhRtMF4S1wzuGvmy_-j43lUCuKbBmpcGsPF_O4Gc6rsTWw9gQzAZecdpSlsS/s0/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisv2vrSr5ypRBaEBWWVbJUTf8WhAeUzFqkRnauKHY5NmJlYp8oAp4HUkjb8mfTW7wmJtETBS9FD7_vvtAMPK31by6HDbvIP22aiv_hscROnzKc6qK9atlUC5xrxWB-R446DcohAXyR9PXp/s0/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgldSfzaayYIwmcrXdNo9YYzQ2b_wnAGE8XWP08thSKFFNWmHzbveuWAAaSN_g69t4wwRwZlDJbnrBH81sF7Gk2kZO0PdY3skZs2K82AsYSvFd1nviZiNq67KThXIC1i6zGqjAZrM9glXI/s0/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRs-EgrYHyK7wKmuvfkpBYKW7e3-sqqg15ZKa6JgK9rGP2ZR7fZS5Q0kUTOtgk5O2Z8Z4ocP3jQMX9f7xw5EoCCpFuREXaMcc7oyShauGd2koqbjH_ZnJaTQy9yPiPO2U7U2eycoGzqtys/s0/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid9iXOuJxwqposgC9aBIDDzjAOdi6oK-7GjpsKHJ7P_H61AgZX3TytAOji29k2YA4WOTgO16apd-uK9AyTTOi80-HIMykbYHsq0X1xYBW2QIkkBk9lUL5sVa5KuUyXG0kkc7yR6SohjPUw/s0/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-7khgNjJ9bl1WdNvZzdQsPFUZEx6tFFO2NnaOWJ0meFEcdV73yCgZTypksYcsSDVXK060Mq-LiQVNSx8pFLJ1y_pIRxrEXfaBgentqyOBQ7HfNQkof-Dro1OXiw-qgZK0NSOsI1qWcB8M/s0/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....