Pengikut

Salam blogger, pada posting yang terdahulu saya pernah membahas artikel yang sama seperti ini, namun di artikel yang dulu tombol share berada pada posisi vertikal ke atas, nah kali ini saya akan membahas bagaimana caranya membuat Tombol Horizontal dari Social Networking. Tombol social networking ini berfungsikan membuat trik yang lebih menarik lagi yaitu membuat tombol twitter, facebook, dan google+ pada posting untuk mengijinkan para pengunjung membagikan artikel tersebut.

Inilah gambaran share button yang akan kita buat

Jika sobat tertarik untuk membuatnya, ikuti tutorial dibawah ini:
1. Log in ke account blogger sobat
2. klik menu Template
3. kemudian pilih Edit Html
4. pilih lanjutkan untuk masuk ke Setup Html
5. setelah masuk jangan lupa centang kotak kecil di pojok kiri yang 
    bertuliskan "expand template widget"
6. lalu sobat cari kode <data:post.body/>, agar pencarian lebih mudah sobat 
    tekan tombol ctrl+f pada keyboard komputer sobat
7. Copy kode di bawah ini lalu letakan dibawah kode <data:post.body/>
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));


</script>
<!-- Google +1 -->
<script type='text/javascript'>
(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>


<!-- Twitter -->
<script>!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;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='horizontal-social-buttons' style='padding:5px 0 5px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->


<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
</div>
</b:if>


<div style='clear: both;'/>
Catatan: Jika sobat ingin tombol ini muncul diatas posting blog, maka kode 
             tersebut diletakan diatas kode <data:post.body/>
6. Simpan Template


Selamat mencoba dan semoga bermanfaat

Posting Komentar

  1. kunjungin jge my blog at http://aanborneo.blogspot.com/
    jgn lupa like n follow tr Q follow and like back.....

    BalasHapus
    Balasan
    1. udah ane kunjungi balik and follow gan blog nya, like blog saya juga okeeh

      Hapus
  2. Kenapa tidak berhasil saya set ke blog saya yah .. ?? --"

    BalasHapus
    Balasan
    1. dicoba sekali lagi siapa tau berhasil, mungkin salah saat peng copyan code nya, atau gak klop sama templatenya..!

      Hapus
  3. ya nih gagal.... ga muncul ....
    tapi gapapa deh ... thanks atas postingannya ya ^^
    Visit ya bang : tip-atip.blogspot.com
    Tolong like fanspagenya ya ^^ soalnya aku juga udah like fanspage nya blog abang ganteng :)
    Ingat : From zero to hero ^^

    BalasHapus
    Balasan
    1. mungkin JS nya udah didelete gan, nanti saya upgrade lagi deh, woles aja gan.

      Hapus
  4. Balasan
    1. iya sob, makasih kembali buat komentarnya gan
      salam blogger !!

      Hapus
  5. kode nya ada 3 om mana yang benar?
    gan kunjungi jg blog ane di http://4videoshared.blogspot.com

    BalasHapus
  6. sip , walaupun belum saya coba > http://ahmad-manarul.blogspot.com/

    BalasHapus
    Balasan
    1. hha sipp juga gan, ehh tapi kenapa gak disoba gan??

      Hapus
  7. info yang sangat bagus mas,,,info yang sngat bermanfaat sekali buat saya,,terima kasih banyak ya...semoga selalu menciptakan karya-karya terbaiknya,, dan selamat berkarya...mantap!!

    BalasHapus
    Balasan
    1. Iya siapp,, maju terus blogger indonesia

      Hapus

Silahkan berkomentar, komentar sobat adalah inspirasi saya !!