Memperkenalkan TBZ-Bookmarking Widget

Original by Zacky Adrishayuni | 27 Januari 2010 9 Comments

Selamat siang semuanya... Apa kabar? Mudah2an baik semuanya ya... Kali ini saya mau bagi tips tentang social bookmarking widget. Postingan ini saya buat untuk menjawab pertanyaan saudara My Self di pada komentar postingan cara membuat buku tamu shoutbox. Widget ini saya beri nama TBZ-Bookmarking. Dengan TBZ-Bookmarking kita bisa membagikan artikel ke 12 social bookmarking situs, yaitu Facebook, Google Bookmarks, Delicious, Digg, Stumbleupon, Twitter, Technorati, Linkedin, Mixx, Newsvine, Yahoo, dan Reddit. Satu lagi, widget ini mempunyai satu kelebihan yaitu jika kita mengarahkan mouse ke gambar (hover effect), maka akan keluar title dari gambar situs yang kita tuju. Gimana? Mau pasang widget ini?

Berikut Cara Memasang Widget TBZ-Bookmarking

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode </head>, lalu paste kode berikut di atasnya:

<style>
.tbzbookmark {
background:#FFF !important;
width:310px; /* lebar kotak */
text-align:center;
text-transform:none;
border:1px solid #DDD; /* warna border kotak */
-moz-border-radius:5px;
padding:10px;
}
.tbzbookmark img {
margin-top:5px;
opacity:.4;
-moz-opacity:.4;
filter:alpha(opacity=40);
}
.tbzbookmark img:hover {
opacity:1;
-moz-opacity:1;
filter:alpha(opacity=100);
}
.sharemessage {
color:#666; /* warna judul */
font:Arial, Helvetica, sans-serif;
font-size:13px; /* ukuran huruf judul */
font-weight:bold;
margin-bottom:5px;
padding-bottom:2px;
border-bottom: 1px solid #CCC; /* warna border bawah judul */
}
.tbzcredit {
font-size:9px;
text-align:right;
}
.tbzcredit a {
text-decoration:none;
}
.tbzcredit a:hover {
text-decoration:underline;
}
</style>
<script src='http://z-sbookmark.googlecode.com/files/Z-Bookmarking.js' type='text/javascript'/>

4. Selanjunya, cari kode <div class='post-footer'> atau <p class='post-footer-line post-footer-line-1'>. Kalau sudah, paste kode berikut di atasnya:

<div class="tbzbookmark">
<div class="sharemessage">
<div expr:id='"sbtxt"+data:post.id'>Share this post!</div>
<script type='text/javascript'>showsbtext("sbtxt" + "<data:post.id/>",0)</script>
</div>

<div id='row1'>
<a expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",1);"' rel='nofollow' target='_blank' title='Facebook'><img alt='Facebook' src='http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S0YECkR2PFI/AAAAAAAAA08/E41Np49gMOQ/s400/facebook.png'/></a>

<a expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",2);"' rel='nofollow' target='_blank' title='Delicious'><img alt='Delicious' src='http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEC_HrhTI/AAAAAAAAA1E/9PyQYMVy7Bc/s400/Delicious.png'/></a>

<a expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",3);"' rel='nofollow' target='_blank' title='Digg!'><img alt='Digg!' src='http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEDavjQKI/AAAAAAAAA1M/MpkDmNtE-Xs/s400/Digg.png'/></a>

<a expr:href='"http://twitter.com/home?status=Currently reading: " + data:blog.title + " - " + data:post.url + ". What about you?"' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",4);"' rel='nofollow' target='_blank' title='Twitter'><img alt='Twitter' src='http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEeYgTSvI/AAAAAAAAA2M/Z1ppNui4cIY/s400/Twitter.png'/></a>

<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",5);"' rel='nofollow' target='_blank' title='Linkedin'><img alt='Linkedin' src='http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEECBCZWI/AAAAAAAAA1c/jUyFrHwpDs8/s400/Linkedin.png'/></a>

<a expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",6);"' rel='nofollow' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' src='http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEW9uvB6I/AAAAAAAAA18/A8DggvtDd1k/s400/Stumbleupon.png'/></a>
</div>

<div id='row2'>
<a expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",7);"' rel='nofollow' target='_blank' title='Technorati'><img alt='Technorati' src='http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEXu3iWII/AAAAAAAAA2E/20u3vVBKy-Y/s400/Technorati.png'/></a>

<a expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",8);"' rel='nofollow' target='_blank' title='Google Bookmarks'><img alt='Google Bookmarks' src='http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S0YED0iVkII/AAAAAAAAA1U/Y9aqTyY5Zs0/s400/Google.png'/></a>

<a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",9);"' rel='nofollow' target='_blank' title='Mixx'><img alt='Mixx' src='http://4.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEWOurSLI/AAAAAAAAA1k/yNzj5TWk2iQ/s400/mixx.png'/></a>

<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",10);"' target='_blank' title='Yahoo!'><img alt='Yahoo!' src='http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEev5YPiI/AAAAAAAAA2U/BwYzDyUPSKs/s400/Yahoo.png'/></a>

<a expr:href='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",11);"' rel='nofollow' target='_blank' title='Newsvine'><img alt='Newsvine' src='http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEWZxEmZI/AAAAAAAAA1s/KdsosSzRlak/s400/newsvine.png'/></a>

<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",12);"' target='_blank' title='Reddit'><img alt='Reddit' src='http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S0YEWn7gkTI/AAAAAAAAA10/FpQABQ_3Q88/s400/Reddit.png'/></a>
</div><div class="tbzcredit"><a href="http://tipsbloggerzacky.blogspot.com/2010/01/memperkenalkan-tbz-bookmarking-widget.html" target="_blank">Get this widget!</a></div>
</div>

Untuk yang ada read more, anda tinggal masukkan kode di atas ke dalam kode berikut:

<b:if cond='data:blog.pageType == "item"'>

</b:if>

5. Terakhir, klik Save Template.

note: Tolong jangan hapus credit yang ada dibawah widget.

Untuk demonya bisa anda lihat di bawah postingan ini.

Selamat mencoba...

Label: Blogger Tips, Blogger Widget, SEO, Social Bookmarking

Bagikan Artikel Ini!

Artikel Lain Yang Mungkin Anda Baca

9 komentar:

setting gprs 1 Februari 2010 19:38: TBZ-Bookmarking Widget tampilannya keren sob, makasih sudah lama cari ini...
Zacky Adrishayuni 1 Februari 2010 20:33: Ya sama2 sob... rajin berkunjung ya...
Jagad-aneh 1 Juni 2010 09:32: TBZ-Bookmarking Widget mak NYUSSSSSSS.......... :D
Anonim 5 Juni 2010 07:59: :))
Epis Muhamad Ambigu 27 Agustus 2010 04:31: keren nih...makasih!
Thep_Vedder 16 September 2010 12:09: okeh BOS....tips nya..
Link udah saya pasang silahkan di cek nya maksih
Adipura Mandiri 7 Juli 2011 10:01: Keren..patut dicoba..

Eh numpang promo ya..
Kunjungi http://www.adipuramandiri.com

Thanks
panto 29 Juli 2011 19:34: Cocok K
Izin Copas Ea
Zoombarta 26 Desember 2011 08:09: Mau tnya ...
klo tulisan chatboxnya diganti tulisan lain bsa kah ?