Artikel Terbaru :

Membuat Social Bookmarking Widget

Sabtu, April 17, 2010 | komentar (2)

Sebenarnya ini bukan hal yang baru,bahkan punya teman-teman blogger lain ada yg lebih ciamik dari ini..tapi tak apalah kalie aja masih ada yang berminat membuat Social Bookmarking Widget ala Khairul Blog yang simpel namun tidak kalah menarik..
Dengan Social Bookmarking Widget kita bisa membagikan artikel ke 12 social bookmarking situs, yaitu facebook,Google Social Bookmarks, Delicious, Digg, Stumbleupon, Twitter, Technorati, Linkedin, Mixx, Newsvine, Yahoo, dan Reddit. Satu lagi, widget ini mempunyai satu kelebihan yaitu jika kita mengarahkan ke gambar (hover effect), maka akan keluar title dari gambar situs yang kita tuju.

Berikut Cara Memasangnya
  • Login ke akun Blogger anda
  • Plih Layout > Edit HTML, lalu centang Expand Widget Template
  • Cari kode </head>, lalu paste kode berikut di atasnya:

<!-- Bookmark by Khairul Blog http://seruyanblogger.blogspot.com START -->
<style>
.bookmark {
background:#FFF !important;
width:420px; /* lebar kotak */
text-align:center;
text-transform:none;
border:1px solid #DDD; /* warna border kotak */
-moz-border-radius:5px;
padding:5px;
}
.bookmark img {
margin-top:5px;
opacity:.4;
-moz-opacity:.4;
filter:alpha(opacity=40);
}
.bookmark 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 */
}
.credit {
font-size:9px;
text-align:right;
}
.credit a {
text-decoration:none;
}
.credit a:hover {
text-decoration:underline;
}
</style>
<script src='http://z-sbookmark.googlecode.com/files/Z-Bookmarking.js' type='text/javascript'/>
<!-- Bookmark by Khairul Blog http://seruyanblogger.blogspot.com END -->

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

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

<div id='row1'>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,1);&quot;' 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='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,2);&quot;' 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='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,3);&quot;' rel='nofollow' target='_blank' title='Digg!'><img alt='Digg!' src=' http://3.bp.blogspot.com/_dYi_OtRHGik/S8kE9EWD4WI/AAAAAAAAAfU/fvi-5p5rQQE/s200/1271461768_digg.png '/></a>

<a expr:href='&quot;http://twitter.com/home?status=Currently reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot;. What about you?&quot;' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,4);&quot;' rel='nofollow' target='_blank' title='Twitter'><img alt='Twitter' src=' http://3.bp.blogspot.com/_dYi_OtRHGik/S8kXBj1FAFI/AAAAAAAAAgc/wb-DypWrEI0/s200/1271468870_twitter.png '/></a>

<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,5);&quot;' 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='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,6);&quot;' rel='nofollow' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' src=' http://4.bp.blogspot.com/_dYi_OtRHGik/S8kE9WbXnZI/AAAAAAAAAfc/V7KMLCrMRjQ/s200/1271461880_stumbleupon.png '/></a>
</div>

<div id='row2'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,7);&quot;' rel='nofollow' target='_blank' title='Technorati'><img alt='Technorati' src=' http://4.bp.blogspot.com/_dYi_OtRHGik/S8kXB25Z09I/AAAAAAAAAgk/1BHfIf1REsM/s200/1271469164_technorati.png '/></a>

<a expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,8);&quot;' rel='nofollow' target='_blank' title='Google Bookmarks'><img alt='Google Bookmarks' src=' http://4.bp.blogspot.com/_dYi_OtRHGik/S8kE-Ui3iDI/AAAAAAAAAfs/--fawcEu8b0/s200/1271463197_google.png '/></a>

<a expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,9);&quot;' rel='nofollow' target='_blank' title='Mixx'><img alt='Mixx' src=' http://3.bp.blogspot.com/_dYi_OtRHGik/S8kXCGVvTpI/AAAAAAAAAgs/ZSQ3tul8M0o/s200/1271469584_mixx.png '/></a>

<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,10);&quot;' 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='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,11);&quot;' rel='nofollow' target='_blank' title='Newsvine'><img alt='Newsvine' src=' http://2.bp.blogspot.com/_dYi_OtRHGik/S8kFV8SnakI/AAAAAAAAAgE/eiViSI_1gW4/s200/1271463610_Newsvine_48x48.png '/></a>

<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,12);&quot;' target='_blank' title='Reddit'><img alt='Reddit' src=' http://2.bp.blogspot.com/_dYi_OtRHGik/S8kXCiPooVI/AAAAAAAAAg0/HOux3G1TJLU/s200/1271469391_reddit.png '/></a>
</div>
</div>


Jika blog kamu sudah terpasang READ MORE, kamu tinggal masukkan kode di atas, ke dalam kode di bawah ini :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- kode no. 4 -->
</b:if>

  • Terakhir, klik Save Template.


Semoga Sukses
Share this article :
Artikel tentang Membuat Social Bookmarking Widget. diposting oleh Khairul pada hari Sabtu, April 17, 2010.Tak lengkap rasanya jika kunjungan anda di pehu.web.id. ini tanpa meninggalkan sedikit jejak. Semoga artikel Membuat Social Bookmarking Widget ini bermanfaat. Terimakasih...

Get free daily email updates!

Follow us!

2 KOMENTAR

14 Mei 2010 pukul 11.14

thanks widget tutorialnya bro
salam kenal.

31 Maret 2011 pukul 00.45

sekali coba langsung bisa....
mksih buat tutorx :)

TULIS KOMENTAR DI BAWAH INI

Terima kasih atas kunjungannya. Bahagia rasanya jika Anda berkenan meninggalkan sedikit jejak disini. But No Spam, No Porn....OK Bro!!!

 
Template dimodifikasi oleh pehu.web.id
Copyright © 2013. | Powered by Blogger