Cara buat Tombol Berbagi dibawah Postingan Blog + Smile Cara buat Tombol Berbagi dibawah Postingan Blog + Smile - mizipediacom mizipediacom: Cara buat Tombol Berbagi dibawah Postingan Blog + Smile










KATEGORI

LIVE TV

Iklan Semua Halaman

Cara buat Tombol Berbagi dibawah Postingan Blog + Smile

Senin, 20 Maret 2017



Cara buat Tombol Berbagi dibawah Postingan Blog + Smile


Kembali lagi saya akan berbagi sedikit tentang cara buat tombol share di bawah postingan blog+ simile, tombol share ini keren dan terdapat gambar emoticon / simile di sebelah kanan yang disertai slogan bebagi gratis, yang membuat pengunjung tertarik untuk klik membagikan  Postingan kita, dampak postifnya yaitu jika yang di klik itu adalah google plus , maka nilai seo postingan blog kita akan mempunyai kelebihan di mata google.
Gambar diatas merupakan , tombol share yang akan kita buat nantinya 

Membuat Share Button Keren di Bawah Postingan 
Tombol widget yang di atas saya ambil dari mas sugeng, pasti anda sudah tau siapa mas sugeng itu.
Nah kalau masalh membuat tombol widget ini sangat lah mudah jika anda sudah mengerti coding, apabila anda masih newbie seperti saya ada baiknya sama-sama kita belajar dulu untuk meningkatkan ilmu anda mengenai dunia blogger, untuk lebih jelasnya anda bisa mengikuti cara-cara di bawah ini ya, pahami baik-baik cara meletakan code di bawah ini..yuk langsung saja di peraktekan.

LANGKAH-LANGKAHNYA:
  1. Silahkan anda login terlebih dahulu ke dasbhor blog anda
  2. Jika sudah maka anda pilih template => Edit Html
  3. Kemudian anda Copy dan Pastekan kode dibawah ini diatas kode ]]></b:skin> (untuk cara mudah pencarian tekan CTRL + F)
    /* 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. lalu di copy kan kode di bawh ini, dan di Pastekan 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. Dan jangan lupa anda pasang kan kode js pemanggil sosmed tadi , caranya anda cari kode </body> dan pastekan kode dibawah ini diats kode </body>
    <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. Sampai disini sudah selesai, jangan lupa anda Klik Save dan lihat hasilnya.
Bagimana mudah bukan cara membuatnya, sekarang tombol sahare kerennya sudah jadi di blog anda, apa bila anda mengalami kendala bole memberi komentar di blog jelek saya ini, jika ada yang kurang jelas mohon beri masukannya, demi kemajuan blog ini.
 Sekian penjelasan saya tentang cara membuat tombol share di bawah postingan blog, semoga bisa bermanfaat untuk anda. selamat mencoba dan berhasil..terimakasih.

Lihat Juga