earth

Guestbook

/* Iklan google ads */
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):
Digg Sphinn Delicious Facebook Mixx Google Furl Reddit Spurl StumbleUpon Technorati
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.....
  • Artikel Terkait Dengan HTML Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    15 komentar

    Ok Guru...
    Nuhun pisan. ASa simpel nya ieu mah teu jelimet, hehe
    Nuhun ah...

    17 Desember 2009 07.44  

    Hai... Kang Enes, sudah kembali dari jalan-jalan rupanya. Teu rusuh ayeuna mah?
    Nuhun ya atas link picassa-nya. Tapi belom dicoba da teu acan tiasa ngabagi waktos kanggo utak-atik blog. Tapi udah janjian sareng Ritma bade "beberes". Mudah2an sukses.

    17 Desember 2009 08.37  

    salam sobat
    trims ilmunya,,
    saya akan mencoba juga menambah icons social brookmarking ini,,yang penting coba2 dulu.
    trims doanya ,bang ENES.

    17 Desember 2009 12.33  

    + lg neh wawasan TuTornya, nuhun mang !

    17 Desember 2009 15.24  

    Terima kasih infonya Kang...

    17 Desember 2009 21.26  

    iyah bagus kang...(bari lirik² ka Lina Gustina)
    mamacih kang tutornyah...

    18 Desember 2009 04.13  

    Makasih kang,tutorialnya langsung di praktekin.

    19 Desember 2009 11.53  

    Terima kasih sekali coba langsung berhasil, kenali bog aku kawan

    21 Desember 2009 20.57  

    Mass? kok g muncul neh??? knp y? mohon pencerahanya y...trimz!!

    7 Maret 2010 21.51  

    Makasih ....!!!

    Sukses script - nya terinstall

    22 Juni 2010 11.02  

    Thanks info... sdh terpasang di ifasmart.com

    20 Oktober 2010 07.29  

    Terimakasih sudah jadi silahkan berkunjung blog saya :)

    17 Desember 2011 13.29  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler