Minggu, 09 Desember 2012

Panduan Cara Memasang Tombol Like, Twitter, Google + (Sosial Bookmark) di Artikel Blog

Cara Memasang Tombol Like, Twitter, Google + - Memasang tombol sosial bookmark di dalam artikel memiliki keuntungan tersendiri untuk kemajuan blog kita, salah stunya adalah meningkatkan page view untuk artikel tersebut. Bagaimana Cara Memasang Tombol Like, Twitter, Google + di artikel blog? Lihat gambar berikut ini
Cara Memasang Tombol Like, Twitter, Google +

Untuk memasang tombol like, twitter, google + seperti gambar diatas, silahkan ikuti panduanya berikut ini;
  1. Masuk ke akun blogger anda.
  2. Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard.
  3. Cari kode <data:post.body/> memalui form pencarian yang ada di kiri bawah.
  4. Salin kode berikut di bawah <data:post.body/>. Jika ada 2 kode <data:post.body/>, pilih yang kedua.

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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>
    </b:if>
    <div style='clear: both;'/>
  5. Jika sudah menyalin kode diatas, jangan di Simpan dulu tapi Pratinjau terlebih dahulu, apakah ada yang error atau tidak jika tidak ada yang error, silahkan Simpan.
  6. Klik Simpan
Hasil penerapan dari artikel Panduan Cara Memasang Tombol Like, Twitter, Google + yang saya pasang didalam artikel blog ini
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:left'> <a expr:href='data:post.url' rel='nofollow'/></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'>
--------
--------
--------
</b:if>

Oya, coba anda kembali keatas dan lihatlah gambar, selain menampilkan tombol like, twitter dan google +, juga ada tombol bintang rating review yang sangat cantik :) Apakah anda mau memasangnya juga? Silahkan berkomentar

Selamat menerapkan artikel ini, Panduan Cara Memasang Tombol Like, Twitter, Google +

Panduan Cara Memasang Tombol Like, Twitter, Google + (Sosial Bookmark) di Artikel Blog Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni

28 komentar:

  1. cara pasang riview bintang yg ada d gambar gmn y mbak yuni?

    BalasHapus
  2. tombol sosbok ini sama ga fungsinya ama tombol bawaan template blogger

    BalasHapus
  3. Trimakasih impoh nya...dah sy coba & berhasil neh ;)

    BalasHapus
  4. trimakasih mabk,
    langsung praktek dan sukses, cuma bintangnya belom terpasang.

    BalasHapus
  5. @openDesk silahkan buka di artikelnya disini atau yang lebih mudah disini

    BalasHapus
  6. @abimalka sama-sama ya, makasih juga,, semoga bermanfaat

    BalasHapus
  7. @My story in computer makasih juga ya atas kunjungan serta komentarnya, untuk memasang bintangnya silahkan bula link komentar saya untuk OpenDesk

    BalasHapus
  8. sip gan, makasih sudah di coba n brhasil

    BalasHapus
  9. @Akang Budi alhamdulillah, semoga bermanfaat kang Budi

    BalasHapus
  10. thanks sebelumnya
    http://omsambudy.blogspot.com

    BalasHapus
  11. @om sam budy komentar dua kali berarti sudah muncul kan mas Sam?

    BalasHapus
  12. Makasih tante,..
    dah aku praktekin,..hasilnya
    sippp,..
    almajdzubnews.blogspot.com

    BalasHapus
  13. @openDesk Terimakasih tutorialnya mbak.. masing bingung aja pengen masang rating bintang

    BalasHapus
  14. @Ngrambe silahkan gunakan layanan dari graddit aja, lebih mudah kok..

    BalasHapus
  15. saya kok gak muncul.. tolong ya??

    BalasHapus
  16. codenya ada yg ga bisa dicari yg buat kolom komen

    BalasHapus
  17. jika di tempatkan di dalam tabel agar terlihat rapi dan lebih menarik kode ya seperti apa ya mas ???
    bagi infonya ya mas,,, salam kenl, makasih

    BalasHapus
  18. kenapa harus ditempatkan didalam tabel mas Deef? bukankah tampilan diatas sudah sejajar dan menarik?

    BalasHapus
  19. ga berhasil mbak yun, muncul sih, tapi ga bisa di share. munculnya bukan artikel, malah akun.google.com bla bla bla.
    kalo artikel di situs ini, berhasil saya share. yang dipake situs ini apa sama caranya dengan tutorial di atas?
    mohon pencerahannya

    BalasHapus
    Balasan
    1. maaf sebelumnya mas Drughi, memang artikel ini sudah tidak berfungsi lagi karena ada perubahan kode dari facebook dan twitter
      untuk share yang diartikel ini tidak sama mas, itu punyanya mas Sugeng, mungkin suatu saat akan saya share caranya tapi tidak untuk saat ini karena masih ada kesibukan lain, maaf sebelumnya :)

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia