Cara Membuat Share Button Cantik

Posted by Tips Trick Blogger Sunday, April 10, 2011 0 comments

Salam persahabatan blogger. Beberapa sahabat blogger seberapa penting sih share button buat blog. Bagi saya share button adalah salag satu aksesoris blog yang sangat penting, karena anda membutuhkannya untuk sebuah publikasi antar jaringan dan ini cukup efektif untuk menarik pengunjung. Mungkin dari twitter, facebook, digg, dan lain sebagainya. Sedangkan kelebihan lainnya saya rasa anda sudah sangat mengerti dari pada penjelasa saya. Tinggal bagaimana membuat share button cantik dalam tampilannya. Selanjutnya saya akan menerangkan Cara Membuat Share Button Melayang di blog anda. Mungkin ini tampilan sedikit berbeda dengan tampilan share button yang pernah diterangkan sebelumnya atau yang pernah anda temui dibeberapa blog lainnya. Tinggal anda memilih yang mana anda suka, karena ane so pasti juga suka hahahhaaaa.....Ok langsung saja, ikuti langkah berikut ini.

Klik Rancangan

Beri centang Expand Template Widget

Masukkan kode berikut di atas kode ]]></b:skin>

#blogonol_corner {
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 berwarna merah dapat anda ganti dengan top = atas dan right = kanan

Selanjutnya masukkan kode di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<link href='http://bloekoetoek-blogonol.googlecode.com/files/imagebubbles.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>
#orbs li{
width: 65px;
height:60px;
}
#orbs li img{
width: 55px;
height: 60px;
}
#squares li{
width: 45px;
height:40px;
}
#squares li img{
width: 31px;
height: 31px;
}
</style>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/imgbubbles.js' type='text/javascript'>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
$('ul#orbs').imgbubbles({factor:1.75}) //add bubbles effect to UL id="orbs"
$('ul#squares').imgbubbles({factor:2.5}) //add bubbles effect to UL id="squares"
})
</script>

Selanjutnya masukkan kode berikut di atas kode </body>

<div id="blogonol_corner">
<ul class='bubblewrap' id='orbs'>
<li><a href='http://blogonol.blogspot.com'><img alt='add to stumbleupon' src='http://i1138.photobucket.com/albums/n524/blogonol/blogonol-stumbleupon.png'/></a></li>
<li><a href='http://blogonol.blogspot.com'><img alt='add to facebook' src='http://i1138.photobucket.com/albums/n524/blogonol/blogonol-facebook.png'/></a></li>
<li><a href='http://blogonol.blogspot.com'><img alt='add to digg' src='http://i1138.photobucket.com/albums/n524/blogonol/blogonol-digg.png'/></a></li>
<li><a href='http://blogonol.blogspot.com'><img alt='add to twitter' src='http://i1138.photobucket.com/albums/n524/blogonol/blogonol-twitter.png'/></a></li>
<li><a href='http://blogonol.blogspot.com'><img alt='add rss feed' src='http://i1138.photobucket.com/albums/n524/blogonol/blogonol-rss.png'/></a></li>
</ul>
</div>

Kode di atas gambarnya bulat seperti di bawah ini

Kalau anda ingin merubahnya dengan gambar segi empat seperti di bawah ini, silahkan ganti kode merah dengan kode di bawah ini

<ul class='bubblewrap' id='squares'>
<li><a href='http://blogonol.blogspot.com'><img alt='add to facebook' src='http://i1138.photobucket.com/albums/n524/blogonol/blogonol2-facebook.png'/></a></li>
<li><a href='http://blogonol.blogspot.com'><img alt='add to delicious' src='http://i1138.photobucket.com/albums/n524/blogonol/blogonol2-delicious.png'/></a></li>
<li><a href='http://blogonol.blogspot.com'><img alt='add to digg' src='http://i1138.photobucket.com/albums/n524/blogonol/blogonol2-digg.png'/></a></li>
<li><a href='http://blogonol.blogspot.com'><img alt='add to stumbleupon' src='http://i1138.photobucket.com/albums/n524/blogonol/blogonol2-stumbleupon.png'/></a></li>
<li><a href='http://blogonol.blogspot.com'><img alt='add rss feed' src='http://i1138.photobucket.com/albums/n524/blogonol/blogonol2-rss.png'/></a></li>
<li><a href='http://blogonol.blogspot.com'><img alt='add to twitter' src='http://i1138.photobucket.com/albums/n524/blogonol/blogonol2-twitter.png'/></a></li>
</ul>