Cara Membuat Tombol Share Social Media Responsive Di Blog

Blogger Tutorial Blog

Tombol share ke sosial media adalah sebuah fiture yang bisa dikatakan penting karena bisa untuk memperluas penyebaran artikel blog sobat, contohnya seperti tombol vote google plus, katanya, tombol vote tersebut dapat memperbaiki peringkat blog kita di serp.

Widget share social media ini terdiri atas 5 tombol, yaitu tombol share facebook, twitter, google plus, linkedin, dan pint it, berikut cara pembuatannya :

Pertama-tama silahkan masuk ke Dasboard www.blogger.com lalu ke Template > Edit HTML

Langkah kedua adalah meletakkan CSS untuk widget social sharingnya, letakkan di atas ]]></b:skin> atau </style>

.sharing-post{margin:20px auto;overflow: hidden;}
.entry-social{overflow: hidden;}
.entry-social a{display: block;padding:0px;color: #FFFFFF !important;font-weight: 300;font-size:12px;}
.entry-social div{float: left;margin-right: 5px;width:95px;background-color: #ccc;margin-top:5px;transition:all .4s ease-in-out;}
.entry-social .title-sharing-post{background:none;padding: 4px 5px 4px 0;width:130px;font-size:20px;font-family: 'Trebuchet MS', sans-serif;font-weight:400;text-transform:uppercase;display:none}
.entry-social .fb{padding: 7px 5px 7px 7px;width:130px;}
.entry-social .fb:hover{background-color: #324b81;}
.entry-social .twitter,.entry-social .gplus{padding: 7px 5px 2px 7px;}
.entry-social .twitter:hover{background-color: #01A7dE;}
.entry-social .gplus:hover{background-color: #BA3227;}
.entry-social .linkedin{padding: 7px 5px 0 7px;height:27px;}
.entry-social .linkedin:hover{background-color: #136F9B;}
.entry-social div.pinterest{width:107px;}
.entry-social .pinterest a{padding: 7px 7px 2px 7px}
.entry-social .pinterest a:hover{background-color: #B01C23;}

jika ingin menampilkan tulisan Sharing This, silahkan hapus kode display:none pada kode CSS .entry-social .title-sharing-post{....}

Lalu letakkan kode HTMLnya di bagian bawah artikel, biasanya di bawah <div class='post-footer-line post-footer-line-1'>

<div class='sharing-post'>
<div class='entry-social'>
<div class='title-sharing-post'>Share This:</div>
<div class='fb'>
    <span class='fb-like' data-layout='button_count' data-send='true' data-show-faces='false' data-width='90' expr:data-href='data:post.url'></span>
  </div>
<div class='twitter'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
  </div>
<div class='gplus'>
<span class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'>
</span>
  </div>
<div class='linkedin'>
    <script expr:data-url='data:post.url' type='IN/Share'></script>
  </div>
<div class='pinterest'>
<a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=pinterest&quot;' rel='nofollow' target='_blank' title='Pin It'><img alt='pinit' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFfwijwlCejZwnPTQFjtp2YBLxPs3HXlQQEWegwHn2yvJUWe9gf0myyQbBo2q6VqfeUl4SK3xmRrjVZvGT-yJ-n6ejzVDy-Xa-IQpHjIFwcuWJMH57KP-yOo2ZlnbwzU8d2JCXjo_OzE00/s1600/PinExt.png' title='Pin It' width='43'/></a>
</div>
</div>
    </div>
<div style='clear:both;'></div>

Langkah selanjutnya adalah meletakkan javascript untuk tombol sharenya, lewati langkah ini jika di template sobat sudah ada javascript tombol share facebook, twitter, google plus, dan linkedin, letakkan kode javascript di bawah ini tepat diatas kode </body>

Javascript facebook

<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async=true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Javascript twitter, google plus, dan linkedin

<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script async='async' src='//platform.linkedin.com/in.js' type='text/javascript'/>
<script type='text/javascript'>
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Langkah terakhir adalah mengklik Simpan Template, Semoga Bermanfaat.

Bagikan

Jangan lewatkan

Cara Membuat Tombol Share Social Media Responsive Di Blog

4/ 5

Oleh Jaka Taruna

Jaka Taruna Komentar