TOMBOL SHARE PALING RESPONSIVE UNTUK BLOGGER DI TAHUN 2018

bysufyan Yaan -
Menurut saya sih ini tombol share paling responsive telah dibuat oleh rekan blogger kita. Seperti anda ketahui  tombol share cukup signifikan mendukung kinerja SEO sebuah blog, jadi tidak perlu dibahas lagi manfaatnya.
Persiapan:

  1. Masuk ke pengaturan blogger
  2. Pilih tema atau template
  3. Pilih editHTML

Langkah 1
Untuk memasang tombol share ini pastikan template blogger anda telah terpasang kode pemanggil font awsome yang harus anda pasang dibawah kode <head>:

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>

Dan juga pastikan telah terpasang kode API (Application Programming interface) pada template anda untuk memastikan semua kode perintah widget share yang mau kita pasang berjalan sempurna, masangnya sama yakni dibawah kode <head> atau diatas kode </head> kodenya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Note: Jika kedua kode diatas telah terdapat pada template anda (template tempalte premium telah memiliki kode kode ini) maka langkah diatas dapat diabaikan.

Langkah 2

Cari kode </head> letakan kode di bawah ini sebelum atau sesudahnya (pembuatnya menyarankan sesudahnya, saya berpendapat lebih baik sebelumnya)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>

.bsd_horizontal_sharebar {
position: relative;
background: none;
z-index: 2;
width: 100%;
padding: 10px 0;
display: inline-block;
font-family: sans-serif;
margin: 5px 0px;
border-top: 1px dotted rgba(0, 0, 0, 0.05);
border-bottom: 1px dotted rgba(0, 0, 0, 0.05);
}
.bsd_horizontal_sharebar .Share_buttons {
display: block;
}
.bsd_horizontal_sharebar .Share_buttons .wrap {
text-align: center;
margin: 0 auto;
display: inline-block;
min-width: 41px;
}
.bsd_horizontal_sharebar .Share_buttons .wrap1 {
display: inline-block;
width: 31px;
float: left;
}
.bsd_horizontal_sharebar .Share_buttons ul {
margin: 0;
padding: 0;
}
.bsd_horizontal_sharebar .Share_buttons ul li a, .bsd_horizontal_sharebar .Share_buttons ul li a:hover {
color: #FFF !important;
cursor: pointer;
line-height: 25px;
height: 100%;
display: block;
text-decoration: none;
}
.bsd_horizontal_sharebar .Share_buttons ul li {
list-style: none;
list-style-type: none;
padding: 0;
margin: 1px;
float: left;
width: 16%;
max-width: 115px;
display: inline-block;
font-size: 13px;
overflow: hidden;
text-align: left;
height: 25px;
line-height: 25px;
color: #fff;
border: 1px solid rgba(0,0,0,0.04);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.bsd_horizontal_sharebar .Share_buttons ul li .fa {
color: #fff;
font-size: 17px;
font-weight: normal;
font-family: FontAwesome;
display: inline-block;
text-align: center;
padding: 0;
height: 25px;
line-height: inherit;
width: 30px;
background-color: rgba(0,0,0,0.1);
border-right: 1px solid rgba(0,0,0,0.05);
}
/*--Facebook---*/
.bsd_horizontal_sharebar .Share_buttons .bs_fb {
background: #3a579a;
}
.bsd_horizontal_sharebar .Share_buttons .bs_fb:hover {
background: #314a83;
}
/*--Tweeter---*/
.bsd_horizontal_sharebar .Share_buttons .bs_twtr {
background: #00abf0;
}
.bsd_horizontal_sharebar .Share_buttons .bs_twtr:hover {
background: #0092cc;
}
/*--Google Plus---*/
.bsd_horizontal_sharebar .Share_buttons .bs_gplus {
background: #df4a32;
}
.bsd_horizontal_sharebar .Share_buttons .bs_gplus:hover {
background: #be3f2b;
}
/*--Pinterest---*/
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst {
background: #cd1c1f;
}
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst:hover {
background: #ae181a;
}
/*--linkedin---*/
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin {
background: #2554BF;
}
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin:hover {
background: #224EB4;
}
/*---Total Share----*/
.bsd_horizontal_sharebar .Share_buttons .share.h6 {
font-size: 10px;
font-weight: bold;
text-shadow: none!important;
text-decoration: none;
text-align: center;
color: #000000;
border-top: 3px solid #FFF600 !important;
border-bottom: 0;
padding: 0px !important;
padding-top: 5px!important;
margin: 0 !important;
line-height: 8px;
border-radius: 75% 0;
}
.bsd_horizontal_sharebar .Share_buttons .share {
border: none;
margin: 0px 5px 0px 1px;
overflow: visible !important;
width: 95px !important;
}
.bsd_horizontal_sharebar .Share_buttons .share .count.h4 {
font-size: 18px;
font-weight: bold;
text-shadow: none;
text-decoration: none;
font-family: sans-serif;
text-align: center;
color: #FF0000;
line-height: 15px;
margin-top: 0px;
margin: -4px 0px 2px 0;
min-height: 15px;
padding: 0px;
border: none;
}
.bsd_horizontal_sharebar .Share_buttons .bs_fb .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_twtr .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_gplus .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin .share-bs {
position: relative;
color: #C3C3C3;
display: inline-block;
text-align: center;
font-weight: bold;
font-size: 11px;
float: right;
min-width: 12px;
font-family: sans-serif;
padding: 0px 5px;
background-color: rgba(0,0,0,0.28);
border-radius: 0px 0px 0px 15px;
}
@media only screen and (max-width: 979px) {
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin {
width: 34px;
}
.bsd_horizontal_sharebar .Share_buttons .bs_fb .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_twtr .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_gplus .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst .share-bs
{
display: none !important;
}
}


@media only screen and (max-width:768px) {

 .bsd_horizontal_sharebar .Share_buttons ul li a, .bsd_horizontal_sharebar .Share_buttons ul li a:hover {
color: #FFF !important;
cursor: pointer;
line-height: 25px;

font-size: 11px;
height: 100%;
display: block;
text-decoration: none;
}
.bsd_horizontal_sharebar .Share_buttons .wrap {
min-width: 34px;
}
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin,
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst {
width: 30px;
}
.bsd_horizontal_sharebar .Share_buttons ul li {
margin: 1px 3px;
}
@media only screen and (max-width:479px) {
.bsd_horizontal_sharebar .Share_buttons .share {
border: none;
margin: 0px 5px 0px 1px;
overflow: visible!important;
width: 80px!important;
}
.bsd_horizontal_sharebar .Share_buttons ul li {
width: 25px !important;
margin: 2px;
border-radius: 50px;
border: 2px solid rgba(0, 0, 0, 0.14);
}
.bsd_horizontal_sharebar .Share_buttons .wrap {
display: none !important;
}
.bsd_horizontal_sharebar .Share_buttons ul li .fa {
width: 25px !important;
}
}
</style>
</b:if>

Langkah ke 3:
Di dalam template anda (opsi editHTML) cari kode: share buttons kodenya dalam template aka terlihat seperti:

<!--share buttons-->

di bawahnya ada kode berikut:

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

Kalau tidak ada pasti bentuknya seperti ini:

<div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>

Hapus kode dibawah share button tersebut dan ganti dengan kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
var shareUrl = $("link[rel=canonical]").attr("href");
$.getJSON('http://bloggersstand.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
shares = data.shares;
$(".count").each(function (index, el) {
service = $(el).parents(".share-bs").attr("data-service");
count = shares[service];
if (count > 1000) {
count = (count / 1000).toFixed(1);
if (count > 1000) count = (count / 1000).toFixed(1) + "M";
else count = count + "k";
}
$(el).html(count);
});
});
});
//]]></script>
<div class='bsd_horizontal_sharebar'>
<div class='Share_buttons'>
<ul>
<li class='share'>
<div class='share-bs' data-service='total'>
<div class='count h4'></div>
<div class='share h6'>SHARES</div>
</div>
</li>
<li class='bs_fb'><a expr:href='&quot; http://www.facebook.com/share.php?v=4&amp; src=bm&amp; u=&quot; + data:post.url + &quot; &amp; t=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class="fa fa-facebook"></i> </div>
<div class="wrap">Share</div>
<div class='share-bs' data-service='facebook'>
<div class='count'/></div>
</a>
</li>
<li class='bs_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @bloggersstand - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class='fa fa-twitter'></i></div>
<div class="wrap">Tweet</div>
<div class='share-bs' data-service='twitter'>
<div class='count'/></div>
</a>
</li>
<li class='bs_gplus'><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot; &quot; ,&quot; menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot; ); return false; ' rel='nofollow'>
<div class="wrap1"><i class='fa fa-google-plus'></i></div>
<div class="wrap">Share</div>
<div class='share-bs' data-service='google'>
<div class='count'/></div>
</a>
</li>
<li class='bs_pntrst'><a data-pin-config='beside' expr:href='&quot; http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot; &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class='fa fa-pinterest'></i></div>
<div class="wrap">Pin</div>
<div class='share-bs' data-service='pinterest'>
<div class='count'/></div>
</a>
</li>
<li class='bs_linkdin'><a expr:href='&quot; http://www.linkedin.com/shareArticle?mini=true&amp; url=&quot; + data:post.url + &quot; &amp; title=&quot; + data:post.title + &quot; &amp; summary=&amp; source=&quot; ' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class='fa fa-linkedin'></i></div>
<div class="wrap">Share</div>
<div class='share-bs' data-service='linkedin'>
<div class='count'/></div>
</a>
</li>
</ul>
</div>
</div>
</b:if>
</b:if>

Demo telah di cobakan ke blog edittema ini.
Tags

4 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Kang NataNovember 13, 2018

    Dulu saya nyari-nyari banget mas artikel yang membahas masalah tombol share ini, mungkin kalau saya butuh lagi, saya numpang kesini yach.

    BalasHapus
  2. sufyan YaanNovember 13, 2018

    Mantap Kang :)

    BalasHapus
  3. UmmuNovember 15, 2018

    Mantaaaap... Saya sempat liat tampilan pas blog ini pakai cara diatas. Tapi sekarang sudah berganti.
    Terimakasih pak... Sudah saya coba di blog saya, berhasil. Tapi di mobile versionnya tidak bekerja, mungkin krna tema blog saya masih sederhana bawaan blog ya?

    BalasHapus
    Balasan
    1. sufyan YaanNovember 15, 2018

      @UmmuSh Terima Kasih telah berkunjung.

      Saya melihat blog kamu stelannya sbb: opsi mobile=custom. Kamu pakai template bawaan blogger yang belum dibuat responsive. Tombol share ini bekerja apabila setting mobile mampu membuka tema desktop pada tampilan hape. Supaya hape dapat membuka tema secara mobile, maka diperlukan template yang responsive.

      Blog kamu sudah bagus dan berpotensi, tapi jika kamu tidak memakai tema yang lebih responsive saya kuatir blog tersebut tidak bisa maksimal.

      Hapus
Lebih baru Lebih lama

Formulir Kontak