Memasang Social Bookmark ( sharing is sexy! ) di bawah post.


Social Bookmark  dibina untuk pengguna internet untuk menyimpan, menyusun, mencari dan mengawal bookmark di internet dengan bantuan metadata. Ramai pembangun web social bookmark menggunakan alamat feed untuk mengklafikasikan bookmark, termasuk yang telah disusun dengan tag.

Untuk memasang Social Bookmark (sharing is sexy!) seperti yang boleh anda lihat di sini,sila ikut beberapa langkah yang ditunjukkan dibawah.

p/s:
1. Social bookmark ini hanya sesuai untuk template yang lebar bahagian postingnya 400px ke atas sahaja.
2.Save dahulu script template sebagai backup.


Langkah 1

Log in blog => Dashboard => Layout => Edit HTML. Seterusnya tick pada kotak Expand Widget Templates.


Langkah 2

Dengan menggunakan keyboard, tekan Ctrl+F. Seterusnya, taipkan atau salin kod ]]></b:skin> pada ruang Find dan tekan Enter.


Langkah 3

Salin kod berwarna biru di bawah dan paste di bawah atau selepas kod ]]></b:skin>

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url(http://i43.tinypic.com/2ueii3t.png;) no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(http://i43.tinypic.com/2ueii3t.png;) no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-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.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url(http://i44.tinypic.com/1znbj83.png;) no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

</style>

Langkah 4

Salin atau taipkan kod <data:post.body/> pada ruang Find dan tekan Enter.


Langkah 5

Salin kod berwarna merah di bawah dan paste di bawah atau selepas kod <data:post.body/> . Edit teks YOUR-FEEDBURNER-ID yang di bold kepada ID Feedburner anda.

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-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='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

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

</ul>
<span class='sexy-rightside'/></div>

Akhir sekali, klik preview dan jika tiada mesej Error yang terpapar, klik saja Save.
Memasang Social Bookmark ( sharing is sexy! ) di bawah post.

tq bro. m camne nak wat yg orang view plak? heee

@fiD

Yang orang view? Yang mana tu.

MAK AIIIIIIII.... pjgnya tutorial ni. uhukkk.... cik jah kena baca slow2 ni.
nak wat kena r pakai blog lain ni.
cik jah testing2 dulu. x dpt. hehehehe.... cikgu nes.... siapkan jawapan byk2 erk. manalah dpt pic tu. ahaksss

p/s:
1. Social bookmark ini hanya sesuai untuk template yang lebar bahagian postingnya 400px ke atas sahaja.

cikgu nes... klu kita nak pastikan lebar template kite nak tekan ctrl+f (hehehe...nak taip pe)

@RedzaLiza

Biasanya kod #main-wrapper {

ID FEEDBURNER tu ape?

@Along25

Feedburner tu lebih kurang macam RSS Feed blogspot.

bagus ni. tapi aku tak sure.. blog aku bleh letak ke kat posting area tu.

@Fyzal

~Muat gua rasa. Lebar postnya besar jugak tu.Gua dah check. width main-wrapper nya 582px

bro cmne nk wat ID FEEDBURNER??

@mIsTa aLeH

Daftar sini www.feedburner.com

erk...xberjaya pun bro?? huhuh

ke kena register FEED BURNER dulu?

knp saye buat x jadi ape ape pun

en nes...camne nak buat icon untuk share ke facebook tu??

thank u very much tuan Nes...akhirnya berjaya juga saya letak benda ni di blog...AMAT MEMUASKAN

Ada ker cara untuk just buat untuk entry tu bila baca entry itu penuh ?

salam nes... saya tak faham la macam mana book mark ni membantu kita.. boleh tolong terangkan sikit tak?

thanks..dah wat dah tp nak buang icon yang x guna tu...mcm mana ni?