Memasang Tombol Share di Blog

Artikel kali menjelaskan cara memasang tombol berbagi (Share button) di Blog. Tombol  ini berguna untuk memudahkan pengunjung yang ingin berbagi artikel yang dirasa bermanfaat ke jaringan sosial media mereka seperti Facebook, Twitter, Google plus, dan Linkedin. Share button ini nantinya akan muncul di setiap postingan blog sobat.

Memasang Tombol Share di Blog - Style #1

Untuk tampilan seperti screenshot di bawah ini atau bisa dilihat langsung di bawah artikel blog ini
Berikut cara penerapannya :

1. Login ke Blogger > Template > Klik Edit HTML > Cari kode di bawah ini kemudian pilih yang ke dua dalam markup post (bukan mobile post).

<data:post.body/>

2. Kemudian salin kode di bawah ini tepat setelah kode yang disebutkan tadi.

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

3. Selanjutnya terapkan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>

/* CSS Share Button */
.tombol-berbagi{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-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-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-lin,.tombol-berbagi-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiX11GzCpr18dGrbzp0YGc04lnGtK8Jr-gkVyImxRK_jOcapKTXkEMHThvMjjz6T43bQCr7gmBUcGlc6HJE3VQ5NCdYKF-CG71VSRbx7B5yIhbjQWeKRmhC-6I20nw_-MWyZY3TNlPlE6o/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 a{color:#999;transition:all .3s;}
.tombol-berbagi a:hover{color:#7cb0ed}

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

4. Simpan template.

Memasang Tombol Share di Blog - Style #2 Menggunakan Font Awesome

Style kedua ini tidak menggunakan image seperti style kesatu di atas melainkan menggunakan fontawesome. Sebelum menerapkan widget ini silahkan periksa template yang sobat gunakan apakah sudah terdapat link fontawesome, jika belum silahkan pasang link di bawah ini sebelum tag penutup </head>.

Selanjutnya temukan tag ]]></b:skin> atau </style> jika sobat menggunakan custom template, kemudian tambahkan kode di bawah ini tepat diatasnya.

/* CSS Tooltip */
.jib-tooltip {position:relative;display:inline-block;}
.jib-tooltip:before, .jib-tooltip:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;} 
.jib-tooltip:hover:before, .jib-tooltip:hover:after {opacity:1;}
.jib-tooltip:before {content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute;}  
.jib-tooltip:after {content:attr(data-jib-tooltip)!important;background:#494158;color:#fff;padding:6px 8px;
font-size:11px!important;font-family:'Open Sans'!important;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;margin-left:initial;}
.jib-tooltip-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#494158;}
.jib-tooltip-top:after {bottom:125%;left:10%;margin:0 0 3px -10px!important;}

/* CSS Share Button */
.share-post{text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
.widget .post-body > .share-post ul {padding:0;}
.share-post li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;}
.share-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;}
.share-post li a:hover{color:#fff;}
.share-post li .twitter{background-color:#19bfe5;}
.share-post li .facebook{background-color:#3b5998;}
.share-post li .gplus{background-color:#d64136;}
.share-post li .pinterest{background-color:#cb2027;}
.share-post li .tumblr{background-color:#304e6c;}
.share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover,
.share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff;}
.share-post li:last-child{margin-right:0}
.share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}
.share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}
.share-post li .fa {display:initial;}

@media only screen and (max-width:640px){
.share-post li a{padding:6px 0 6px 0;}
.share-post li .fa:before{display:none;}}

@media screen and (max-width:480px) {
.share-post li{width:100%}}

Selanjutnya tambahkan kode ini.

<b:if cond='data:blog.pageType == "item"'>
<div class='share-post'>
              <ul>
                <li><a class='twitter jib-tooltip jib-tooltip-top' data-jib-tooltip='Share on Twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a></li>
                <li><a class='facebook jib-tooltip jib-tooltip-top' data-jib-tooltip='Share on Facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>Facebook</a></li>
                <li><a class='gplus jib-tooltip jib-tooltip-top' data-jib-tooltip='Share on Google Plus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>Google</a></li>
                <li><a class='tumblr jib-tooltip jib-tooltip-top' data-jib-tooltip='Share on Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li>
                <li><a class='pinterest jib-tooltip jib-tooltip-top' data-jib-tooltip='Share on Pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>
              </ul>
         </div>
<div style='clear:both'/>
</b:if>

Simpan template dan lihat hasilnya.

Baca juga artikel: Bikin Widget Social Slide Down keren di Sidebar.