Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

THEME SHOP - Tukang Toko Online
Jasa Review

Pasang Tombol Animasi Sosial Bookmark

Sosial bookmark widget animasi
Banyak blogger yang suka memasang tombol sosial bookmark. Sebelumnya Tukang Toko Online juga sudah pernah menuliskan artikel mengenai pemasangan tombol sosial bookmark di blog ini. Namun kali Tukang Toko Online akan menambahkan lagi satu tutorial pemasangan tombol sosial bookmark yang lain daripada yang lain. Ya, karena widget ini berupa animasi dengan bentuk setengah lingkaran. Tombol ini akan memunculkan shorcut ke beberapa sosial bookmark yang lagi trend saat ini semacam : Pinterest, Google+, Facebook, Twitter, Tumblr dan juga Email. 

Jika anda ingin mengetahui "penampakan" hasilnya, silakan klik tombol "view demo" di bawah ini :

View Demo Button

Cara menambahkan Tombol Animasi Sosial Bookmark ke Template Blogger

Langkah 1. Login ke akun blogger anda >> template >> EDIT HTML (centang expand widget template).

Jangan lupa untuk selalu melakukan backup Template anda lebih dulu sebelum melakukan perubahan apapun pada script html template. 

langkah 2. Cari kode berikut ini : (Gunakan tombol Ctrl+F untuk membantu pencarian)
</body>

Langkah 3. Copy dan Paste kode berikut ini tepat di atas / sebelum kode </body>
<!-- Start Shareaholic Sassy Bookmarks HTML - http://www.pasartokoonline.blogspot.com -->
<div class='shr_ss shr_publisher'>

</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type='text/javascript'>
var SHRSS_Settings = {&quot;shr_ss&quot;:{&quot;src&quot;:&quot;//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,313,38,201,88,74&quot;,&quot;apikey&quot;:&quot;b87f5899d80a5edce8b5e55f58542ef0f&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;bitly&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;tip_bg_color&quot;:&quot;black&quot;,&quot;tip_text_color&quot;:&quot;white&quot;,&quot;viewport&quot;:true,&quot;twitter_template&quot;:&quot;${title} - ${short_link} via @Shareaholic&quot;}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type='text/javascript'>
(function() {
var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-ss.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
})();
</script><small><a href='http://pasartokoonline.blogspot.com/2012/06/pasang-tombol-animasi-sosial-bookmark.html'>Animated Social Gadget</a> - <a href='http://pasartokoonline.blogspot.com/'>Blogger And Wordpress Tips</a></small>

<!-- End Shareaholic Sassy Bookmarks script -->
<!-- End Shareaholic Sassy Bookmarks HTML - http://pasartokoonline.blogspot.com -->

Step 4. Preview hasilnya dulu, jika tidak ada masalah, Simpan /Save Template.

Jika langkah -langkah tersebut dilakukan dengan benar, dan tidak ada crash dengan script lain pada template bawaan anda, seharusnya tombol animasi sosial bookmark sudah bisa muncul pada blog anda.

Selamat mencoba

4 komentar untuk "Pasang Tombol Animasi Sosial Bookmark"

  1. Makin tambah lengkap saja informasi dari "Tukang Toko Online" ini.
    Penambahan tombol SOSMED ini menambah berat loading tidak ya?
    mksh atas sharingnya

    BalasHapus
  2. @Grosir Jilbab TA: cek aja di livedemonya Gan..

    BalasHapus
  3. Kok gak bisa ya? Tolong bantuannya dong..

    BalasHapus