Friday, August 14, 2009

Memasang Bookmarks Transparan

Bookmarks sepertinya sudah merupakan bagian yang tidak terpisahkan dari sebuah blog. Dengan fasilitas bookmarks berarti kita memberikan kesempatan orang lain untuk menandai dan menyimpan artikel kita di website penyedia social bookmarks, selain itu website social bookmarks mampu mempercepat blog untuk ter-index di search engine, semakin banyak pengunjung yang mem-bookmarks semakin banyak backlink yang blog kita peroleh. Itu berarti memperbaiki pagerank blog kita dimata search engine terutama Google. Menambah fasilitas bookmarks pada blog kita berarti kita peduli dengan pengunjung blog kita, karena pengunjung dengan mudah menemukan link halaman artikel kita yang sudah tersimpan dihalaman social bookmarks.
Pada artikel sebelumnya kita sudah mencoba sexy bookmarks, tetapi jika merasa tidak cocok silahkan mencoba social bookmarks transparan seperti dijelaskan dibawah ini.

Memasang Social Bookmarks Transparan

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Jangan lupa "Expand Template Widget"
Langkah 4
Cari kode dibawah ini :
]]></b:skin>
Langkah 5
Masukan (copy paste) kode dibawah ini di atas kode pada langkah 4:
div.sociable { margin: 16px 0; }
.sociable ul {display: inline; margin: 0 !important; padding: 0 !important;}
.sociable ul li {background: none; display: inline !important; list-style-type: none; margin: 0; padding: 1px 10px 1px 1px;}
.sociable ul li:before { content: ""; }
.sociable img {float: none; width: 16px; height: 16px; border: 0; margin: 0; padding: 0;}
.sociable-hovers {opacity: .4; -moz-opacity: .4; filter: alpha(opacity=40);}
.sociable-hovers:hover {opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100);}
Langkah 6
Cari kode dibawah ini :
<data:post.body/>
Langkah 7
Masukan (copy paste) kode dibawah ini di bawah kode pada langkah 6:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sociable'>
<ul>
<li><a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Digg'><img alt='Digg' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/digg.png' title='Digg'/></a></li>
<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='del.icio.us'><img alt='del.icio.us' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/delicious.png' title='del.icio.us'/></a></li>
<li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Yahoo! Buzz'><img alt='Yahoo! Buzz' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/yahoobuzz.gif' title='Yahoo! Buzz'/></a></li>
<li><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Technorati'><img alt='Technorati' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/technorati.png' title='Technorati'/></a></li>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Facebook'><img alt='Facebook' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/facebook.png' title='Facebook'/></a></li>
<li><a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='TwitThis'><img alt='TwitThis' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/twitter.gif' title='TwitThis'/></a></li>
<li><a expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='MySpace'><img alt='MySpace' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/myspace.png' title='MySpace'/></a></li>
<li><a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='LinkedIn'><img alt='LinkedIn' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/linkedin.png' title='LinkedIn'/></a></li>
<li><a expr:href='&quot;https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Live'><img alt='Live' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/live.png' title='Live'/></a></li>
<li><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Google'><img alt='Google' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/googlebookmark.png' title='Google'/></a></li>
<li><a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Reddit'><img alt='Reddit' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/reddit.png' title='Reddit'/></a></li>
<li><a expr:href='&quot;http://sphinn.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sphinn'><img alt='Sphinn' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/sphinn.gif' title='Sphinn'/></a></li>
<li><a expr:href='&quot;http://www.propeller.com/submit/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Propeller'><img alt='Propeller' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/propeller.gif' title='Propeller'/></a></li>
<li><a expr:href='&quot;http://slashdot.org/bookmark.pl?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Slashdot'><img alt='Slashdot' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/slashdot.png' title='Slashdot'/></a></li>
<li><a expr:href='&quot;http://www.netvibes.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Netvibes'><img alt='Netvibes' class='sociable-hovers' src='http://s310.photobucket.com/albums/kk426/magznetwork/sociable/netvibes.png' title='Netvibes'/></a></li>
</ul>
</div>
</b:if>
Langkah 8
Simpan template dan preview blog anda.

Semoga berhasil dan tinggalkan komentar jika mengalami kegagalan pemasangan. Happy blogging... :)