Cara Membuat Button Share Sosial Di Blog Ala Blog Bamz

Cara Membuat Button Share Sosial Di Blog Ala Blog Bamz - Halo kawan semua, kembali lagi dengan saya di Andrie Brader, Kali ini saya akan bagikan Tutorial blogger, yakni Cara Membuat Button Share Sosial Di Blog Ala Blog Bamz. Bagi kalian yang suka mencari template blogger premium yang minimalis dan fast loading pasti mengenal Blog Bamz, Blog yang beralamatkan www.bamz.co.id merupakan situs yang terkenal akan Template-Templatenya yang cocok bagi para blogger yang suka bermain Adsense karena desain templatenya keren dan memiliki CTR yang tinggi.

Selain Templatenya, Bamz juga terkenal dengan tombol share social medianya yang keren dan nyaman dilihat. Bagi kalian yang ingin memasang widget social media seperti milik Bamz saya akan memberikan tutorialnya.

Cara Membuat Tombol Share Keren di Blogger

1. Login ke Blogger >> Template >> Klik Edit HTML. Cari kode <data:post.body> (Biasanya ada lebih dari 1, pilih aja yang terkahir atau cari satu persatu).

2. Setelah itu Taruh kode dibawah ini dibawah kode diatas.

<!-- Tombol Share By Andrie Brader -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-share-andrie-brader'>
<div class='tombol-share-andrie-brader'>
<a class='tombol-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 class='tombol-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='tombol-share-andrie-brader-tw'>
<a class='tombol-share-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-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='tombol-share'>
<a class='tombol-share-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-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 class='tombol-share'>
<a class='tombol-share-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='tombol-share-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
</div>
</div>
</b:if> 

3. Setelah itu cari kode ]]></b:skin atau </style>, lalu taruh kode CSS dibawah ini diatas di salah satu kode tadi.

/* Share Button By Andrie Brader */
.tombol-share-andriebrader{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-share-andriebrader-fb,.tombol-share{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-share-andriebrader-tw,.tombol-share,.tombol-share-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-share-fb,.tombol-share-tw,.tombol-share-gp,.tombol-share-lin,.tombol-share-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh1PN4q_uc41MpwTQCHQfz1hjg0uOSfmfERmhDzB8dh4XcCb65Vr6KHz9iqucb4Eg4Nq8GuJ_2NSi5IbeXvweonUOMBxMwOHJtNOo5c4upn6wZhpC1qP2pvEkUwqbXjyXqclxj98I1h_we/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-share-fb-label{color:#2d609b}
.tombol-share-fb-label,.tombol-share-tw-label,.tombol-share-gp-label,.tombol-share-lin-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}
.tombol-share-tw{background-position:0 -43px}
.tombol-share-tw-label{color:#00c3f3}
.tombol-share-gp{background-position:0 -86px}
.tombol-share-gp-label{color:#f00}
.tombol-share-lin{background-position:0 -129px}
.tombol-share-andriebrader a{color:#999;transition:all .3s;}
.tombol-share-andriebrader a:hover{color:#7cb0ed}
@media only screen and (max-width:640px){
.tombol-share,.tombol-share-andriebrader-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-share,.tombol-share-andriebrader-tw,.tombol-share-lk{float:left;width:48%;padding:0;border-left:0}}

 4. Setelah itu Simpan Template dan lihat hasilnya.

Sampai disini dulu tutorial mengenai Cara Membuat Button Share Sosial Di Blog Ala Blog Bamz. Semoga bermanfaat. Apabila mengalami masalah, silahkan tulis komentar dibawah. Insya Allah saya balas. OK.. Sekian dan Terima Kasih...

Fahreza Kei

Penggemar Anime yang selalu menghabiskan 50 episode setiap harinya.

Bagikan Artikel ini