16 Cara Memasang Widget Sexy Sosial Bookmarks

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Postingan kali ini merupakan request dari seorang pengunjung baru blog ini. Saya kira dari sekian pengunjung dan penanya yang pernah merequest tutorial, inilah satu penanya yang menurut saya punya cara yang unik mengajukan request. kenapa saya bilang unik?
Berikut pertanyaan yang ditinggalkan sang penanya:

image
Sebelum mengunjungi link tempat widget yang dimaksud, saya sorotkan pointer crusor pada link tersebut dan yang nampak:
image
Saya berfikir, lho widget kok disimpan ditempat hosting image? Terdorong rasa penasaran saya segera meluncur ke TKP (Istilah kebanyakan blogger sekarang ). Dan apa yang saya lihat? Silahkan klik tombol spoiler kalau pingin melihat:

pertanyaan unik 
Nah jawaban saya, widget diatas bukan satu kesatuan, tapi dua widget yang dipasangnyapun satu persatu, dan maaf kepada penanya saya memilih untuk membuat postingannyapun satu persatu. Untuk yang pertama, saya awali dengan cara memasang widget sexy sosial bookmark diakhir postinganan:
1. Dalam keadaan loggin pada account sobat>>> pada dasbor>>> klik tata letak>>> edit HTML>>> centang kotak kecil Expand Widget Template
2. Tambahkan kode berikut sebelum kode </head>
<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url(&#39;http://i43.tinypic.com/2ueii3t.png&#39;) no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(&#39;http://i43.tinypic.com/2ueii3t.png&#39;) no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url(&#39;http://i941.photobucket.com/albums/ad259/spiceupyourblog/sexybookmarksbuttons.png&#39;) no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

</style>
3. Tambahkan kode HTML berikut setelah kode <data:post.body/>
<div class='sexy-bookmarks'>
    <ul class='socials'>
    <li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/Indahnya-Berbagi' title='Subscribe to RSS' rel='nofollow'/></li>
    <li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    </ul>
    <span class='sexy-rightside'/></div>
Catatan: jangan lupa mengganti ID feed Burners saya (Indahnya-Berbagi) dengan id feed burners sobat.
4. Simpan template.
Selesai, semoga bermanfaat tidak saja bagi penanya tapi juga bagi teman-teman yang lain. Oh ya, untuk widget selanjutnya insyaAllah pada kesempatan yang lain! Tapi link penanya kok tidak  bisa dikunjungi ya? Makanya tidak saya cantumkan pada postingan, brokenlink?
Thanks to CSS Reflex.Com


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

16 komentar :

  1. aq pernag nyoba tp kenapa yah kok munculnya di depan alias di halaman utama padahal aq pengennya muncul di halaman postingan

    Parse Code HTML Ala Mbah Google

    BalasHapus
  2. wah tutorial yang ajib bener nih kawan..
    terimakasih yah, mo coba di praktekan dulu^^

    salam blogger :D

    BalasHapus
  3. baca judulnya bingung..ini yang dimaksud ya?
    makasih banyak tutorialnya mba.

    BalasHapus
  4. widgetnya jadi di tumpuk gitu?
    kelihatan separoh aja yg atas...

    BalasHapus
  5. Yang bisa tampil hanya separo saja...?
    Btw, makasih berbaginya.. sangat bermanfaat

    BalasHapus
  6. makasih tutornya
    perlu di coba,,

    BalasHapus
  7. @ Rizky: Mungkin templatex blm terpasang read more?
    @ Local Download: smg berhasil, terimakasih apresiasix.
    @ Narti: iya ukh, gtu jg judulnya dari CSS reflex
    @ SDA: unik khn? coba yuk!?
    @ 100 abc blog: contohnya diblog ini dah lihat khn? terimakasih jg apresiasinya.
    @ aan: silahkan semoga berhasil.

    BalasHapus
  8. makasih banget akhirnya punya, mau follow balik gk? aq udah follow, mksih

    BalasHapus
  9. Mantap banget nih, lumayan jelas untuk saya yg buta banget HTML. Tapi kalau dicoba kayaknya belum deh..ribet bgt kayaknya :)

    BalasHapus
  10. kakaak kok gak mampir lagi? template pesenan saya yg tweety udah ada blm? hmmm,, aq nunggu nie,,hehehe,,mkasi yaaa

    BalasHapus
  11. gak bisa bercoment banyak,..cuma thanks banget tutorialnya..slm kenal.

    BalasHapus
  12. keren banget sob..!!! wajar nih agak susah coz ribet juga codingnya...!!!

    BalasHapus
  13. aku niat nya mau begitu kak.... tapi kok yang aku nggak ada ya? susah banget gitu... liat nya.... o,ya kak, kenapa ngga bikin kotak chat? itu supaya kita langsung apresiasi dan tanya-tanya sama kakak! ^o^

    BalasHapus
  14. setuju sama syifa maharani. buat chat box dunk mbak. pengen deh punya blog yang keren gini. . . Malahan HTML aj asaya nggak tau apaan.

    BalasHapus
  15. Tipsnya bagus tuh,..Thanks, jadi tau deh..

    BalasHapus
  16. Horeeeee... punyaku udah jadi ..... lihat aja di

    http://tipstrikkita.blogspot.com/

    makasyih pak administrator yang baek.... hehe.

    BalasHapus