Cara Membuat Tombol Share Keren, Ringan & Responsive di Blog

Cara Membuat Tombol Bagikan Responsive, Ringan, dan Keren di Blogger - Tombol Berbagi ini sangat bermanfaat bagi blog karena pengunjung dengan mudah membagikan artikel blog tersebut ke beberapa sosial media, seperti facebook, twitter, google+, dan linkedin. Dengan begitu blog kita semakin ramai setelah dibagikan oleh pengunjung yang lain. 

Share button ini sangat ringan karena tanpa javascript dan tentunya enak di pandang. Dan berikut adalah tutorial pembuatan tombol share pada blog:

1. Pergi ke Blogger.
2. Masuk ke menu Template.
3. Pilih Edit HTML.
4. Copy kode CSS di bawah ini dan paste sebelum kode ]]></b:skin atau </style>

/* CSS Share Button */
.tombol-berbagi-wjw{display:block;position:relative;height:33px;line-height:43px;padding:5px;border-top:2px solid #f0f0f0;margin:auto}
.tombol-berbagi-wjw-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-wjw-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #f0f0f0}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/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-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-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-lin{background-position:0 -129px}
.tombol-berbagi-wjw a{color:#999;transition:all .3s;}
.tombol-berbagi-wjw a:hover{color:#7cb0ed}

5. Kemudian copy kode HTML di bawah ini dan paste setelah kode <data:post.body/> (mungkin sobat menemukan banyak kode tersebut, pilih yang kedua dari yang terkahir terakhir atau coba satu per satu).

<!-- Tombol share media sosial -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-wjw'>
<div class='tombol-berbagi-wjw-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-wjw-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-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-berbagi-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>

6. Simpan template.

Cukup mudah kan sob? Oke cukup sekian Cara Membuat Tombol Share Keren, Ringan & Responsive di Blog. Terima kasih sudah berkujung mas bro dan mbak sis, semoga artikel ini bermanfaat bagi mas bro dan mbak sis.