Menambahkan Icons Social Bookmarking Kedalam Halaman Artikel

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;
  opacity: .4;
  -moz-opacity: .4;
  filter: alpha(opacity=40);
  }
  .sociable img: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>
  
  <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://sites.google.com/site/ruangsc/imgsb/digg.png/></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://sites.google.com/site/ruangsc/imgsb/sphinn.png/></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://sites.google.com/site/ruangsc/imgsb/delicious.png/></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://sites.google.com/site/ruangsc/imgsb/facebook.png/></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://sites.google.com/site/ruangsc/imgsb/mixx.png/></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://sites.google.com/site/ruangsc/imgsb/google.png/></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://sites.google.com/site/ruangsc/imgsb/furl.png/></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://sites.google.com/site/ruangsc/imgsb/reddit.png/></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://sites.google.com/site/ruangsc/imgsb/spurl.png/></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://sites.google.com/site/ruangsc/imgsb/stumbleupon.png/></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://sites.google.com/site/ruangsc/imgsb/technorati.png/></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.....