Merubah Tampilan Template Ke Template Social Boorkmark

bagi para blogger yang mau mengungabah tempaltenya seperti tempaket kebanyakan social boorkmar saya sedikit punya tipsnya untuk para blogger nih tips saya dapatkan dari blogger sebelah dan saya tidak lupa mengucapkan banyak terima kasih kepada http://www.diie-adhies.co.cc/ 

    Bagi sobat yang ingin memasangnya pada blog sobat cukup dengan menambahkan gadget/add gadget, copy dan paste kode di bawah ini :

<style type='text/css'>
ul#navigation {
list-style-type:none;
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index: 9999;
width: 721px;
}
ul#navigation li {
width: 103px;
display: inline;
float: left;
border: none;
}
ul#navigation li a {
display: block;
float: left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color: #A7A6AA;
background-repeat: no-repeat;
background-position: 50% 10px;
border: 1px solid #333333;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration: none;
text-align: center;
padding-top: 85px;
opacity: 0.90;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color: #3778DC;
}
ul#navigation li a span{
letter-spacing: 2px;
font-size: 11px;
color: #FFFFFF;
font-family: Trebuchet-ms, Arial, Tahoma, Sans-Serif;
font-weight: bold;
}
ul#navigation .rss a{
background-image: url(http://i1197.photobucket.com/albums/aa440/diieadhie/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(http://i1197.photobucket.com/albums/aa440/diieadhie/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(http://i1197.photobucket.com/albums/aa440/diieadhie/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(http://i1197.photobucket.com/albums/aa440/diieadhie/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(http://i1197.photobucket.com/albums/aa440/diieadhie/yahoo_64x64.png);
}
</style>

<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script>

<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

<ul id="navigation">
<li class="rss">
<a href="http://www.diie-adhies.co.cc/feeds/posts/default"><span>Feed Post</span></a>
</li>
<li class="facebook">
<a href="http://www.facebook.com/adhie.dixie"><span>My Facebook</span></a>
</li>
<li class="twitter">
<a href="http://twitter.com/diieadii00"><span>My Twitter</span></a>
</li>
<li class="googlebookmarks">
<a href="http://www.google.com/bookmarks/mark"><span>Bookmarks</span></a>
</li>
<li class="e-mail">
<a href="http://www.mybloglog.com/buzz/members/diieadhie/"><span>My Bloglog</span></a>
</li>
</ul>

Untuk kode yang berwarna merah jika sobat sudah pernah memasangnya pada template maka kode tersebut tidak perlu disertakan. Untuk yang berwarna biru sobat tinggal ganti dengan link sobat sendiri.

Contoh hasilnya dapat dilihat di Diieadhies-blog.blogspot.com