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 .

Tombol Like , share facebook,twitter dan google plus

Untuk Demonya Silahkan Lihat diakhir tulisan klik --> DEMO

cara membuat tombol share dibawah postingan blog

Adapun Panduan Menambahkan tombol share facebook ini yaitu :

Login Ke Dasbor Anda
Klik Template -> Edit Html
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; }
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'/>
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='"http://www.facebook.com/sharer.php?u=" + 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: 'id'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[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>
<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!.