Cara Buat Tombol Share dibawah Postingan+Smile Cara Buat Tombol Share dibawah Postingan+Smile - mizipediacom mizipediacom: Cara Buat Tombol Share dibawah Postingan+Smile










KATEGORI

LIVE TV

Iklan Semua Halaman

Cara Buat Tombol Share dibawah Postingan+Smile

Jumat, 03 Maret 2017



Cara  Buat Tombol Share dibawah Postingan+Smile 

Hallo mas bro berjumpa lagi dengan pada malam ini, Nah pada kesempatan malam ini saya ingin share mengenai cara membuat tombol share di bawah posingan blog yang keren bro. tombol sahare media sosial ini  unik sekali  yaitu ada terdapat di bagian sebelah kanan gambar emoticon / simle yang disertai slogan bebagi gratis .

Widget ini saya ambilkan dari templatenya mas sugeng yang baru saja dibagikan kemaren , untuk dalam penerapan kode di bawah ini saya rasa sangat mudah sekali masbro, yuk saya tidak menjelaskan panjang lebar dan langsung saja ikuti cara penerapan kode nya.
  • Pertama , anda login ke blogspot
  • kemudian anda pilih template dan klik Edit Html
  • Anda salin dan tempelkan kode dibawah ini diatas kode ]]></b:skin>
  • /* social share buttons */
    .social-buttons-box {
    background: url(http://1.bp.blogspot.com/-OYT-JDviP2k/VHrWc3ofkiI/AAAAAAAAEJs/yyNAhuCUELA/s1600/rect3799.png) no-repeat 200px 0px;
    height: 67px; margin:20px 0 15px;
    .social-buttons {
    overflow:hidden; } margin:0 0; height:67px;
    margin-right:10px;
    float:left; } .social-buttons .share { float:left;
    margin:15px 0 25px;
    display:inline-block; } .share-btn { height:20px; overflow:hidden;
    }
  • Kemudia anda copy kan kode berikut ini, dan taruh saja di bawah kode <data:post.body/>bisa juga di bawahnya <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;'/>
  • Selanjutnya anda pasang kode js pemanggil sosmed yang tadi , nah caranya coba anda cari kan kode </body> dan langsung di pasang kode dibawah ini diatas 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;;
    !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;);
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s); })(); </script> <script> </script><div id='fb-root'/>
    js = d.createElement(s); js.id = id;
    <script type='text/javascript'> //<![CDATA[ (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return;
    </script>
    js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
    //]]>
  • Dan yang terkahir anda Klik Save dan lihat hasilnya
  • Nah kini sobat sudah bisa membuat sendiri share button ala mas sugeng yang keren.

Ini lah cara membuat dan memasang tombol share button dibawah postingan blogspot seperti templatenya mas sugeng , dengan penjelasan malam ini semoga tutorial yang saya berikan semoga bisa membantu dan bisa  bermanfaat untuk anda..
Jangan lupa ikuti trus penjelasan selanjutnya yang berbeda pula..jika ada yang ingin di tanya kan silahkan berkomentar..thanks.
Lihat Juga