Oodlebit

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
templeate Edit HTML
Setelah anda klik tulisan templeate maka hasilnya seperti gambar dibawah ini dan langsung saja klik Edit HTML

templeate 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 sosmed
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> <!-- <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;'/>

Cara pemasangan scrip kedua  bisa anda lihat pada gambar dibawah ini perhatikan pada halaman 3594 
scrip kedua sosial media
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: &#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'>
//<![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

scrip ketiga sosial media
scrip ketiga sosial media


Setelah selesai pemasangan ketiga scrip tersebut dan sesuai dengan tutor diatas langkah selanjutnya silahkan klik simpan templeate, atau kalau anda ragu bisa klik pratinjau templeate 
nah setelah anda klik simpan templeate silahkan lihat hasilnya 
itulah sekelumit tutorial cara membuat share buton sendiri pada blog anda semoga tutor ini bermanfaat 
Jika anda merasa tutorial ini ada manfaatnya silahkan berbagi kepada teman anda siapa tahu mereka membutuhkan , berbagi itu indah, indahnya berbagi akan menambah berkah



0 Response to "Cara membuat share button lengkap dengan gambarnya"

Post a Comment

Silahkan berkomentar yang relevan dan jangan melakukan SPAM atau meninggalkan link hidup demi kebaikan dan terjamin keindahan dalam persahabatan.