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
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
Setelah kode css sexy bookmark tersebut sudah di pasang anda boleh menyimpannya dulu atau langsung psang script sexy bookmarknya.<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn_Hb4hO6sUedydbmGFUV7eSXCRChTMaaVoNWRx2uUZZH-kN8jW6IlwodJciKYrK-n99SgqAhpkdz1pUjuq6gBgQ5Yfz2Hcw6SjXVOk67iXkeUVMMUcx5f8pUk9ERBIGaDrhkEiNBCW0Q/s1600/bokmark2.png') 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg3U3-uX7Gcxwc4th8wxRpszd3WDZXbpEV5ANyK4Bkt56MnvXg9J9dl3utisecMUAsNVtzQrTIeOqRhhSESSc6RRB_ru2SWZ-sLT5kEUvq_SGHBk67wnYxaZWtwYRPtaEj0h3ArwLNnmE/s1600/bokmark1') 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg3U3-uX7Gcxwc4th8wxRpszd3WDZXbpEV5ANyK4Bkt56MnvXg9J9dl3utisecMUAsNVtzQrTIeOqRhhSESSc6RRB_ru2SWZ-sLT5kEUvq_SGHBk67wnYxaZWtwYRPtaEj0h3ArwLNnmE/s1600/bokmark1') 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>
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
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.<b:if cond='data:blog.pageType == "item"'><div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:alt='data:post.title' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:alt='data:post.title' expr:href='" http://digg.com/submit?url=" + data:post.url +"&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:alt='data:post.title' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:alt='data:post.title' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:alt='data:post.title' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:alt='data:post.title' expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:alt='data:post.title' expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:alt='data:post.title' expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-email'><a expr:alt='data:post.title' expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='sexy-rightside'/></div></b:if>
Update 3 Februari 2012
Silakan gunakan script yang baru, scrip yang baru akan saya terbitkan besok tgl 4 Februari 2012
No comments:
Write comments