Membuat Tombol Share Media Responisve

Pada bagian ini yaitu cara buat tombol share bersifat responsive bisa juga digunakan pada template yang tidak responsive.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:

1.Silahkan masuk ke Dasboard www.blogger.com lalu ke Template > Edit HTML

2.Meletakkan CSS untuk widget social sharingnya, letakkan di atas]]></b:skin>

.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;}

3.Copy kode dibawah ini,dan paste kodenya dibawah<div class='post-footer-line post-footer-line-1'> atau dibawah <data:post.body/>

<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/AVvXsEiSOLfxpHnYQOFWnF-kRrH1NVKeR1ouXJpvbmcSI4aVlBZE3lUFYpTNxP_TM8Qe0TTzYrjn6RcW5wGNxrcnNGNVNfO9Fnrwzc3nLOCKcLcVfbup1uLUeX2creBftG6AGKQHQ3j_lmP5zpXS/s1600/PinExt.png' title='Pin It' width='43'/></a>

</div>

</div>

    </div>

<div style='clear:both;'></div>

4.Copy kodenya,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>

<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>

Sekian dan berterimakasih atas kunjungan anda di S4khra, mohon bantuan untuk perkembangan situs ini.