Pasang Sexy Social Bookmarking di Blogger

Pasang Sexy Social Bookmarking di Blogger

Ahmad Rifai Posted by at
Social Bookmarking memang tidak wajib ada di blog kita, namun tidak ada salahnya juga kan kalau blog blogger kesayangan kita di pasangi script social bookmarking seperti script sexy bookmark berikut

Pasang Sexy Social Bookmarking di Blogger
Dengan adanya script social bookmarking seperti sexy bookmark yang saya pasang di blog ini maka pengunjung blog bisa menyebarkan isi artikel yang ada di blog kita dengan cara mengklik icon yang ada. Misalnya ingin menyebarkan ke facebook, maka pengunjung blog kita tinggal klik icon facebook saja.

Lalu bagaimana sih cara membuat/memasang script social bookmark di blog blogger?

Untuk menampilkan sexy bookmark di blog blogger kita maka ada 2 unsur yang harus kita pasang, yaitu script sexy bookmark dan css sexy bookmark.

Cara Pasang Sexy Bookmark Di Blogger

Untuk membuat sexy bookmark maka anda harus berada di dashboard Blogger, kemudian Klik Menu Design/Rancangan => Setelah itu klik menu Edit HTML.

Setelah berada di halaman Edit HTML silakan beri centang pada Expand Widget Templates.

Sekarang pasang kode css berikut ini setelah kode ]]></b:skin>

Berikut Kodenya
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6aieclRwkmNbbdLPjzo2SeowkC9zayXmY9piQ-LtvowLqAnyDGF7PPjIYvJIL9mreHNk5xZBwu8XbeNPTkof5knYAoLeCarGBHTbuRo_Lx8eU9ewfbQ6hZ1GJkBH_3in_CNoIOaAoKA8/s1600/bokmark2.png&#39;) no-repeat left bottom;
position:relative;
width:500px;
margin-left:30px;
margin-bottom:-10px;
overflow:hidden
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJLSYjXNVfF2pPXhHVAR1klS8rYpsRAimZoQD_KzZJ8pOPbXmHqzwcvET_zFCL3kY1bjUfDUwDjhSFnBTQhuRm2mDTdmWck5CQHL_yYb3WwNVEuZrDy9GgN3i8lyOc5EicdB5BAnigVWw/s1600/bokmark1&#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;
}
iv.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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJLSYjXNVfF2pPXhHVAR1klS8rYpsRAimZoQD_KzZJ8pOPbXmHqzwcvET_zFCL3kY1bjUfDUwDjhSFnBTQhuRm2mDTdmWck5CQHL_yYb3WwNVEuZrDy9GgN3i8lyOc5EicdB5BAnigVWw/s1600/bokmark1&#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>
</b:if>
Setelah kode css sexy bookmark tersebut sudah di pasang anda boleh menyimpannya dulu atau langsung psang script sexy bookmarknya.

Berikut script sexy bookmark yang harus di pasang. Letakkan script ini setelah kode <DIV class='post-footer'> atau di temapt yang anda inginkan. Berikut script social bookmark yang harus di pasang
<b:if cond='data:blog.pageType ==  &quot;item&quot;'><div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:alt='data:post.title' 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:alt='data:post.title' 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:alt='data:post.title' 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:alt='data:post.title' 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:alt='data:post.title' 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:alt='data:post.title' 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:alt='data:post.title' 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:alt='data:post.title' 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-email'><a expr:alt='data:post.title' 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></b:if>
Setelah semua script sudah di pasang silahkan simpan pengaturan template anda kemudian cek, apakah sexy bookmarknya sudah ada atau belum, jika belum silahkan cek lagi templatenya.

Update 3 Februari 2012
Silakan gunakan script yang baru, scrip yang baru akan saya terbitkan besok tgl 4 Februari 2012
Label: ,
Share this:

5 comments:

  1. MI FATHUL ULUM SUKOSEWUJanuary 13, 2011 at 7:14 PM

    permisi mau ikut pakek template agan.

    waktu saya mengedit Pasang Sexy Social Bookmarking di Blogger kok g muncul seperti sampean. maaf aku baru belajar

    ReplyDelete
  2. Ahmad RifaiOctober 31, 2011 at 8:01 PM

    Makasih mas Rony atas komentarnya.

    Kode gambarnya sudah saya upadte, silakan gunakan kode yang baru ini.

    ReplyDelete
  3. AnonymousDecember 30, 2011 at 9:57 PM

    Saya sudah mengikuti langkah diatas
    tapi setelah saya save dan berhasil, tidak ada perubahan pada blog saya, apa yang salah?

    Saya pakai template Thesis SEO for Blogger

    ReplyDelete
  4. Ahmad RifaiDecember 30, 2011 at 11:18 PM

    @discoverbramasta : Coba di cek lagi, apakah ke 2 kode di atas sudah di pasang, tadi saya cek blognya cuma ada kode yang ke 1 saja (kode css).
    Kode yg ke 2 (kode html) belum ada

    ReplyDelete
  5. Lauri Novita SinagaMarch 13, 2012 at 10:47 AM

    kok ga mau ya???
    malah eror

    ReplyDelete

Subscribe to: Post Comments (Atom)
    • Powered by Blogger.
    Powered by Blogger Template by Ahmad Rifai