Membuat Sharing is Sexy di Blog

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 Ctrl+F 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/AVvXsEhDsZoJz3h45dlHDc06gGu_ISdUJeX2Ani_XciPzhmoR3-5R0rVzLN-qSqbjpfAZGpVXwlIXrrtLgolDg1GfHO3Yrvci3kWBc3BjQwvUpi0Q4GeLgm2k2ojPetBwRB59PSBg1ckAK8JBEix/') 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/AVvXsEhDsZoJz3h45dlHDc06gGu_ISdUJeX2Ani_XciPzhmoR3-5R0rVzLN-qSqbjpfAZGpVXwlIXrrtLgolDg1GfHO3Yrvci3kWBc3BjQwvUpi0Q4GeLgm2k2ojPetBwRB59PSBg1ckAK8JBEix/') 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/AVvXsEhCLadIBNs_VUB5p0SbSWgAwyeZb9RhHrQJlRCLEsC6eIL3L6eHLAYdEngXTeX8QlXr_XJzRlxfpby9v6luXvEOlT2FLmJojOBMLDOEoh1CsQ6KIYGm_d8KRZlTcHT1lXYEqMMCDKX1xERg/') 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'>

<li class='beauty-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>


<li class='beauty-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>


<li class='beauty-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>


<li class='beauty-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>


<li class='beauty-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>


<li class='beauty-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>


<li class='beauty-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>


<li class='beauty-twitter'><a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'/></li>


<li class='beauty-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

</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:


<li class='beauty-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
Kalau sudah simpan template anda...Selesai

PERLU DIINGAT

Bagi pengguna "Read More" kode <data:post.body/> pasti ada 2 buah, maka letakanlah kode diatas dibawah kode yang kedua.

4 komentar:

Friends Blog

Sponsor

Statistik