Pasang Widget Dynamic Social Bookmark

Sosial media adalah tempat kita bersosialisasi menggunakan internet. Tentunya agar kita mendapat followers yang banyak atau teman yang banyak, kita dapat bahkan setidaknya ada widget sosial ini. Baik itu yang melayang, yang ada di postingan, di sidebar, atau lainnya. Sekarang saya akan membahas tentang cara memasang widget dynamic social bookmark ke Blogger. Nampak seperti apa sih widget Dynamic Social Bookmark ini?

Live Demo

Menambahkan Script jQuery

1. Login ke akun Blogger anda.

2. Masuk ke Dasbor > Template > Edit HTML

3. Cari kode </head> .

    Catatan : Pertama klik pada kode apa saja yang ada di editor, lalu tekan CTRL+F untuk mencari.

4. Taruh kode ini tepat sebelum kode </head> . Untuk kode yang di highlight, jika kode tersebut sudah ada di bagian template anda, maka tidak perlu ditambahkan lagi ke template anda.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 

<script language='javascript'> 
var name = &quot;#floatMenu&quot;;
var menuYloc = null;
$(document).ready(function(){menuYloc = 
parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css 
(&quot;top&quot;).indexOf(&quot;px&quot;)))
$(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;$(name).animate({top:offset},{duration:1000,queue:false});});}); 
</script>

Menambahkan Kode CSS

1. Cari kode ]]></b:skin>

    Catatan : Pertama klik pada kode apa saja yang ada di editor, lalu tekan CTRL+F untuk mencari.

2. Setelah ketemu, letakkan kode dibawah ini tepat sebelum kode tersebut.

#floatMenu {position:absolute;top:150px;float:left;width:45px;}
#floatMenu ul {list-style: none;}
#floatMenu ul li a {-webkit-transform:scale(0.6);-moz-transform:scale(0.6);-o-transform:scale(0.6);-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;opacity: 0.8;}
#floatMenu ul li a:hover {-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);opacity: 1;}

Menambahkan HTML

1. Cari kode </body>.

    Catatan : Pertama klik pada kode apa saja yang ada di editor, lalu tekan CTRL+F untuk mencari.

2. Letakkan kode ini tepat sebelum kode tersebut.

<div id='floatMenu'>
<ul>
<li><a href='http://facebook.com/bloggingforstyling' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lj7uyJYdbgjy1dPxY_fmxcVp1bXo-tyT-cVgUyVws6pHk_OIgcWW4rBKQLIpn8LJxmH7CplI3tb6decT-Af9De7mzpMUSTW7KFy8mZ0EkQ0uyOB_e8ofUr1DsbYgZWLvPI6DMXT39bM/s1600/btrix-facebook.png' style='margin-bottom: 3px;' title='Follow Me On  Facebook'/></a></li>
<li><a href='http://twitter.com/bloggingforstyling' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTd3xSlqAGJQDAzmrqHkv0UBDQjDL3TD0TZNn8JyrRcIZH7Ed25A2X8PHjE0de95V0yhVMdCmbfXMXSm4eg9G7kq1qKQZ86a_zXRbkIBLTGVQk3Ws4dOVyIwGeMWUuzVP3AzLr3Ea0Vgs/s1600/btrix-twitter.png' style='margin-bottom: 3px;' title='Follow Me On  Twitter'/></a></li>
<li><a href='http://pinterest.com/bloggingforstyling/' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNSvdoR2qczxTnuAC8o-IvSZWyZDJQ2X3ErchYtLUFMGRl8tSxcr71cguyDNrzTP8Svq2w6oWceiyd3_bkR1ov7751tDEIVaCSH-GyI0ObhpWzAeyXsNv2uvW8FmbFP37OPU7VVvSm7dc/s1600/btrix-pinterest.png' style='margin-bottom: 3px;' title='Follow Me On  Pinterest'/></a></li>
<li><a href='https://plus.google.com/GOOGLEPLUSID' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpRnMGNWJA6LqpMJtYtU3NP62ZOMu0QTy8LsaoSfaXWI4LgTfVkhZlx2VAk3_UPzjP6MoTyZBssu8GRhqI-YqLqyCBRkVUahQVNaVvIHGJpuACNBEPsyFyh9QfqaNXxhsEyAt0VG8SWvg/s1600/btrix-googleplus.png' style='margin-bottom: 3px;' title='Add Me your Circle'/></a></li>
</ul></div>

Catatan :

• Ubah http://facebook.com/bloggingforstyling dengan alamat Facebook anda.
• Ganti http://twitter.com/bloggingforstyling dengan alamat Twitter anda.
• Ganti http://pinterest.com/bloggingforstyling/ dengan alamat Pinterest anda.
• Terakhir, ganti GOOGLEPLUSID dengan ID Google Plus anda.

Langkah terakhir, Klik Simpan Template!