Jumat, 04 Maret 2011
Memasang Widget Sharing Is Sexy di Posting Blog
Sharing is sexy adalah salah satu widget social bookmarking yang disediakan untuk memberi kemudahan bagi pemilik blog maupun pengunjung dalan mensubmit atau membookmark artikel yang ia sukai ke situs social bookmarking hanya dengan mengklik pada icon-icon social bookmarking yang ada.
Keunikan dari widget sharing is sexy adalah icon-icon social bookmarking yang terdapat didalamnya bisa bergerak ketika disorot mouse sehingga terlihat lebih hidup dan menarik. Untuk lebih jelasnya, silahkan lihat disini. Mengenai cara memasang widget social bookmarking sebenarnya sudah pernah saya bahas di blog ini hanya saja cara pemasangan widget sharing is sexy ini sedikit berbeda. Oleh karena itu, pada postingan ini saya akan menjelaskan bagaimana cara memasang widget sharing is sexy di posting blogger/ blogspot.
Bagi anda yang tertarik, silahkan ikuti langkah-langkah dibawah ini:
1. Login ke blogger dengan akun anda, lalu masuk ke menu Design >> Edit HTML.
2. Beri centang pada ‘Expand Widget Templates’
3. Letakkan kode berikut diatas ]]></b:skin>
2. Beri centang pada ‘Expand Widget Templates’
3. Letakkan kode berikut diatas ]]></b:skin>
div.beauty-bookmarks {
height:54px;
background:url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMHFUIooU0hlQ_pzry6rzM5nOP8D3zO9l-vuAuCOFPDMAFwh5Y-V2wdG-l_ZfJOiQiAF8GKwcOLry4Z8HHRMoqqSTr9kgsUZpQ_7d-wEc4E5NbdUrr608xk_tSasPg5eOQC5en-aer-_f5//’) no-repeat left bottom;
position:relative;
width:455px;
}
div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMHFUIooU0hlQ_pzry6rzM5nOP8D3zO9l-vuAuCOFPDMAFwh5Y-V2wdG-l_ZfJOiQiAF8GKwcOLry4Z8HHRMoqqSTr9kgsUZpQ_7d-wEc4E5NbdUrr608xk_tSasPg5eOQC5en-aer-_f5//’) no-repeat right bottom;
position:absolute;
right:-17px;
}
div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}
div.beauty-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.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}
.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover {
background:url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibEo4I094g4vf6qc9iqNXlUBxFIUF5AEH3dwByBOGQ67uaBr3tQ4JUhcs1phETXTUB6h-pZbgP5S7Ho2Mld_EiUxhpGP9LjyH1Q532xOBQIKCd_0n2GT11uw6-qhWybnJkXI_5bnGLFFQy//’) no-repeat !important;
}
.beauty-furl {
background-position:-300px top !important;
}
.beauty-furl:hover {
background-position:-300px bottom !important;
}
.beauty-digg {
background-position:-500px top !important;
}
.beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;
}
.beauty-stumble {
background-position:-50px top !important;
}
.beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;
}
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;
}
.beauty-facebook {
background-position:-450px top !important;
}
.beauty-facebook:hover {
background-position:-450px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;
}
.beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;
}
.beauty-designfloat:hover {
background-position:-550px bottom !important;
}
NB:
Jika anda ingin mengganti tulisan ‘Sharing is sexy’ menjadi ‘Sharing is caring’ maka ganti left bottom dan right bottom menjadi left top dan right top
Jika anda ingin mengganti tulisan ‘Sharing is sexy’ menjadi ‘Sharing is caring’ maka ganti left bottom dan right bottom menjadi left top dan right top
4. Setelah itu cari <data:post.body/>
5. Letakkan kode berikut dibawahnya
5. Letakkan kode berikut dibawahnya
<b:if cond=’data:blog.pageType == “item”‘>
<div class=’beauty-bookmarks’>
<ul class=’socials’>
<!– delicious start–>
<li class=’beauty-delicious’><a expr:href=’"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– delicious end–>
<!– digg start–>
<li class=’beauty-digg’><a expr:href=’" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– digg end–>
<!– technorati start–>
<li class=’beauty-technorati’><a expr:href=’" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– technorati end–>
<!– reddit start–>
<li class=’beauty-reddit’><a expr:href=’" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– reddit end–>
<!– Stumbleupon start–>
<li class=’beauty-stumble’><a expr:href=’" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– Stumbleupon end–>
<!– designfloat start–>
<li class=’beauty-designfloat’><a expr:href=’"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– designfloat end–>
<!– facebook start–>
<li class=’beauty-facebook’><a expr:href=’" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– facebook end–>
<!– twitter start–>
<li class=’beauty-twitter’><a expr:href=’"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url’ target=’_blank’/></li>
<!– twitter end–>
<!– furl start–>
<li class=’beauty-furl’><a expr:href=’" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– furl end–>
</ul>
<span class=’beauty-rightside’/>
</div>
</b:if>
Jika ada situs social bookmarking tertentu yang tidak ingin anda gunakan maka hapus saja kodenya. Contoh anda tidak ingin memasang Facebook maka hapus kode seperti ini:
<!– facebook start–><li class=’beauty-facebook’><a expr:href=’" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li><!– facebook end–>
6. Kalau sudah simpan template anda. Selesai
Itu tadi tutorial hari ini, jika anda ingin memasang social bookmark melayang di blog bisa dilihat disini. Selamat mencoba dan semoga bermanfaat.
Label:
tutorial blog