Memasang Tombol share di Blogger Seperti BlogBamz

Cara Buat dan Memasang Tombol share di Blogger Seperti BlogBamz - Bagi sobat Blogger pecinta template minimalis dan fast loading serta seo pasti kenal yang namanya Blogbamz , yups blog yang beralamatkan www.blogbamz.com ini dikenal dengan template - templatenya yang sangat cocok sekali untuk bermain adsense, karena desain templatenya tersebut meletakan space iklan adsense yang letaknya mudah dilihat oleh pengunjung sehingga menghasilkan template yang high ctr dan klik valid yang tinggi.

Selain template - template  premium yang di jual oleh Mas Bambang Ghozali ( admin dari blogbamz ) template yang digunakanyapun juga tidak kalah keren dan unik dengan template premiumnya. Salah satu bagian yang saya suka dengan template blogbamz tersebuat adalah pada bagian share button nya, Karena widget tombol sosial media nya tersebut belum pernah ada yang memakainya kecuali mas bamz itu sendiri dan juga widgetnya ringan banget tanpa menggunakan javascript , serta enak di pandang.

Seperti apakah demo dari tombol share dibawah postingan seperti blogbamz ? sobat bisa melihat demonya secara langsung di blognya mas bamz sendiri, atau bisa melihat gambar dibawah ini. 

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 syncronterlebih 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-masyadi{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/AVvXsEikzC7xGqsdevSIEowhsnSrM8zBJb32eJXc3-lzp7KNcZb8JsiQM9RbbGBL7WF2XEofYJuxpCwMid-VgGLRbfvju_nNoDYWlKuRVRCDBOqNS9vtUTR0g1z96gT4W2uuDlmLJqMWVCMnbgk/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/> ( biasanya kode tersebut lebih dari 2 , sobat pilih aja yang terakhir atau di coba satu persatu ) 

<div class='article-share-masyadi'>
<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 

NOTE:
Jika sobat belum terbiasa mengubrek - ubrek editor template, saya sarankan untuk mencobanya di blog dummy terlebih dahulu

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.

SHARE THIS