Memperkenalkan TBZ-Bookmarking Widget

Original by IFX Adrian | 27 Januari 2010 13 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYUqiMXJLt2oiqDbrX-ORnvivOuPVsDtXhY3_CEJxidxbo01EIC8I31RVrDo1Ho8PU9oKdFcoiVs-FN5UZSefZ9fiSlPPMCw0Hu-yXhM2QLk_9fHVX1-Jj2KhzvpikCUYnwR4BRmxMIus/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbwpdQEA3tsIRD9w4gqafwAslMTFtBkRBl22zUqM-6tpoUPNciVDLT2UfwkTHUOL-nk3lsFzJw-NFkjAUkStgJvvf4AHoOGhVL1V5rA5fy7s-Fq9D4n8ALvPkOvxlHi7BrqF12A7SwdCE/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM4KpXqbOunvZwPiMJ7viE3zTc1zD8knbFrXdq0tXOojD73K4NZv4qlsI2EpoM9DVEPVTdvbG2EwDOjj3PGhbbnV1styyoZsvpOga2DKDydAxxiuTXWuyTjso-wPDQ2OnU7aBNF9w16ss/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy-WFNJ5lx3Q4L3ahGPs0XKFzAjJLskwaZd5vIzc_4EJijHCPuKWP8vbZNaWZj6JETnq7zTrYmU-tF6uIdfM9VbCtUEeL_kCDXS666QTfKkrWaxWv-UzoI0owIS9vtfQTVhONDJJLCcYM/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvWq_L3UffNu7gsXa_lTp6jIXvb_CLHn-Ur5y6Y3jqT2WOi6UuGrBTs-8NuRjSxL9XRFtg0IT_LppyWwRiNihCV2-RbFcP9Fi73RleeaA4LiCtf-CLv0vHVPyWmyYhIbnK6DgN0TIjoLM/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcuH34ymCbnWbTEpjZof9kX59SfmPph-ZiQtcgQbHLV_oRHWCGtRE_m_RHbhyci1w0HwQD7o5bqlpIOQPKseHqugzTA90HsmVaqFmJ4nXpFKX3hMHKzsCqz9FJdJGodKfVU9_RD3LDNys/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW_s-uXaKcnt-TB5mpbKRXqD32qb1j-XPuotlQeQNh9lAPFIZ7EraN9drgY4cgcvdoM37fq5dR9I7H3J3w4OwuuICXxt1S3IP6VbOZ2nxxK2j2VGe3saIhi7VvxsTTgtFv8a_OibdGmHE/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSz9MpgBdAbTFDeUkLLrlXoxThZ1eHc4_Yywdu5vc3Sa3Equro5l4PLS-3TRndryT1qiUXofhqPUdK5oYOs329u3lXDljUAkMy3AnhmuDsPWyngWIS9XFN_EJUVp2coWzGkUyzIIymvXw/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYv3rnLMVO7RoMPejLxPZk2ScNBt-sOj8tFBc3SDjj416JyZplC3LYPAYrR5iCQFUw1X0L4-mhi_iJ1Db7LDEod9QbnXoVNqDE9YoGZReAoUI4Y_4vWfk7FMjSbG8h9U4jfVdO5W5xIyk/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIi-7qL4seLZIegPBrhc6g4yy_m9mY37bBnqvwS2zCIs57YXLGmG9dcnxNA7bIUz_w_EEfvZ2-FeksjeDx57yrooM6QfCM5Os5l_NOqNQLAhKStBJCHzrRxagKU4h7s2Kc0araBEreEQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG1YdQRKnubNQ6XVNu4OiqGKbD5u4ZU-YjA7f2jfiq9QRhwE4u8EzFKOlvrdT6cMIe1pgU-BSRyVpALDmgqCnuMYXQXQQbUbQzFBnLA-pzdabW5avA1PH17Fc_oOBl87cL-tW-3NmnUUk/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-S5PrOfVKjl4WKTDNe4KxLZ6zviUc721GslXAShgz6D4UwPRE_4KbhzSftvErHsYg79K7rvLdvOj8HC0prQLNvFwIGQpbj5YHkbB3VFZQtorMZN5fhCv6EYZa01q6UD5-8YDdG7-awWU/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!

<a href="http://instaforex.com/forexcopy_system.php?x=DVXF">InstaForex</a>

Artikel Lain Yang Mungkin Anda Baca

13 komentar:

setting gprs 1 Februari 2010 pukul 19.38: TBZ-Bookmarking Widget tampilannya keren sob, makasih sudah lama cari ini...
Zacky Adrishayuni 1 Februari 2010 pukul 20.33: Ya sama2 sob... rajin berkunjung ya...
Jagad-aneh 1 Juni 2010 pukul 09.32: TBZ-Bookmarking Widget mak NYUSSSSSSS.......... :D
Anonim 5 Juni 2010 pukul 07.59: :))
Epis Muhamad Ambigu 27 Agustus 2010 pukul 04.31: keren nih...makasih!
Athepostrad 16 September 2010 pukul 12.09: okeh BOS....tips nya..
Link udah saya pasang silahkan di cek nya maksih
Adipura Mandiri 7 Juli 2011 pukul 10.01: Keren..patut dicoba..

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

Thanks
PhanTom End D' AngeL 29 Juli 2011 pukul 19.34: Cocok K
Izin Copas Ea
Iqbal Sumbarta 26 Desember 2011 pukul 08.09: Mau tnya ...
klo tulisan chatboxnya diganti tulisan lain bsa kah ?
Iklan Internet Murah Efektif Berkualitas Indonesia 31 Agustus 2012 pukul 08.42: Iklan Internet Murah Efektif Berkualitas Indonesia

Iklan adalah cara modern pengganti kemenyan sebagai media pengelarisan, jika jaman dulu orang percaya bahwa untuk melariskan dagangan ada yang meminta bantuan pada setan dengan kemenyan ,
Tas ZARA 25 Mei 2013 pukul 07.00: Yg jelas kita tetap harus punya track record prestasi terkait yg bisa dibanggakan dulu, setelah itu mau personal branding pake media apa aja bakal cepat melejit
Pabrik Tas Bandung 26 Agustus 2018 pukul 23.40: ok banget gan infonya. ane sering baca2 blog agan
Konveksi Tas Jogja 26 Desember 2020 pukul 15.30: Terimaksih gan infonya, sungguh sangat membantu dalam bookmarking widget