Share Counters + Share Buttons Widget – Vertical (zSCbutton)

 

Berikut ini adalah tombol share (Facebook Like, Twitter Tweet, Google Plus One, dan Lintas Berita) berupa bentuk VERTICAL (bentuk tegak dengan tombol share kotak-kotak).

Untuk daftar lengkapnya, silahkan buka halaman utama tombol zSCbutton Share Counters + Share Buttons Widget, yang meliputi bentuk / tipe Horisontal Wide, Horizontal Tall, dan Vertical.

*

Kode HTML / Script

Silahkan pasang kode HTML ini di halaman web:

<!-- zSCbutton Vertical BEGIN -->
<div id="zscbverdiv" style="float:right;">
   <div id="zscbvercntr"><ul id="zscbver" style="list-style-type:none;">
      <li id="zscbverfb"><script type="text/javascript">(function() { var zlt=unescape('%3C'); var zgt=unescape('%3E'); var zq=unescape('%22'); var zloc=encodeURI(document.location.href); document.write(zlt+'iframe src='+zq+'http://www.facebook.com/plugins/like.php?href='+zloc+'&amp;send=false&amp;layout=box_count&amp;width=45&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=60'+zq+' scrolling='+zq+'no'+zq+' frameborder='+zq+'0'+zq+' style='+zq+'border:none; overflow:hidden; width:45px; height:60px;'+zq+' allowTransparency='+zq+'true'+zq+''+zgt+''+zlt+'/iframe'+zgt); }) ();</script></li>
      <li id="zscbvertw"><a href="http://twitter.com/share" class="twitter-share-button" rel="nofollow" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><a id="zscbverc" href="http://inimu.com/widget/zscbutton/" title="Share Counter Buttons">i</a></li>
      <li id="zscbvergg"><g:plusone size="tall"></g:plusone><script type="text/javascript">(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></li>
      <li id="zscbverlb"><script type="text/javascript">lb_skin = 'mode2';</script><script src="http://www.lintasberita.com/widget_vote/lintasberita.js" type="text/javascript"></script></li>
   </ul><script type="text/javascript" src="http://zscbutton.googlecode.com/svn/trunk/js/zscbutton-ver.js"></script></div>
</div>
<!-- zSCbutton Vertical END -->

*

Penempatan Widget Share

Untuk widget tipe vertical ini, kita bisa menempatkannya di dalam konten (kiri atau kanan), atau di luar konten (di sisi luar konten sebelah kiri).

Di Dalam Konten

  • Untuk penempatan di sisi kiri, gunakan kode style float:left.
  • Untuk penempatan di sisi kanan, gunakan kode style float:right.

Di Luar Konten (Melayang)

Ini adalah penempatan pada posisi fixed (melayang) di sebelah kiri luar area utama blog. Kira-kira widget ini seperti widget share a la situs Mashable.com yang penempatannya berada di luar konten.

Untuk penempatan melayang di luar area utama, gunakan kode style position:fixed; top:200px; margin-left:-100px;.

*

Widget Demo

  • i

Tunjukkan demo posisi penempatan widget share:

Silahkan klik semua tombol share yang ada di sini untuk mencobanya. :)

*

Cara Pemasangan Kode Widget Share

Pasang (copy-paste) kode tersebut pada template blog/website sebelum atau di atas tag element konten artikel. Khusus untuk blog yang menggunakan platform Blogger/Blogspot dan juga WordPress.ORG (self-hosted), berikut ini adalah cara pemasangannya.

1. Pasang di template Blogspot/Blogger

Silahkan login, masuk ke tab Design/Layout, lalu klik Edit HTML, centang pilihan Expand Widget Templates. Cari kode <data:post.body/> di kotak editor HTML, lalu di atas kode data:post.body itu pasang kode tombol share (zSCbutton) di antara kode b:if condition seperti ini:

<b: if cond='data:blog.pageType != &quot;index&quot;'>
 <b:if cond='data:blog.pageType != &quot;archive&quot;'>
  MASUKKAN KODE TOMBOL SHARE DI SINI
 </b:if>
</b:if>

Catatan: mungkin kode data:post.body itu format/penamaannya tidak persis sama pada setiap template.

.

2. Pasang di template WordPress.ORG (self hosted)

Silahkan login, masuk ke Appearance, lalu klik Editor (Themes editor). Silahkan buka template Single Post (single.php) atau Page Template (page.php). Cari kode <?php the_content(); ?>, lalu di atas atau di bawah kode the_content() itu tambahkan kode tombol share.

Catatan: mungkin kode the_content() itu format/penamaannya tidak persis sama pada setiap theme.

.

  • i
 Posted by at 20:14

  13 Responses to “Share Counters + Share Buttons Widget – Vertical (zSCbutton)”

  1. nice share,,,sy udah praktek nee,,,,thanks

  2. bagus sekali widgetnya,,, siip…

  3. sangat bagus kodenya ms bro.. trims,,,

  4. nice infoo 😉

  5. sip gan, tp g bisa punya saya gan,
    kenapa??

  6. Bagus wdgetnya, ijin pakai gan…

  7. Gan.. cara pasang widget ini di theme yang agan pakai gimana caranya?

    Theme kita sama.. :mrgreen: :mrgreen:

  8. ini baru blog hhhahahah mampir gann 😆 😆 😆 😮 :mrgreen:

  9. Mksh infonya gan……..:)
    Salam kenal:
    FREE MIDI Downloads

  10. MMMMuuuuaaacccHHHH,………….. 😛

  11. lumayan buat tambah ilmu

  12. Nice info gan,,udah ane coba nieh..
    Visit back ya.. blog baru OnaldShare™ 😉

  13. Nice info.. Thanks gan 😆 😆 😆

Leave a Reply to Amien Melody Cancel reply

(required)

(required)


nine − 6 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

zStickyBar Widget by inimu.com