Buat, Pasang, "ICONS SOCIAL BOKMARKING" ke dalam artikel

Sumber: SC Comunity
Apaan tuh Social Bookmarking? Mungkin itu yang pertama kali muncul dalam benak kita yang awam. Menurut kamus elektronik Wikipedia, Social Bookmarking adalah metode bagi para pengguna internet untuk berbagi, mengatur, mencari, dan mengelola bookmark (penanda) sumber daya web. Tidak seperti file sharing, sumber dayanya sendiri tidak dibagi tapi hanya sebagai penanda referensi.

Lantas mengapa memasang Social Bookmark ini perlu? Karena menurut informasi yang saya baca, memasang Social Bookmark merupakan salah satu cara mudah untuk melakukan promosi terhadap situs yang kita miliki. Oleh sebab itu kita perlu memasang Social Bookmark pada setiap halaman artikel dalam situs kita.

Nah, Icons Social Bookmarking yang akan kita pasang pada halaman artikel blog kita adalah Digg, Sphinn, Delicious, Facebook, Mixx, Google, Furl, Reddit, Spurl, StumbleUpon, dan Technorati, seperti nampak pada gambar berikut (lihat contoh di bagian bawah blog ini):

Unuk menambahkan icon-icon ini kedalam halaman artikel, kamu bisa mengikuti langkah-langkah berikut:

* Login ke akun Blogger, pilih Tata Letak, lalu pilih Edit HTML.
* Lakukan duplikasi template untuk berjaga-jaga jika terjadi kekeliruan.
* Beri tanda centrang pada Expand Template Widget.
* Kopikan kode CSS berikut dan letakkan di atas ]]></b:skin>:

/* Social Bookmark
----------------------------------------------- */
div.sociable { margin: 16px 0 0 0; text-align: center; }

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable li {
background: none;
display: inline;
list-style-type: none;
margin: 0;
padding: 1px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;
width: 16px;
height: 16px;
border: 0;
margin: 5px 5px; /*jarak antargambar*/
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);
}

# Kemudian cari kode <data:post.body/> (gunakan Control F atau F3). Jika ada dua buah, pilihlah yang pertama.
# Kopikan script berikut dan letakkan setelah <data:post.body/> yang pertama:

<!-- Awal Social Bookmark -->
<div class='sociable'>
<span class='sociable_tagline'>
<span>Ikon ini merupakan link ke situs bookmark sosial dimana pembaca dapat berbagi dan menemukan halaman web baru.</span>
</span>
<li><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg'><img alt='Digg' class='sociable-hovers' src='http://174.132.149.5/~tmwwtw/ultimateblogger/img/digg.png' title='Digg'/></a></li>
<li><a expr:href='&quot;http://sphinn.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Sphinn'><img alt='Sphinn' class='sociable-hovers' src='http://174.132.149.5/~tmwwtw/ultimateblogger/img/sphinn.png' title='Sphinn'/></a></li>
<li><a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'><img alt='Delicious' class='sociable-hovers' src='http://174.132.149.5/~tmwwtw/ultimateblogger/img/delicious.png' title='Delicious'/></a></li>
<li><a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Facebook'><img alt='Facebook' class='sociable-hovers' src='http://174.132.149.5/~tmwwtw/ultimateblogger/img/facebook.png' title='Facebook'/></a></li>
<li><a expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Mixx'><img alt='Mixx' class='sociable-hovers' src='http://174.132.149.5/~tmwwtw/ultimateblogger/img/mixx.png' title='Mixx'/></a></li>
<li><a expr:href='&quot;http://google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google'><img alt='Google' class='sociable-hovers' src='http://174.132.149.5/~tmwwtw/ultimateblogger/img/googlebookmark.png' title='Google'/></a></li>
<li><a expr:href='&quot;http://www.furl.net/storeIt.jsp?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url' target='_blank' title='Furl'><img alt='Furl' class='sociable-hovers' src='http://174.132.149.5/~tmwwtw/ultimateblogger/img/furl.png' title='Furl'/></a></li>
<li><a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Reddit'><img alt='Reddit' class='sociable-hovers' src='http://174.132.149.5/~tmwwtw/ultimateblogger/img/reddit.png' title='Reddit'/></a></li>
<li><a expr:href='&quot;http://www.spurl.net/spurl.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Spurl'><img alt='Spurl' class='sociable-hovers' src='http://174.132.149.5/~tmwwtw/ultimateblogger/img/spurl.png' title='Spurl'/></a></li>
<li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' class='sociable-hovers' src='http://174.132.149.5/~tmwwtw/ultimateblogger/img/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Technorati'><img alt='Technorati' class='sociable-hovers' src='http://174.132.149.5/~tmwwtw/ultimateblogger/img/technorati.png' title='Technorati'/></a></li>
</div>
<!-- Akhir Social Bookmark -->

* Simpan hasil kerjaan kamu, lalu buka salah satu artikel kamu untuk melihat hasilnya.


Gimana, bagus kan?. Jika gambar icons-nya terlalu rapat atau terlalu renggang, lakukan editing pada kode CSS-nya yang diberi keterangan "jarak antargambar".

Ok coy, selamat mencoba.....

---

Read in Another Language : by

---

Share

Related Post: