Memasang Rounded Share Button di Blog

Memasang Rounded Share Button di Blog - Halo sobat Tutorial? Apa kabar nih? Di Bulan Ramadhan yang sudah berjalan hampir satu minggu. Saya rasa anda semua Masih semangatkan pastinya untuk menjalani ibadah puasa tahun ini. :) Termasuk saya juga pastinya! Pertma-tama saya ingin mengucapkan banyak terima kasih untuk anda yang sudah berkunjung dan membaca artikel diblog saya ini, semoga artikel yang saya bagikan dapat bermanfaat untuk anda semua. :)

Memasang Rounded Share Button di Blog - Pada artikel kali, saya akan berbagi tips blogger yaitu membuat tombol share. Pastinya anda sudah tidak asingkan dengan istilah tombol share, karna tombol share sudah menjadi bagian yang wajib dari sebuah Website maupun Blog. Sebenarnya, didalam sebuah Theme / Template sudah disediakan Tombol Share ini, akan tetapi kadang tidak sesuai dengan selera kita. Oleh karna itu untuk anda yang ingin memasang Tombol Share Rounded atau Lingkaran ini, silahkan disimak terus dibawah ini. :)

Baca Juga: Memasang Widget Share Button di Bawah Postingan Blog

Cara Penerapan:

1. Masuk ke Akun Blogger
2. Pilih Template > Edit HTML
3. Lalu cari kode <data:post.body/> kemudian pilih yang kedua dalam Markup Post ( Bukan Mobile Post )
4. Kemudian Copy kode berikut dan letakkan diBawah kode <data:post.body/> tadi.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-semua-tutorialku'>
<div class='tombol-berbagi-semua-tutorialku-fb'>
<a class='tombol-berbagi-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-berbagi-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-berbagi-semua-tutorialku-tw'>
<a class='tombol-berbagi-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-berbagi-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-berbagi'>
<a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-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-berbagi'>
<a class='tombol-berbagi-semua-tutorial' 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-berbagi-semua-tutorial-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> 

5. Selanjutnya Copy kode berikut dan letakkan diatas Tag ]]></b:skin> atau </style>

 /* CSS Share Button */
.tombol-berbagi-semua-tutorialku{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-semua-tutorialku-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-semua-tutorialku-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-semua-tutorial,.tombol-berbagi-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwQjGpRsCMihFX_poEJ2N3Cll10MLGa9ha8a3rq4Wp2LbyyjeqmfsCugV98lzYXnVx__Vb7kdbhy1yubyR8lKaKMtmvnuZNgvbjvNofVKfTJ4HsijSo5aJIbDUd5uOmjQXIxC2nOWKzLUv/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-semua-tutorial-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-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-semua-tutorial{background-position:0 -129px}
.tombol-berbagi-semua-tutorialku a{color:#999;transition:all .3s;}
.tombol-berbagi-semua-tutorialku a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-semua-tutorialku-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-semua-tutorialku-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}} 

6. Terakhir Simpan Template

Sekarang anda telah Memasang Rounded Share Button di Blog anda, Jika anda memiliki masalah dalam penerapan tutorial diatas. Silahkan ajukan disini, sebisa mungkin saya akan membantu anda. Semoga bermanfaat. Saya tunggu komentarnya. :)