Cara membuat share button lengkap dengan gambarnya

Cara membuat share buton/widget sosial media pada blog, hal ini sangatlah mudah bagi para master namun sangatlah sulit bagi para pemula seperti saya , kenapa sulit karena cara ini sangatlah njlimet terutama untuk mencari kode kode scripnya juga ditambah cara memasangnya , namun disini saya sebagai seorang pemula ingin berbagi tutorial ini yaitu : Cara membuat share buton/widget sosial media pada blog, saya lengkapi dengan gambarnya maksud dan tujuanya adalah untuk membuat para pemula agar mudah memahaminya .
untuk selanjutnya yuk, kita simak bersama Cara membuat share button lengkap dengan gambarnya
Seperti biasa pertama tama masuk dahulu ke blog anda setelah masuk perhatikan gambar dibawah ini silahkan pilih tulisan templeate dan langsung saja klik

templeate Edit HTML

Setelah anda klik tulisan templeate maka hasilnya seperti gambar dibawah ini dan langsung saja klik Edit HTML

templeate Edit HTML

Setelah klik Edit HTML maka anda akan dibawa pada tampilan HTML pada tampilan ini silahkan cari tulisan /kode ]]></b:skin> setelah ketemu silahkan copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin>

BACA JUGA : Cara activa eset NOD 32 Antivirus Smart security 9 GRATIS

Scrip pertama

/* social share buttons */ .social-buttons-box {height: 67px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7cNpFBeSuZdLmA81Nsxl5vZTLugUxjo3vQ9aluQlOY2tWMNzwBqnDzv2EoaOjQww7MyQLt2olUjERpip_gq5dr8-Is16JK22URSCGUANd079lBi3AnVYCBBVvR5mFNtxeUhH8asUCDYQ/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;}

Cara pemasangan scrip pertama bisa anda lihat seperti contoh pada gambar di bawah ini, Terutama pada halaman 1370 , kenapa saya sertakan gambarnya , karena untuk mencari kode kode semacam ini bagi pemula seperti saya sangatlah sulit dan bisa jadi membutuhkan waktu berjam jam

scrip pertama sosial media

Setelah selesai pemasangan srip pertama selanjutnya adalah pemasangan scrip kedua
langsung saja copy scrip dibawah ini kemudian pastekan dibawah kode <data:post.body/>
kalau kode <data:post.body/> bisa juga pada kode <div class='post-footer'>

BACA JUGA : Bagaimana cara masang facebook coment di blog

Scrip kedua

<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>  <div style='clear: both;'/>

Cara pemasangan scrip kedua bisa anda lihat pada gambar dibawah ini perhatikan pada halaman 3594

scrip kedua sosial media

selanjutnya cara pemasangan scrip ketiga pada edit HTML

ini merupakan kode java scrip pemanggil , langkahnya seperti langkah 1 dan 2 kita cari lagi kode </body>

selanjutnya langsung kita copy scrip dibawah ini dan pastekan tepat diatas kode </body>

Screip ketiga

<script>

window.___gcfg = {lang: 'id'};

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

<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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

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

<script type='text/javascript'>

//<![CDATA[

(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk')); //]]></script>

Selanjutnya cara pemasangan scrip ketiga pada edit HTML

bisa anda lihat pada gambar dibawah ini