Memasang Tombol Berbagi di Blog. Sebenarnya sih saya kurang setuju dengan judul widget ini, soalnya mengandung kata Sexy yang mana kata ini identik dengan yang....%$%&%(*!@*). Tapi gimana ya berhubung para blogger-blogger senior juga memakai sebutan ini yaudah ikut aja deh...heeehee. Sedikit penjelasan tentang widget ini : 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.
Sekarang telah banyak blog yang menggunakan widget ini, contohnya di blog saya ini...heehee. Bagi anda yang tertarik dan ingin menambahkan di blog anda, silahkan ikuti langkah-langkah dibawah ini:
- Login ke akun blogger anda disini
- Pada halaman Dasbor klik Rancangan >> Edit HTML, jangan lupa untuk mencentang Expand Template Widget [Tips : download template anda terlebih dahulu, untuk mencegah apabila terjadi kesalahan saat modifikasi template]
- Kemudian anda cari kode ]]></b:skin> [tekan untuk mempermudah pencarian kode], apabila sudah ketemu silahkan sedulur copy kode dibawah ini dan taruh tepat diatas kode tadi
div.beauty-bookmarks {
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWGmVNjal_bPOk1eENGWOjZSQJfmnriHURJ1SjGdIrM7NryL0fuldZJ9ccKbsVmyCtV_Z-3U8gdld6VcHPHO7s4jYhN-wkxohwoamhGI5EML7l-z9FWyK6k5v40WO-umLgdxM7OIpeFKDL/') 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/AVvXsEiWGmVNjal_bPOk1eENGWOjZSQJfmnriHURJ1SjGdIrM7NryL0fuldZJ9ccKbsVmyCtV_Z-3U8gdld6VcHPHO7s4jYhN-wkxohwoamhGI5EML7l-z9FWyK6k5v40WO-umLgdxM7OIpeFKDL/') 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/AVvXsEgOUaYH2pucG-glWxVzK6DeXulMv1IFSF5wrAY0mNSIEORMhUMVRjPFD-tLcDrOXeRZxibbTv5dWhIA1-4kiJww78jr0po6T1lnzIsXf_XGLsbGCJsuHf4-SXJc8B_OEp4dfZLx69oGoA8b/') 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
- Setelah itu cari kode <data:post.body/> kemudian copy kode dibawah ini dan taruh tepat dibawah kode <data:post.body/>
<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>
NB : 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--> - Kalau sudah simpan template anda...Selesai
SELAMAT ANDA MENDAPATKAN SALAH SATU STILISH BLOGGER AWARD, SILAKAN DICEK LINKNYA SOB.
BalasHapushttp://www.bagollum.com/2011/03/stilish-blogger-award-dari-lora-malunk.html
Manta mas tutorial pasang widget sharing is sexy nya..makasih telah berbagi. Salam :)
BalasHapusKeren tutorialnya,..
BalasHapusIjin coba, ya...