Cara Membuat Tombol Share Keren di Blogger Tanpa Javascript

Yang teristimewa dari widget share button ini adalah pembuatanya tanpa disertai dengan javascript, seperti yang kita ketahui bahwa javascipt merupakan salah satu pemicu blog anda menjadi lamban saat diakases, apalagi javasciptnya tidak di syncron terlebih dahulu. Langsung saja tanpa basa-basi berikut tutorial membuat tombol share dibawah postingan blog :

1. Seperti biasanya agan harus login dulu ke akun dasbhor blog akan , setelah itu masuk ke bagian template => Edit html

2. Setalah masuk ke halama editor template copy dan pastekan kode dibawah ini tepat diatas kode </style>

.article-share{width:100%;height:43px;margin-bottom:10px}
.article-share-fb-cont,.article-share-other-cont{float:left;width:138px;width:114px;padding:0 7px;height:inherit}
.article-share-tw-cont,.article-share-other-cont,.article-share-like-cont{float:left;width:114px;height:inherit;padding:0 7px;border-left:solid 1px #d8d8d8}
.article-share-fb-cont,.article-share-other-cont{float:left;width:138px;width:114px;padding:0 7px;height:inherit}
.article-share-fb,.article-share-tw,.article-share-gp,.article-share-li,.article-share-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUKYbMd7wI6DoMlgURE8VbIUpJiRCNbBp8Q7qYw4-BkghtGJzPr1WaCQpIMkoi-BtxkItQdsRZbnOAyzJ5KhBOT9BOFUmfxm64EAfEsmKBLC7Enjiq4VXbRPon3-HX4qKrZg8FK1X2GlM/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.article-share-fb-label{color:#2d609b}
.article-share-fb-label,.article-share-tw-label,.article-share-gp-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.article-share-tw{background-position:0 -43px}
.article-share-tw-label{color:#00c3f3}
.article-share-gp{background-position:0 -86px}
.article-share-gp-label{color:#f00}

3. Setelah sobat selesai menyimpan kode css diatas, langkah selanjutnya adalah kita memasang kode htlmnya agar css diatas befungsi, caranya adalah salin dan tempelkan kode dibawah ini diatas kode <data:post.body/&gt; ( biasanya kode tersebut lebih dari 2 , sobat pilih aja yang terakhir atau di coba satu persatu )


<div class='article-share-'>
<div class='article-share-fb-cont'>
<a class='article-share-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a>
<a class='article-share-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='article-share-tw-cont'>
<a class='article-share-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'></a>
<a class='article-share-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='article-share-other-cont'>
<a class='article-share-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'></a>
<a class='article-share-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
</div>

4. Langkah yang terkahir klik save dan lihat hasilnya
Sampai disini cara membuat tombol share tanpa javascript yang ringan banget dibawah postingan blog sudah selesai, jika sobat tertaik dengan tombol share ala blogbamz ini dan ingin mengganti widget share button yang lama dengan yang ini, silahkan sobat praktekan cara diatas, jika ada kendala atau masalah silahkan corat - coret di kolom komentar bawah ini.