Membuat Share Button Keren Untuk Blog

Widget

nahloh

3/31/2016

0

Widget

Ilustrasi Share Button

BertiSeo - Share button merupakan tombol yang penting untuk melengkapi blog maupun menambah style cantik dan rapih pada blog anda.
Fungsi share button sendiri adalah untuk memudahkan pembaca menshare artikel yang anda buat ke media sosial seperti Facebook,Twitter,G+ dll.Berikut cara membuat Share Button Keren Untuk Blog

Membuat Share Button Keren Untuk Blog

Sebelum ke langkah untuk membuat tombol share button ,pastikan template blog anda sudah menggunakan fontawesome ,jika belum ada copy code di bawah ini di atas </head>

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

1. Masih di posisi Edit HTML
2. Cari kode ]]></b:skin> dan letakan code di bawah ini sebelum kode ]]></b:skin>

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

3. Selanjutnya Copy code di bawah ini di atas kode </article>
   
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='share-post'>
                 <ul>
                   <li><a class='twitter bertiseo-tooltip bertiseo-tooltip-top' data-bertiseo-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 bertiseo-tooltip bertiseo-tooltip-top' data-bertiseo-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 bertiseo-tooltip bertiseo-tooltip-top' data-bertiseo-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 bertiseo-tooltip bertiseo-tooltip-top' data-bertiseo-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 bertiseo-tooltip bertiseo-tooltip-top' data-bertiseo-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>

4. Save template dan lihat hasilnya.

Apabila kurang jelas atau kurang paham silahkan comment atau kontak fb saya langsung.

Sekian,semoga bermanfaat.