Mempercantik Social Bookmarks

Social Bookmarks adalah sebuah metode untuk pengguna internet yang berfungsi mengatur, menyimpan, mengelola dan mencari sumber-sumber melalui online. Deskripsi dapat ditambahkan ke bookmark tersebut dalam bentuk meta data , sehingga pengguna dapat memahami isi dari sumber. Dalam sistem bookmark sosial, pengguna menyimpan link ke halaman web yang ingin mereka ingat atau berbagi. Penandaan ini biasanya publik, dan dapat disimpan secara pribadi atau berbagi dengan orang-orang tertentu atau kelompok dan berbagi di dalam jaringan tertentu.

Langsung ke inti dari pembahasan Mempercantik Social Bookmarks, anda dapat melakukan copas script dibawah ini dan letakkan di blog anda.

• Login ke account blogger Anda
• Lanjut ke -> Elemen Halaman -> Tambah Gadget
• Pilih "HTML / Java Script"
  
• Kemudian tambahkan kode di bawah ini, jangan lupa untuk menyesuaikan link.
  

<div id="Layer3">
<ul id="menu">
<li>
<a href="#"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/delicious_48.png" alt="Delicious" width="60" height="60" title="Delicious" />
<span><br />
<b class="h2">Delicious</b><br />
Add to delicious
</span>
</a>
</li>
<li>
<a href="#"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/twitter_icons_48.png" alt="Twitter" width="60" height="60" title="Twitter" />
<span>
<br />
<b class="h2">Twitter</b><br />
Retweet the Article
</span>
</a>
</li>
<li>
<a href="#"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/facebook_48.png" alt="Facebook" width="60" height="60" title="Facebook" />
<span><br />
<b class="h2">Facebook</b><br />
Add to Facebook
</span>
</a>
</li>
<li>
<a href="#"><img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/rss-icon.png" alt="RSS" width="60" height="60" title="RSS" />
<span><br />
<b class="h2">Dreamcss </b><br />
Subscribe Us
</span>
</a>
</li>
<li>
<a href="#">
<img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/Google.png" alt="Google" width="60" height="60" title="Google" />
<span><br />
<b class="h2">Google</b><br />
Bookmark the Article
</span>
</a>
</li>
</ul>
</div>
<style text-type="CSS">
/*
amcied Logica
http://amcied-logica.blogspot.com */
#menu {
margin:0;
padding:0;
width: 50em;
height: 4.5em;
overflow:hidden;
}
#menu li {
display:inline;
list-style-type:none;
}
#menu li a {
display:block;
float:left;
text-decoration:none;
margin:0;
}
#menu li a img {
opacity:0.7;
margin:0.5em;
border:0;
float:left;
}
#menu li a span {
display:none;
}
#menu li a:hover {
background:transparent;
}
#menu li a:hover span {
width:10em;
color:#aaa;
display:block;
cursor:pointer;
float:left;
}
#menu .h2 {
margin:0 5px;
padding:0;
color:#fc0;
font-variant:small-caps;
font-size:1.25em;
border:0;
}
</style>

• Simpan template >> liat hasilnya.

Hanya untuk referensi bila ingin mengubah gambar Social Bookmarks sesuai keinginan, anda dapat mengunjungi situs Icons Pedia. Semoga bermanfaat.

Read More..