Blog Tutorial:AutoHiding Social Bookmarking ~ fitri1986

Blog Tutorial:AutoHiding Social Bookmarking

Tengok DEMO ni untk melihat Auto Hiding Social Bookmarking

Kalau korang nak letak kat blog korang ikut langkah ni

Langkah 1:

Log in ke Blogger, pergi ke Layout/Design -> Edit HTML dan tandakan pada kotak "Expand Widget Templates".

Langkah 2:

Cari (CTRL+F) kod ni

</head>

Dan SEBELUM/DI ATAS kod tersebut,pastekan kod ni pula

<style type='text/css'>
div.beauty-bookmarks {
height:54px;
background:url('http://i52.tinypic.com/sxd4e8.jpg') no-repeat left bottom;
position:relative;
width:540px;
}

div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('http://i52.tinypic.com/sxd4e8.jpg') 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://i51.tinypic.com/2nw02f4.jpg') 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>

NOTA KEPALA LUTUT:Untuk ubah perkataan "Sharing Is Sexy" kepada "Sharing Is Caring",ubah kod yang kaler biru camni:

Ubahkan perkataan kod yang kaler biru iaitu left bottom dan right bottom kepada left top dan right top.

Langkah 3:

Sekarang cari kod ni pula:

<data:post.body/>

Dan kat BAWAH/SELEPAS kod tu,pastekan kod ni:

<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>
<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/#' title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div>
</b:if>

Korang boleh alihkan memana kod butang yang korang tak nak

Ok,save template,siap.

4 ulasan

zaL_cdpx

Selasa, Oktober 19, 2010 10:21:00 PG

dh bt tp xder... sdihnyer !!!!

Aideal Fitri Admin

Selasa, Oktober 19, 2010 11:34:00 PG

@zaL_cdpxCuba awak check kat template,kod <data:post.body/> ada dua tak,kalau ada letakkan kod di langkah 3 kat bawah kod <data:post.body/> yang kedua.Harap Membantu^^

Shahizan Azmi

Selasa, November 23, 2010 1:11:00 PTG

oh jeeeeaah :D trimas. benda ni jadi x)

Tanpa Nama

Khamis, Disember 09, 2010 3:24:00 PTG

smart siaaaaaaaal.

Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.

fitri1986

Menu

About This Abandoned Blog

CHIT CHAT,SPAM,BLOGWALKING HERE

Click Ad To Support :).I want to buy burger....they are becoming really expensive recently.....

Senarai Blog Saya

Jom Buat Duit Online!!....Proceed at your own risk.........Even I`m not sure myself.......

Follo Molo (Become My Stalker And Ask Me To Stalk Back....I prefer a Yandere...)

18 Oktober 2010

Blog Tutorial:AutoHiding Social Bookmarking

4 ulasan

At the post page,this banner can be spin around ;)

Configure Labels