Buat Tombol Share Sidebar Blog Friendly

Berbagi-Kreativitas.blogspot.com - بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم Salam! Buat Tombol Share Sidebar Blog Friendly banyak sekali jenis dan fungsinya untuk blog tujuan dipasangnya tombol share adalah jelas bentuk promosi blog agar bisa dilakukan lebih efektif karena sistem kerja yang otomatis tentu akan mempercepat kinerja tanpa lama. Dengan adanya Tombol Share di Blog akan mempermudah melakukan interaksi secara luas tidak hanya dilingkungan web blog itu sendiri tetapi mencakup media sangat luas seperti jejaring sosial facebook, twitter dan lain-lain guna blog dikenali dan dikehatuhi keberadaannya oleh banyak pihak. Sebelum ini Saya juga ada mempublik tombol share dengan fungsi yang sama tapi beda posisi seperti Tombol Multi Share Melayang, tinggal Anda pilih mana yang cocok untuk keberadannya diblog Anda.

Tombol Share Di Lengkapi Dengan Bookmarks

Tidak hanya tombol share yang fungsinya adalah untuk membagikan baik itu Judul blog ataupun judul artikel kebanyak situs yang dituju, akan tetapi tombol share disini Saya lengkapi dengan Bookmarks berfungsi untuk menandai situs tertentu untuk dijadikan favorit disimpan melalui tool bookmars pada browser agar mempermudah ketika Anda ingin membuka kembali situs tersebut tanpa harus mencari di Google atau mengetikkan alamat situs web blog pada address bar browser. Disini Saya akan memberikan 2 opsi untuk Anda, gunakan sesuai yang Anda pikir mudah berdasarkan kebutuhan berikut adalah langkah-langkahnya

Opsi 1.

1. Seperti biasa masuk blogger.com dan masuk pada halaman Edit HTML

2. Sebaiknya lakukan backup template blog Anda terlebih dahulu

3. Cari kode ]]></b:skin> letakkan kode berikut tepat di atasnya

.addthis_toolbox{padding:5px 0 0px 0;text-align:left}
.addthis_toolbox .custom_images a{width:72px;height:32px;margin:5px 3px;padding:0;}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.65}

4. Dilanjutkan dengan mencari kode <div id='sidebar-wrapper'> letakkan kode berikut tepat dibawah kode tersebut

<div class="addthis_toolbox">
<div class="custom_images">
<a class="addthis_button_twitter" href="http://www.blogger.com/blogger.g?blogID=7451311509500276310"><img alt="Twitter" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyk9Ck6ZsmCBDxeBiPJQJmk3oUFtjtfhDgwq4k_lg8z3MrnU_FDQakCJNb-Hlqrj1T7JPBH3DXz0YOF5WbWGeROzdI0u7ozB_A4P891cF4n0ss2XfW5KaAaQUg14Dsu0wfQXIOi473h6E/s1600/twitter.png" width="35" /></a>
<a href="https://plus.google.com/" target="_blank"><img alt="Google Plus" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGgM5CVXbSvmqy7qA10LcwYQby67fzGw7VxEGZXHy0_JsMFtEAr7WGYstBlBkKnOtHN5aTKta00pRX-fHkBuN5Jxp28tfC-1hXPtZoc8gHxeKUS8etS7g2y4Wf0MOVZNYybLmZmxFG3io/s1600/gplus.png" width="35" /></a>
<a class="addthis_button_facebook" href="http://www.blogger.com/blogger.g?blogID=7451311509500276310"><img alt="Facebook" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI7JO_rCp4Zy4fE1_xNtyr1Vo58UQPHlkaqcSbVfJa3WWybxg90yJZ3j0Fge_H_mC8w4Z66ihl9iGWpFYdENXgAcWyRAstiMAQ2QWO5x0U-LACnE8iCkdu_qFK9Bn4dCcVp_KUx8feUX0/s1600/facebook.png" width="35" /></a>
<a class="addthis_button_digg" href="http://www.blogger.com/blogger.g?blogID=7451311509500276310"><img alt="Digg" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKMBUgd57XNEyz3u6nReb0gjt86gQo_wh_G_ORyTSGRKDeBnuFm90QYcUQRXqGqOI6CRsaOn3ySjF-AP1UUt-s0eGQMh1hJz4UMjumiJ-0Wg0AzyuE0gIYsAUNaJc_ADQWhVhIyHxVexg/s1600/digg.png" width="35" /></a>
<a class="addthis_button_stumbleupon" href="http://www.blogger.com/blogger.g?blogID=7451311509500276310"><img alt="Stumbleupon" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh810n4VCuIyqlf-GUWSTdSKf8suGQctHqNjX7EuXmpTxGQHr43imaCCd66f7aFfdXiqoRXz711j5TJs3Ts1-EE6WEFlf1oPsDSlV2ysCJM3QlM3bqqFqEUrXVlF1FGC_wrEpBUhUeQruE/s1600/stumbleupon.png" width="35" /></a>
<a class="addthis_button_favorites" href="http://www.blogger.com/blogger.g?blogID=7451311509500276310"><img alt="Favorites" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69uls-Bx0Bf0OLciPozeJ_QH9ha67-x1oeJ3n32j86HGYHeO2_wCqYtnSxdAVcqdH9J5o0r2JT9Q3oJHuYrfkVlloT1ZiIEJS_AvLwIunrZN-okNNq32v_WO8cRR_KLx1rDtviSEHvQ8/s1600/favorites.png" width="35" /></a>
<a class="addthis_button_more" href="http://www.blogger.com/blogger.g?blogID=7451311509500276310"><img alt="More" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJsVnX743sb-YOkMjZuAeKFV74VgGiQu8nPKpVECEIHc4RuM2Mv2FwcroAk7sNleENQtNivH4exb5NtjxRlLlDYmYNHKDYz2quQNAUd7avrxRTSJTmnZJV8rVOJTfCC-UA8nEIfabXPE/s1600/more.png" width="35" /></a>
</div>
<script src="http://s7.addthis.com/js/250/addthis_widget.js" type="text/javascript"> </div>
</script></div>
<div style='clear:both;'/>

5. Simpan template.

Opsi 2.
Cara ini bisa Anda lakukan lebih mudah dan cepat, tanpa harus Edit HTML template Anda. Saya pikir tidak ada perbedaan fungsi disini hanya letaknya saja yang berbeda dilihat dari kodenya juga hanya bermain CSS dan HTML serta sedikit kode JavaScript yang sudah diconvert dalam bentuk link oleh s7.addthis.com jadi tidak buat berat blog bisa dilihat Sayapun menggunakannya pilih sesuai keinginan Anda.

Caranya sangat mudah masuk pada halaman Tata letak lalu tambahkan Gadget simpan Script pada no. 4 diatas pada Gadget HTML/ JavaScript.tanpa <div style='clear:both;'/>. Sekian semoga manfaat dan terbantu terima kasih Salam.

Catatan:
CSS Margin margin:5px 3px;padding:0;: Uuntuk mengatur jarak antara objek tombol share satu dengan lainnya disebelah kiri dan kanan objek serta jarak kanan kiri objek padding antara halaman Sidebar dan halaman posting, atur sesuai lebar Sidebar blog Anda.