Eng ... Ing ..... Eng ......... Jreeeeeeeeeeng ....
Ehm...ehmm ... nah posting kali ini mantep juga kajiannya loh, yaitu tentang cara memasang widget yang lumayan unik yang bisa memperindah blog kita, yaitu widget Sharing is Sexy atau Sharing Is Caring ... Contohnya yang dibawah posting ini, tuh...iconnya ngumpet, kalo dicolok pake ujung mouse dia muncul, unikkan ?? !!!
Nah dibagi deh caranya ya ...
Kamu login dulu ke akun kamu.
Lalu kamu pilih Rancangan
Masuk ke Edit HTML
Jangan lupa centang expand widget-nya
Cari kode ]]></b:skin> :
letakkan kode dibawah ini diatas kode ]]></b:skin> :
codenya :
div.beauty-bookmarks {
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFZqfgh-MYjIfnIN7MOXnK3621t5QWwLPGp8y9pz1XNjcuQK-J4MsvE3hwTPN_wEHH3omnAXgfSlf8ye7XNr4k9gRV_4UHxdQgyC_jKgUk_iOO5YzxF_VonpvXxJW7Uc_xgIhJLmjn_iBT/') 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/AVvXsEiFZqfgh-MYjIfnIN7MOXnK3621t5QWwLPGp8y9pz1XNjcuQK-J4MsvE3hwTPN_wEHH3omnAXgfSlf8ye7XNr4k9gRV_4UHxdQgyC_jKgUk_iOO5YzxF_VonpvXxJW7Uc_xgIhJLmjn_iBT/') 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/AVvXsEhX3BfyKc03ECfwqcXrmk9LCRc6vpJX9dmVnKKDCN1Ta9u8gn3XTr8DXXVy-bHxU9fDT_zIMOQnuqhD7YtAGSQ_Q2fPXevCMIxJ1DhJHxvPIFJEK9fFu_Oyu2EX1McXCsvfeetN-tOKUBhQ/') 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;
}
Kode diatas hasil tulisannya nanti adalah Sharing Is Sexy, Nah kalo mau mengganti tulisan menjadi Sharing Is Caring ganti kode yang warna merah dengan kode Left Top dan Right Top
Lalu cari kode :
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if></p>
Lalu letakkan code, dibawah kode diatas
Codenya :
<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>
Sampai sini selesai...
Save templatenya
seperti biasa kayaknya sih... baca lalu .....
lewat deh tanpa jejak koment .... qiqiqiqiqiqi....
Ehm...ehmm ... nah posting kali ini mantep juga kajiannya loh, yaitu tentang cara memasang widget yang lumayan unik yang bisa memperindah blog kita, yaitu widget Sharing is Sexy atau Sharing Is Caring ... Contohnya yang dibawah posting ini, tuh...iconnya ngumpet, kalo dicolok pake ujung mouse dia muncul, unikkan ?? !!!
Nah dibagi deh caranya ya ...
Kamu login dulu ke akun kamu.
Lalu kamu pilih Rancangan
Masuk ke Edit HTML
Jangan lupa centang expand widget-nya
Cari kode ]]></b:skin> :
letakkan kode dibawah ini diatas kode ]]></b:skin> :
codenya :
div.beauty-bookmarks {
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFZqfgh-MYjIfnIN7MOXnK3621t5QWwLPGp8y9pz1XNjcuQK-J4MsvE3hwTPN_wEHH3omnAXgfSlf8ye7XNr4k9gRV_4UHxdQgyC_jKgUk_iOO5YzxF_VonpvXxJW7Uc_xgIhJLmjn_iBT/') 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/AVvXsEiFZqfgh-MYjIfnIN7MOXnK3621t5QWwLPGp8y9pz1XNjcuQK-J4MsvE3hwTPN_wEHH3omnAXgfSlf8ye7XNr4k9gRV_4UHxdQgyC_jKgUk_iOO5YzxF_VonpvXxJW7Uc_xgIhJLmjn_iBT/') 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/AVvXsEhX3BfyKc03ECfwqcXrmk9LCRc6vpJX9dmVnKKDCN1Ta9u8gn3XTr8DXXVy-bHxU9fDT_zIMOQnuqhD7YtAGSQ_Q2fPXevCMIxJ1DhJHxvPIFJEK9fFu_Oyu2EX1McXCsvfeetN-tOKUBhQ/') 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;
}
Kode diatas hasil tulisannya nanti adalah Sharing Is Sexy, Nah kalo mau mengganti tulisan menjadi Sharing Is Caring ganti kode yang warna merah dengan kode Left Top dan Right Top
Lalu cari kode :
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if></p>
Lalu letakkan code, dibawah kode diatas
Codenya :
<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>
Sampai sini selesai...
Save templatenya
seperti biasa kayaknya sih... baca lalu .....
lewat deh tanpa jejak koment .... qiqiqiqiqiqi....
1 komentar:
Mas... Saya lihat scriptnya itu panjang banget... Apa saat nanti dipasang tidak memberatkan blog? Trims
:18 :19 :20 :21 :22 :23 :24 :25
:26 :27 :28 :29 :30 :31 :32 :33
:34 :35 :36 :37 :38 :39
Posting Komentar
Tinggalkan pesan anda disini :