You are here : Home » » » Pasang Sexy Social Bookmarking di Blogger

Pasang Sexy Social Bookmarking di Blogger

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;http://4.bp.blogspot.com/-8CcAVqxJpe0/Tq6ZSmMMP1I/AAAAAAAAAhA/21aAWyH3VsA/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;http://4.bp.blogspot.com/-u1nQE4oqBMg/Tq6ZhpNXucI/AAAAAAAAAhI/iMpL5QAExko/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;http://4.bp.blogspot.com/-u1nQE4oqBMg/Tq6ZhpNXucI/AAAAAAAAAhI/iMpL5QAExko/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
Posted by Ahmad Rifai on 2:22 AM in Pasang Sexy Social Bookmarking di Blogger | 4 comments
Tags: ,

Jangan Lupa Klik Tombol Like dan Shareya ... :-)

New Tutorial :
Pasang Sexy Social Bookmarking di Blogger

Tentang Admin

Hanya seorang blogger biasa yang ingin mencoba menulis apa saja yang bisa di tulis, baik seputar tutorial blog, blogger template, dsb.

Berlangganan via RSS Feed

Mau baca artikel terbaru langsung di Email kamu? Silahkan masukan alamat email kamu untuk berlangganan artikel baru. (GRATIS!!!)

Jangan lupa konfirmasi di Email Kamu.

Jasa Redesign Template Blogger

Apa Pendapat Kamu

Tinggalkan komentar teman, dan apabila ada kesalahan dalam penulisan artikel Pasang Sexy Social Bookmarking di Blogger silakan di betulkan ya. Tapi mohon jangan memberi komentar spam, atau komentar beserta link. Kecuali pada halaman Tukar Link maka kamu boleh meninggalkan alamat blog (tapi bukan link yang bisa di klik ya).
Contoh : http://blog.ahmadrifai.net bukan http://blog.ahmadrifai.net

4 comments

  1. Rony
    January 13, 2011 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

    Reply
  2. Ahmad Rifai
    October 31, 2011 8:01 PM

    Makasih mas Rony atas komentarnya.

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

    Reply
  3. discoverbramasta
    December 30, 2011 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

    Reply
  4. Ahmad Rifai
    December 30, 2011 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

    Reply

Leave a Reply

Newer Post Older Post Home