Cara Membuat Tombol Google+, Twitter, dan Share Facebook

Unknown   2:18 PM   Blog, Tutorial   Comment  

Setelah beberapa jam yang lalu saya sudah membagi tutorial tentang Cara Membuat Threaded Comment Blogger. Sekarang saya ingin men-share lagi tutorial yang saya fikir sangat penting bagi blog teman-teman. Karena dengan ini, teman-teman atau orang yang sering berkunjung ke blog teman-teman dapat menyebarkan artikel tersebut. Cara Membuat Tombol Google+, Twitter, dan Share Facebook, merupakan judul post saya kali ini. Jika teman-teman ingin melihat bagimana tampilannya, langsung saja lihat di bawah ini.

Screenshots :

Sudah tau kan? Apakah teman-teman tertarik memasangnya? Cara memasangnya sangatlah mudah, teman-teman hanya harus mengikuti cara yang sudah saya berikan di bawah ini.

1. Login ke Blogger dan masukkan ID teman-teman.

2. Masuk ke halaman Template.

3. Agar aman, download dulu templatenya kemudian Edit HTML.

4. Cari kode <data:post.body/>. Jika teman-teman menemukan 2 atau lebih kode tersebut, maka pilihlah kode kedua.

5. Copy kode di bawah ini dan paste-kan di bawah kode pada nomer 4.

<b:if cond='data:blog.pageType == "item"'>
<style>
.social-network{width:100%;height:auto;margin:10px 0;clear:both}
.social-network li{display:inline-block;height:20px;list-style:none outside none;padding:10px;transition:all 0.8s linear 0s;vertical-align:middle;box-shadow:0 1px 4px 1px rgba(0,0,0,.5)}
.social-network li:first-child{background:#c4302b}
.social-network li + li{background:#00a0d1}
.social-network li:last-child{width:50%;background:#3b5998}
.social-network li:hover{background:rgba(255,255,255,.7)}
</style>
<div class='social-network'>
<li class='gplus'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone expr:href='data:post.url' size=''/>
</li>
<li class='twitter'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en'data-related='data:post.title'data-text='data:blog.metaDescription'data-url='data:post.canonicalUrl'data-via='data:blog.title' href='https://twitter.com/share' rel='nofollow'>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</li>
<li class='fb'>
<script> (function(d){ var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;} js = d.createElement(&#39;script&#39;); js.id = id; js.async = true; js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;; d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js); }(document));
</script>
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='standard' send='false' show_faces='false'/>
</li>
</div>
<div style="font-size:5px">
<a href='http://blognya-efry.blogspot.com' target='_blank' title='Free Download Game, Cheat, Trainer, Update, Software, Hack, Tutorial and News'>.</a></div>
</b:if>

Note: Jika teman-teman ingin memasangnya di atas post, paste-kan kode tadi dan letakkan di atas kode pada nomer 4.

6. Klik Pratinjau untuk memastikan tidak ada yang error pada template.

7. Simpan template. Selamat mencoba !