Cara Untuk Membuat Button Share di Blog

Cara Untuk Membuat Button Share di Blog share button

- Hay guys, ini info yang cukup menarik bagi kalian nih apalagi yang lagi menjalani tugas kuliah ataupun tentang modifikasi blog, disini akan dijelaskna cara untuk pemasangan tombol share baik dari facebook, tweeter dan google +, nah sekarang apa saja si alatnya ataupun bahan yang dibutuhkan. alatnya yang pertama adalah laptop/PC kemudian internet. setelah itu ada semua kita masuk bloger.com.
jika anda sudah mempunyai akun blog maka langsung login dan jika belum tinggal daftar saja gratis kok. nah berikut cara lenkapnya :

1.Jika sudah masuk ke blog anda pilih ke opsi lainnya dan pilih template lalu edit HTML
2.Cari kode ]]></b:skin> kemudian tempelkan kode dibawah ini tepat diatas kode yang dicari tersebut :

/* social share buttons */
.social-buttons-box {
height: 67px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM7YCZ0LRcPH7xiNkZvxcY4c35_DcKCvvytzq1IYshsR5Q5kgVONvMvUijtVLskMRku643FjvrDPhALu9_eYTvLeVf8qEpHPAidCFXYOCi3OL0w1HhYINKuxROeRj9aoXxdkT8xB7IaAQQ/s1600/rect3799.png) no-repeat 200px 0px;
margin:20px 0 15px;
overflow:hidden;
}
.social-buttons {
margin:0 0;
height:67px;
float:left;
}
.social-buttons .share {
float:left;
margin-right:10px;
display:inline-block;
}
.share-btn {
margin:15px 0 25px;
height:20px;
overflow:hidden;
}

3. Selanjutnya copy kode berikut ini, lalu taruh di bawah kode <data:post.body/> atau bisa juga <div class='post-footer'>

<div class='social-buttons-box'>

<div class='social-buttons'>

<div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>

<div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>

<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>

</div>

</div>

<!-- <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>-->

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

4. Kemudian kita pasang kode js pemanggil sosmed tadi , caranya cari kode </body> dan paasang kode dibawah ini diats kode tersebut :

<script>

  window.___gcfg = {lang: &#39;id&#39;};

  (function() {

    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;

    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;

    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);

  })();

</script>

<script>

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);

</script><div id='fb-root'/>

<script type='text/javascript'>

5. Simpan template tersebut dan kemudian lihat blog dan lihat hasilnya. 

Sekian tutorial sederhana dari saya semoga bermanfaat yagh ,,,,, untuk info lainnya klik saja di sini

Tweet