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 == "item"'>Setelah kode css sexy bookmark tersebut sudah di pasang anda boleh menyimpannya dulu atau langsung pasang script sexy bookmarknya.
<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://img9.imageshack.us/img9/6769/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('http://img148.imageshack.us/img148/623/bokmark1.png') 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('http://img148.imageshack.us/img148/623/bokmark1.png') 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 tempat yang anda inginkan. Berikut script social bookmark yang harus di pasang
<b:if cond='data:blog.pageType == "item"'><div class='sexy-bookmarks'>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.
<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>
Mudah-mudahan bisa bermanfaat, dan mohon maaf jika ada yang kurang atau ada yang salah. Bagi teman-teman yang merasa ada yang salah atau ada yang kurang silahkan betulkan atau tambahkan melalui kolom komentar di bawah ini :) Sampai jumpa di posting Blogger Tutorial Bli Tyan berikutnya :) Selamat mencoba dan semoga berhasil.
Please subscribe, leave a comment, follow this blog and share this article with your friends and colleagues.
by: http://blityan.blogspot.com
0 comments:
Post a Comment