Cara Membuat Share Button Responsive Mobile SEO

Kang Damai - Selamat datang kembali di chanel yang bikin happy tentunya di blog Kang Damai kali ini saya akan membahas tentang bagaimana membuat sebuah fitur pada blog yang wajib adanya. Share Button Responsive Mobile SEO merupakan salah satu fitur yang harus ada karena dapat menambah page view pada blog. Alasan kenapa bisa menambah page view karena dengan adanya share button di blog maka pembaca dengan leluasa membagikan hanya dengan menekan share button tersebut sehingga otomatis banyak jaringan yang bisa membuat masuk kita ke dalam blog.

1. Masukkan script CSS  dibawah ini diatas kode </style>  atau ]]></b:skin> pada menu edit HTML

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-post'>
              <ul>
                <li><a class='twitter kangdamai-tooltip kangdamai-tooltip-top' data-kangdamai-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 kangdamai-tooltip kangdamai-tooltip-top' data-kangdamai-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 kangdamai-tooltip kangdamai-tooltip-top' data-kangdamai-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 kangdamai-tooltip kangdamai-tooltip-top' data-kangdamai-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 kangdamai-tooltip kangdamai-tooltip-top' data-kangdamai-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. Yang terakhir simpan editan template tersebut kemudian testing.

Demikian Cara Membuat Share Button Responsive Mobile SEO Semoga bermanfaat. Terimakasih.

Sumber Script dari website arlina design dengan sedikit perubahan yang diperlukan.