Cara Buat Tombol Share dibawah Postingan+Smile




Cara  Buat Tombol Share dibawah Postingan+Smile
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.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect