Social Bookmark (SB)- Bagaimana Menambahkan Icon SB di Setiap Posting ?

Ada sebuah pertanyaan dari seorang sahabat, bagaimana cara pasang icon sharing yang ada di setiap posting kita ?
Seperti kita ketahui, Social Bookmark atau Bookmark Sosial menjadi media umum untuk berbagi informasi atau sharing, terutama dalam kegiatan blogging.
Dengan menambahkan fitur ini pada setiap posting, memudahkan kita untuk berbagi hanya dengan melakukan klik pada icon yang kita sediakan pada setiap posting kita dan biasanya icon ini diletakkan dibawah posting atau diatas kotak komentar.
Kali ini akan saya tunjukkan bagaimana cara menambahkan icon sosial bookmark dengan menggunakan icon statis. Akan tetapi bila mouse diarahkan pada icon tersebut, link akan muncul secara otomatis.
Nah, lain kali akan kita bahas dengan menggunakan icon yang bergerak seperti animasi... kalau ngga lupa ya ...
Kode-kode berikut, sudah berhasil saya tambahkan pada blog Ekspresi dan Jaga-Sehat, sebanyak 10 icon yang saya anggap cukup populer, yaitu :

• technorati (http://www.technorati.com)
• delicious (http://del.icio.us)
• google (http://www.google.com)
• reddit (http://www.reddit.com)
• blinklists (http://www.blinklist.com)
• blogmarks (http://blogmarks.net)
• facebook (http://www.facebook.com)
• twitter (http://twitter.com)
• digg (http://digg.com)
• yahoo (https://yahoo.com)
  

Jadi, bagaimana cara memasangnya ?
Ikuti langkah-langkahnya di bawah ini

1. Masuk ke Blogger dashboard, klik Layout (Tata Letak), Edit HTML, centang tanda Expand Template Widget.
2. Untuk keamanan, lakukan backup lebih dahulu jika terjadi kegagalan dalam melakukan editing. Klik Download Template Lengkap dan simpan.
   
3. Copy kode dibawah ini :
   
   
   
   /*-----------Social Bookmarks------------------*/
   
   .rsociales ul {
   display:inline;
   margin:0pt !important;
   padding:0pt !important; }
   .rsociales li {
   background:transparent none repeat scroll 0%;
   display:inline;
   list-style-type:none;
   margin:0pt;
   padding:2px; }
   .rsociales img {
   border:0pt none;
   float:none;
   margin:0pt;
   padding:0pt; }
   .rsociales-sobre { opacity:0.4; }
   .rsociales-sobre:hover { opacity:1; }
   
   
4. Paste sebelum kode : ]]></b:skin>
5. Cari kode : <data:post.body/>
   Jika sudah ada fitur "Read more" atau "Continue reading" , cari kode : <data:post.body/> yang kedua
6. Jika template Anda menggunakan readmore otomatis, sisipkan kode tersebut setelah <b:if cond='data:blog.pageType == "item"'> <data:post.body/>
7. Copy dan paste, kode dibawah ini, setelah kode : <data:post.body/>
   
   
   
   

   <h3> Share This </h3>
   <div class='rsociales'>
   
   <ul>
   <li><a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Technorati'><img alt='Agregar a Technorati' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4XzfcD1YQdXrRBCkxB_khek0D0Hkpk7k6LyfDNt1mzSKN-mvutzkr8-utlD_s5BgCcKLeZrGjA84U_NQWR87lWzPVF276gTKSOc8hLhLIGAzNvW_3fUQJ3HFt-o3lflziGAXzn1ujYow/s1600/technorati.gif'/></a></li>
   <li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='del.icio.us'><img alt='Agregar a Del.icio.us' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcTy_RyWFA3Jn7z4CKu-_2J97OMu6dyPwHzxyiTsV7wWHYYom5Io1yR-H8XmzOcMM_Z7zwEe3ZZfYvKi31MDBxPGiS3gQ0ZmbU6hp8_JNHmt9riNzvBHyM85xyx2J0_b_EsWKLQxwhras/s1600/delicious.gif'/></a></li>
   <li><a expr:href='&quot;http://digg.com/submit?phase=2&amp;amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='digg.com'><img alt='Agregar a DiggIt!' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgstmFUgl1UdvfF_ci1RI_-pp9pzU42EQRZ2lt9wQbeWCJSQgFIL4r4sVBLZpWVk3tz1gKAPIOe6u1SQMjHdA0CZviJeFswki-pP4sWkFdpdpUMU_N-xdfg6JGHYwi1wUgM7pUSX2s1M4w/s1600/digg.png'/></a></li>
   <li><a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Yahoo'><img alt='Agregar a Yahoo!' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifKdkzlzC7oN_2wdHZ4B62-eK5jE3hJqG1WUjXPNOAKQ_RI4sI7yyJhCV0bPWxv0MPS0D4WwJEjQ21byDusWj6AC2pqLf6gkWSTBheyEPaFxD86BK5WnrjM8q1X-uyk_fm-vOirGlnXO0/s1600/yahoo.png'/></a></li>
   <li><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google'><img alt='Agregar a Google' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKVVtyI21ABFOSu1l8wcOnkWrcdOf_xyXvHVn19pWmVEzHegI2LUs1P3O0qqxHqfMQ4xAsSg8SRSQiAlBl4pGh2hBHNq27t7ONG1u2GziKMvb9qpUF1D5fDkEQ3jDnHJimYgXz20-B5OU/s1600/google.gif'/></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.com'><img alt='Agregar a Reddit' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV-DxEdQofNIey3knfGsY5n3lbvwK-4yMkMtvrGuobUm-lIalNeNGtuuHJ1ZYjK6PcIZdI_-MEn4aTk4NxSoQxJFuo2p_s8Qi6nGE_sZc5eS461J_41kuzSGrbDUmkAnB-lJF9OL0z_ss/s1600/reddit.gif '/></a></li>
   <li><a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='blinklist.com'><img alt='Agregar a Blinklist' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXJ-i2PSdmqWn1PPDgf5kttwcOfPDa9NOMXzvPlTnsfYvWCRWuXLL2v7JhbYJyvSNrSwBTD30c_ZPBZiSvq_4BXZ1R_ucLf9UZ2-FiJRJLp3d4asyRdkQ6ThiejzgoKQJ36zqLnLOlmTQ/s1600/blinklists.gif'/></a></li>
   <li><a expr:href='&quot;http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='blogmarks.net'><img alt='Agregar a Blogmarks' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0_LryTx_PaoHv6i8jE5zeITYzCxoRAb67S3igYoflboDX8wJ1yxA6jMgoZISHOAxMQe2xeakVJ3dkM6SdUi8b8HG0sGRW4uEHler3s1LBpQKiSkFucAuZe44ykFR3Bss5dTrmDm_iWNs/s1600/blogmarks.gif'/></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' target='_blank' title='Facebook'><img alt='Agregar a facebook' class='rsociales-sobre' src='http://lh5.ggpht.com/jaloee/SJNIyWWQmEI/AAAAAAAACRY/4GVE3Qxqg34/facebook.gif'/></a></li>
   <li><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Twitter'><img alt='Agregar a twitter' class='rsociales-sobre' src='http://lh6.ggpht.com/jaloee/SJNIyl7oKlI/AAAAAAAACRc/8cc7q_upZI4/twitter.gif'/> </a></li>
   </ul>
   
   </div>

   
   
8. Simpan
9. Catatan:
   
• Anda dapat menempatkannya di mana saja selama masih di bagian posting.
• Anda juga dapat menyisipkan di bawah kode :
  <div class='post-footer-line post-footer-line-1'>
  atau dibawah kode :
  <div class='post-footer-line post-footer-line-2'>
  atau dibawah kode :
  <div class='post-footer-line post-footer-line-3'>
• Anda juga dapat mengganti icon dengan menggunakan gambar Anda sendiri dengan mengganti URL milik Anda sendiri dimana icon tersebut Anda simpan (Misalnya : src='http://Your URL Images Saved/images.gif' )
  

Selamat mencoba, semoga berhasil ...!!!