Cara Menambahkan Tombol Like , share facebook,twitter dan google plus di Blog

Menambahkan Tombol Like , share facebook, twitter dan google plus di Blog Blogspot

Banyak Orang yang ingin menyampaikan gagasannya kepublik secara meluas, maka mulailah ia menulis dimedia sosial, berceramah keliling atau bahkan membuat selebaran selebaran propaganda.

Ditulisan ini admin Ode Media hanya ingin menuliskan bagaimana caranya agar gagasan bisa tersalurkan hanya melalui menulis dimedia online, bukan berceramah keliling atau selebaran propaganda. Hanya saja, yang menjadi kesulitan lagi adalah bagaimana caranya agar tulisan dimedia sosial bisa tersebar?

Jika demikian Persoalannya, admin Ode Media akan memberikan solusi, silahkan anda manfaatkan tools yang sudah disediakan google, facebook, dan twitter yaitu tools like, share dan tweet yang  bisa dipasang di web atau blog anda. Tombol like dan share ini menjadi alat umpan balik antara pembaca, penulis dan calon pembaca lainnya.

Memasang Tombol Like , Share facebook, tweeter dan google plus di blogspot

Terus Bagaimana cara membuat Tombol Like , Share facebook, tweeter dan google plus di blog yang seperti admin maksud?

Tenang saja!, ini admin kasi tampilan gambarnya .

 

Untuk Demonya Silahkan Lihat diakhir tulisan klik --> DEMO

cara membuat tombol share dibawah postingan blog

Adapun Panduan Menambahkan tombol share facebook ini yaitu :

1. Login Ke Dasbor Anda
2. Klik Template -> Edit Html
3. Tambahkan Kode CSS berikut diatas ]]></b:skin> atau dibawah </style>
   

   #button-count-share { width:100%; overflow:hidden; background:transparent; margin:0 auto; padding:3px; }
   #button-count-share span { float:left; position:relative; font-size:13px; color:#fff; margin:12px 5px 12px 5px; }
   .button-share { background:#dce0e0; position:relative; display:block; float:left; height:40px; overflow:hidden; width:140px; margin:4px; border-radius:3px; }
   .ikons { display:block; float:left; position:relative; z-index:3; height:100%; vertical-align:top; width:38px; text-align:center; }
   .ikons i { color:#fff; line-height:33px; }
   .slide-share { z-index:2; display:block; height:100%; left:38px; position:absolute; width:108px; margin:0; }
   .slide-share p { font-family:Verdana; font-weight:400; border-left:1px solid rgba(255,255,255,0.35); color:#fff; font-size:14px; left:0; position:absolute; text-align:center; top:10px; width:100%; margin:0; }
   .button-share .slide-share { transition:all 0.4s ease-in-out; }
   .facebook .fb_iframe_widget { display:block; position:absolute; right:5px; top:0; z-index:1; }
   .twitter iframe { left:50px; top:10px; z-index:1; display:block; position:absolute; }
   .google #___plusone_0 { width:90px !important; top:10px; right:5px; position:absolute; display:block; z-index:1; }
   .facebook .ikons,.facebook .slide-share { background:#4f79bc; }
   .twitter .ikons,.twitter .slide-share { background:#63cef2; }
   .google .ikons,.google .slide-share { background:#f36261; }
   .facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share { left:180px; opacity:0.6; }

4. Selanjutnya Cari Kode </head> dan letakkan kode dibawah ini tepat diatas kode </head>

   <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
   <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
   <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

5. Terakhir, Cari Kode <data:post.body/> dan letakkan Kode dibawah ini tepat dibawah <data:post.body/> . hanya saja, kode <data:post.body/> biasanya lebih dari satu, untuk itu silahkan anda cari posisi kode yang tepat.
   

   
   

   <div class='clear'/>
   <div id='button-count-share'>
   <div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
   <div class='slide-share'>
   <p>Share</p>
   </div>
   <a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
   </div>
   <div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
   <div class='slide-share'>
   <p>Like</p>
   </div>
   <div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
   </div>
   <div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i>
   <div class='slide-share'>
   <p>G+</p>
   </div>
   <div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
   <script type='text/javascript'>
     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>
   </div>
   <div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i>
   <div class='slide-share'>
   <p>Tweet</p>
   </div>
   <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
   <script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
   </div>
   </div>

Baca Juga

• cara membuat favicon blog keren
• memasang widget artikel / Most populer cantik di Blogspot
• Pengertian, Sejarah Perkembangan, Pembagian dan Manfaat Komputer (Makalah Pengantar Ilmu Komputer)
• Contoh Makalah Materi INTERAKSI MANUSIA DAN KOMPUTER {Lengkap}
• Pengertian dan Contoh Sistem Informasi Manajemen (Bahan Makalah)
• Cara Install Compiz Extra di Linux Ubuntu Terbaru
• Cara Menambahkan Tombol Like , share facebook,twitter dan google plus di Blog
• Cara Membuat Email Gmail dan Yahoo

<div class='clear'/>

Simpan Template dan Lihat hasilnya.

Demikian Panduan  Menambahkan Tombol Like , share facebook,twitter dan google plus di Blog semoga berhasil dan bermanfaat!.