Sunday, May 9, 2010

Bagaimana untuk letakkan sharing is sexy/carring widget kedalam blog anda

Seperti anda lihat di setiap post saya , ada AutoHiding Social Bookmarking widget yang sangat sexy~ Ini adalah langah-langkah untuk mendapatkanya di blog anda

Screen-Shot:



Step 1:

Log in ke Blogger, go to Layout -> Edit HTML dan klik "Expand Widget Templates" box. (jangan lupa backup template anda )






Step 2:

Sekarang cari (CTRL+F) kod dibawah:

</head>
dan letakkan dibawahnya , paste code ini:

<!--HIDDEN-BOOKMARKS-STARTS-->

<style type='text/css'>

div.beauty-bookmarks {


height:54px;

background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;

position:relative;

width:540px;

}

div.beauty-bookmarks span.beauty-rightside {

width:17px;

height:54px;


background:url('http://i43.tinypic.com/2ueii3t.png') 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-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {

background:url('http://i44.tinypic.com/1znbj83.png') 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-yahoo {


background-position:-650px top !important;

}

.beauty-yahoo:hover {

background-position:-650px bottom !important;

}

.beauty-blinklist {

background-position:-600px top !important;

}

.beauty-blinklist:hover {


background-position:-600px bottom !important;

}

.beauty-technorati {

background-position:-700px top !important;

}

.beauty-technorati:hover {

background-position:-700px bottom !important;

}

.beauty-myspace {


background-position:-200px top !important;

}

.beauty-myspace:hover {

background-position:-200px 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-mixx {


background-position:-250px top !important;

}

.beauty-mixx:hover {

background-position:-250px 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;

}

.beauty-syndicate {


background-position:-150px top !important;

}

.beauty-syndicate:hover {

background-position:-150px bottom !important;

}

.beauty-email {

background-position:-753px top !important;

}

.beauty-email:hover {


background-position:-753px bottom !important;

}

</style>

<!--HIDDEN-BOOKMARKS-STOPS-->


Step 3:

Dan cari code ini:

<data:post.body/>
dan dibawah/selepasnya, paste code ini:


<b:if cond='data:blog.pageType == "item"'>

<div class='beauty-bookmarks'>

<ul class='socials'>

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


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

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


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

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


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

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


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

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


<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/akasiamaya' title='Subscribe to RSS'/></li>

<li class='beauty-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>


</ul>

<span class='beauty-rightside'/></div>

</b:if>
Jangan lupa tukarkan  feedburner account anda...



Dan savekan template anda

http://www.mylivesignature.com/signatures/54488/162/6F71D6FB7061EEB51D959E317423ADA8.png
Jangan lupa jika artikel ini menarik sila kongsi bersama rakan anda

---