Cara Membuat Tombol Share dibawah Postingan Blog Plus Smile

Gambar diatas merupakan , tombol share yang akan kita buat nantinya 

Tutorial Membuat Share Button Keren di Bawah Postingan Blogspot

Widget ini saya ambilkan dari templatenya mas sugeng yang baru saja dibagikan kemaren , sebetulnya jika sobat sudah agak ngerti koding tanpa tutorialpun bisa , tapi karena masih belajar seperti saya , 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 kode dibawah ini diatas kode ]]></b:skin>

   /* social share buttons */
   .social-buttons-box {
   height: 67px;
   background: url(http://1.bp.blogspot.com/-OYT-JDviP2k/VHrWc3ofkiI/AAAAAAAAEJs/yyNAhuCUELA/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 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;'/>

5. 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'>
   //<![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 hasilnya
7. Taraa kini sobat sudah bisa mebuat sendiri share button ala mas sugeng yang keren bangets

Itulah bro Cara ribet membuat dan memasang share button dibawah postingan blogspot seperti templatenya mas sugeng , semoga tutorial tersebut bermanfaat bagi sobat , oh iya jika sobat masih bingung dan mengalami kendala diatas , silahkan berkomentar dibawah ini siapa tahu saya bisa membantu mengatasi masalah widget tombol share diatas , namun jika sobat mengikuti cara diatas insya Allah gak ada napa2

Tweet