Memasang Widget Share Button di Bawah Postingan Blog

Memasang Widget Share Button di Bawah Postingan Blog - Kembali Semua-Tutorialku berbagi tips seputar blogging, setelah beberapa artikel sebelumnya juga saya telah membagikan beberapa tips seputar blog.

Tutor kali ini saya dapat-kan dari salah satu blog milik Arlina Design, yaitu http://twistedshape.blogspot.com, untuk admin Arlina Design saya ucapkan terima kasih :)

Silakan ikuti langkah berikut :

Catatan : Sebelum menerapkan widget ini ada baiknya di template yang sobat gunakan sudah terdapat link fontawesome, jika belum ada silakan terapkan link di bawah ini sebelum tag penutup </head>

 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> 

1. Buka blogger > Klik Template buka Edit HTML > Cari kode  ]]></b:skin> atau </style> kemudian tambahkan kode di bawah ini tepat diatasnya

 /* CSS Tooltip */
.arlina-tooltip {position:relative;display:inline-block;}
.arlina-tooltip:before, .arlina-tooltip:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;} 
.arlina-tooltip:hover:before, .arlina-tooltip:hover:after {opacity:1;}
.arlina-tooltip:before {content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute;}  
.arlina-tooltip:after {content:attr(data-arlina-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;}
.arlina-tooltip-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#494158;}
.arlina-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%}}

2. Selanjutnya tambahkan kode ini tepat di atas </article>

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

3. Simpan template dan lihat hasilnya.

Bagaimana? mudahkan
Untuk anda yang ingin melihat Demo tutorial ini, bisa lihat di akhir artikel ini karna saya juga menggunakan share button ini. :) Semoga Bermanfaat, Sampai Jumpa.

Source: xhttp://twistedshape.blogspot.com/2015/06/memasang-widget-share-button-di-postingan.html