Cara Membuat Tombol Share ala BlogBamz

Kali ini Nanang Rangers akan membagikan Tombol ala Blog Bamz yang kemarin udah membagikan sebuah Tombol Share Ala Evo Magz. Kali ini saya membagikan sebuah Tombol Share yang mungkin sobat sobat Berminat yaitu Tombol Share Ala BlogBamz yang bisa anda lihat di www.blogbamz.com atau pada gambar di bawah ini.

Langkah langkah membuat kotak share diatas adalah sebagai berikut :

1. Masuk Ke Akun Blogger sobat di Blogger.com

2. Masuk ke menu Template dan Pilih Edit HTML

3. Masukan Script di Bawah ini Tepat di Atas    </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/AVvXsEjfWMmluclen_GbQIEBFfhOPH9EEPdSiNLMZD7ye9lj_naIBRMWhdnRK6_V_T4HQlonw-ApKatcXzVy46JuNFkg1TSJPNo-dgBwEXTTYUEm-m4I4dExZaw1AT5GQb1AcC3LCGdMSliHGjA/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}

4. Kemudian Cari Script  <data:post.body/>  Dan Masukan Script dibawah ini Tepat DIATAS KODE Tersebut.

 <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>

Script diatas bisa jadi ada dua silahkan sobat menaruhnya satu persatu.

5. Pratinjau dan Simpan Template Sobat

Sumber

Please Share This My Friend: