Cara Menciptakan Tombol Share Dibawah Postingan Blog Plus Smile

Cara Terbaru Membuat Tombol Share dibawah Postingan Blog Plus Smile Ala Mas sugeng yang keren bangets - Sebetulnya tutorial ini untuk menjawab pertanyaan sobat aku yang bertanya pada aku "mas gimana sih cara bikin tombol sosmed yang terdiri dari google plus , facebook dan , twitter menyerupai punyanya mas yadi itu ?" sekalian jawab plus share juga ke sobat - sobat yang barang kali sedang membutuhkan.

Ada yang unik dari tombol sosial media ini yaitu di bab sebelah kanan terdapat gambar emoticon / simle yang disertai slogan bebagi gratis , hal itu tentu saja menarik perhatian pengunjung untuk mengklik dan membagikanya . dan tentu saja efek postifnya yaitu jikalau yang di klik itu google plus , maka nilai seo artikel kita akan memiliki kelebihan di mata google.

Widget share button keren dibawah postingan ini merupakan sebuah pandangan gres kreatif dari mas sugeng , yang mana widget ini telah di pamerkan di template yang mas sugeng 2015 blogger template tersebut , selain itu juga ada widget yang hampir menyerupai dengan ini yaitu pada versi evo magz , silahkan baca tutorial menciptakan widget sosmed Ala Evo Magz

Gambar diatas merupakan , tombol share yang akan kita buat nantinya

Tutorial Membuat Share Button Keren di Bawah Postingan Blogspot

Widget ini aku ambilkan dari templatenya mas sugeng yang gres saja dibagikan kemaren , bekerjsama jikalau sobat sudah agak ngerti koding tanpa tutorialpun sanggup , tapi alasannya yaitu masih mencar ilmu menyerupai aku , mending ayo mari kita buat widget sosmed Ala Mas Sugeng

1. Pertama , bagi yang belom login ke dasbhor blog silahkan masuk dulu
2. Seperti biasanya , pilih template => Edit Html
3. Salin dan tempelkan instruksi dibawah ini diatas kode ]]></b:skin>

   /* social share buttons */ .social-buttons-box { height: 67px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigC_msXkobEvVqpdx6IU1zUA_QdskISOUK4ZSvdq-8v9AhyphenhyphenEKunscAPaPInh37iL5eHm-mwXVuTQj16MODR-_u19Z_EE4bQmGJ7xGr0oUlnWukQvDaXgEWjNS6rvMFEA80aqvPcQsrKxES/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; }

4. Selanjutnya copy instruksi berikut ini, kemudian taruh di bawah instruksi <data:post.body/> atau sanggup 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;'/>

5. Kemudian kita pasang instruksi js pemanggil sosmed tadi , caranya cari instruksi </body> dan paasang instruksi dibawah ini diats instruksi 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'> //<![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>

6. Terkahir Klik Save dan lihat kesudahannya
7. Taraa sekarang sobat sudah sanggup mebuat sendiri share button ala mas sugeng yang keren bangets

Itulah bro Cara ribet menciptakan dan memasang share button dibawah postingan blogspot menyerupai templatenya mas sugeng , supaya tutorial tersebut bermanfaat bagi sobat , oh iya jikalau sobat masih resah dan mengalami hambatan diatas , silahkan berkomentar dibawah ini siapa tahu aku sanggup membantu mengatasi duduk kasus widget tombol share diatas , namun jikalau sobat mengikuti cara diatas insya Allah gak ada napa2

Bagikan Artikel ini