Cara buat tombol share tanpa kode Javascript

Malam sobat BDariku, di post kali ini admin mau share tentang bagaimana cara membuat tombol share namun tutorial disini tanpa menggunakan kode javascript. Apa bedanya menggunakan kode javascript dan tidak menggunakan javascript?

Jika sobat mau bertanya seperti itu admin hanya bisa menjawab perbedaanya cuma pada kecepatan loading blog saat diakses. Tombol share tanpa kode javascript akan lebih ringan diakses daripada menggunakan kode java script. Berikut langkah-langkah membuat tombol share tanpa kode javascript:

1. Login pada blogger
2. Masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>

/* Tombol share tanpa kode javascript by Dariku.net*/
.tb-share {
background: #cccccc;
border: 1px solid #999;
padding: 5px;
}

.fbshare {line-height: 20px; color: #fff !important; background: #3b5998; text-decoration: none !important; border: 1px solid #313c7d; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; border-radius: 2px;}
.twshare {color: #fff !important; background: #4099FF; text-decoration: none !important; border: 1px solid #3a8be8; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.plshare {color: #fff !important; background: #c0361a; text-decoration: none !important; border: 1px solid #9c2c15; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.dgshare {color: #fff !important; background: #5b88af; text-decoration: none !important; border: 1px solid #4a6f8f; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.lkshare {color: #fff !important; background: #005a87; text-decoration: none !important; border: 1px solid #003f5e; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.tcshare {color: #fff !important; background: #157501; text-decoration: none !important; border: 1px solid #105901; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}

7. Kemudian cari kode <data:post.body/>, pastekan kode dibawah ini dibawah kode <data:post.body/>

<div class='tb-share'>
Share this article to:
<a class='fbshare' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank'>Facebook</a>
<a class='twshare' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Twitter</a>
<a class='plshare' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='lkshare' expr:href='"http://www.linkedin.com/cws/share?url=" + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>
<a class='tcshare' expr:href='"http://technorati.com/faves?sub=addfavbtn&add=" + data:post.url' rel='nofollow' target='_blank'>Technorati</a>
<a class='dgshare' expr:href='"http://digg.com/submit?url=" + data:post.url' rel='nofollow' target='_blank'>Digg</a>
</div>

8. Langkah terakhir save template sobat dan lihat hasilnya pada salah satu postingan sobat.