Hari ini saya sangat senang karena dapat membuat tutorial yang mungkin dapat membantu anda membuat Social Bookmark yang menarik untuk situs anda dan membantu anda menyebarkan atau mempopulerkan artikel anda dengan cepat dan mudah dengan membuat Tombol Social Bookmark yang bergerak di bagian Single Post situs atau Blog anda dan tips ini cukup mudah dibuat karena anda hanya mengikuti beberapa petunjuk saya dan menambahkan beberapa kode yang sangat sederhana :

Lihat Demo :

Cara Membuatnya

1. Anda harus menambahkan kode dan mencari beberapa kode dengan cara :

Login ke Blogger >> Dasbor >> Pilih situs >> tata letak >> edit Html >> dan jangan lupa centang Expand Template Widget

Dan tekan Ctrl-F untuk menampilkan search yang akan memudahkan pencarian anda dan lihat kode dibawah yang harus anda cari :

</body>
</html>

Setelah anda menemukan kode diatas maka tambahkan kode JavaScript yang ada dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='social_r'>
<div class='social-media'>

<div class='social'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>

<div class='social'><script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
tweetmeme_source = &#39;your_twitter_user_name&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>

<div class='social'><a class='DiggThisButton DiggMedium'><script type='text/javascript'>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script></a></div>

<div class='social'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>FCB</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div>

<div class='social-t'><a href='http://www.allbloggertools.com/'>By A.B.T</a></div>

</div></div>
</b:if>

Lihat gambar dibawah sebelum menambahkan kode :

2. Langkah kedua adalah menambahkan Kode Css :

Cari kode dibawah ini dalam templates anda

 ]]></b:skin> 

Tambahkan kode Css diatasnya dan jangan menghapus kode diatas.

.social_r .social-media{
background: transparent no-repeat scroll left top;
position: fixed;
top: 170px;
width:50px;
z-index: 5555;
cursor: pointer;
right: 20px;
color: transparent;
text-align:center;
}
.social_l .social-media{
background: transparent no-repeat scroll right top;
position: fixed;
top: 170px;
width:50px;
z-index: 5555;
cursor: pointer;
left: 20px;
color: transparent;
text-align:center;
}
.social{
padding-bottom:15px;
float:right;
color:#000;
}
.social-t{
font-size:9px;
padding-bottom:15px;
float:center;
right:3px;
color:#000;
}
.social-t a, a:hover{
color:#000;
}

Atau anda dapat melihat gambar sebelum memasang kode diatas :

3. Melakukan Customize atau Perubahan sesuai keinginan dapat anda lakukan dengan mudah dan kode social bookmark diatas dapat anda letakkan pada bagian kiri dan anda dapat mengubahnya dengan menambahkan beberapa tambahan social bookmark lagi sesuai dengan kebutuhan dan keingginan anda dan kode dibawah adalah kode social bookmark yang terletak di kiri Blog atau situs anda :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='social_l'>
<div class='social-media'>

<div class='social'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>

<div class='social'><script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
tweetmeme_source = &#39;your_twitter_user_name&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>

<div class='social'><a class='DiggThisButton DiggMedium'><script type='text/javascript'>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script></a></div>

<div class='social'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>FCB</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div>

<div class='social-t'><a href='http://www.allbloggertools.com/'>By A.B.T</a></div>

</div></div>
</b:if>

Demo

Kesimpulan Tips Diatas

Semoga tips saya diatas sangat bermanfaat bagi anda untuk membuat website anda semakin populer dan semakin baik dengan tambahan social bookmark diatas dan jika artikel ini sangat membantu anda maka saya harapkan anda membantu saya untuk menyebarkan artikel ini dengan cara ReTweet kembali agar teman-teman kita yang lainnya dapat membacanya dan memberikan saran yang lain atau kode yang lebih baik dari kode yang saya buat diatas dan semoga anda dapat mencobanya dan tidak mengalami kesulitan dalam membuatnya dan saya harapkan teman-teman jangan menghapus link saya karena saya membuat tips diatas Bergadang semalaman memutar pikiran dan waktu saya. terima kasih atas kunjungan dan perhatian teman-teman.