Membuat Social Share Button Efek Tooltip Di Blog

Jika di artikel sebelumnya saya pernah berbagi tutorial cara membuat social share button di bawah posting, maka di tutorial kali ini juga masih dengan tutorial yang sama namun kali ini social share button tersebut sudah responsive dan memiliki efek tooltif ketika di hover dan sudah jelas widget share button ini tidak akan berantakan ketika di buka di media berukuran kecil karena sudah menyesuaikan.

Jika anda tertarik untuk memasang widget share button di blog anda, silahkan ikuti tutorialnya namun sebelum melakukan tutorial pastikan di template blog anda sudah terdapat kode link font awesome jika belum terpasang, silahkan pasang kode tersebut di bawah tutor.

Baca Juga : Cara Membuat Related Posts / Artikel Terkait Di Blog

Membuat Social Share Button Efek Tooltip Di Blog

1. Buka akun blogger anda.

2. Menu template klik edit HTML

3. Jika di template anda belum terdapat kode link font awesome silahkan letakan kode dibawah ini tepat di atas kode </head>

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

4. Selanjutnya letakan kode di bawah ini tepat diatas </style> atau ]]></b:skin>

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

5. Sekarang letakan kode dibawah ini tepat diatas kode </article>

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

6. Terakhir save template dan lihat hasilnya.

Oke saya rasa sudah cukup untuk tutorial "Cara Memasang Social Share Button Efek Tooltip Di Blog" lebih dan kurangnya saya mohon maaf.