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.


{ 17 comments.. read them below or add one }

fiD fiD 11:16 PM
tq bro. m camne nak wat yg orang view plak? heee
Nescafe ais Nescafe ais 11:34 PM
@fiD

Yang orang view? Yang mana tu.
RedzaLiza RedzaLiza 12:43 AM
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)
Nescafe ais Nescafe ais 1:13 AM
@RedzaLiza

Biasanya kod #main-wrapper {
Along25 Along25 9:51 AM
ID FEEDBURNER tu ape?
Nescafe ais Nescafe ais 3:10 PM
@Along25

Feedburner tu lebih kurang macam RSS Feed blogspot.
Fyzal Fyzal 4:16 PM
bagus ni. tapi aku tak sure.. blog aku bleh letak ke kat posting area tu.
Nescafe ais Nescafe ais 4:36 PM
@Fyzal

~Muat gua rasa. Lebar postnya besar jugak tu.Gua dah check. width main-wrapper nya 582px
mIsTa aLeH mIsTa aLeH 1:36 PM
bro cmne nk wat ID FEEDBURNER??
Nescafe ais Nescafe ais 1:54 PM
@mIsTa aLeH

Daftar sini www.feedburner.com
DaHLia DaHLia 9:16 PM
erk...xberjaya pun bro?? huhuh

ke kena register FEED BURNER dulu?
Fathurrahman b. Alias Fathurrahman b. Alias 2:08 PM
knp saye buat x jadi ape ape pun
Hafizi Hafizi 9:59 AM
en nes...camne nak buat icon untuk share ke facebook tu??
REMEDY REMEDY 4:19 AM
thank u very much tuan Nes...akhirnya berjaya juga saya letak benda ni di blog...AMAT MEMUASKAN
Sakira Sakira 1:49 AM
Ada ker cara untuk just buat untuk entry tu bila baca entry itu penuh ?
amry amry 11:06 PM
salam nes... saya tak faham la macam mana book mark ni membantu kita.. boleh tolong terangkan sikit tak?
umie umie 3:04 PM
thanks..dah wat dah tp nak buang icon yang x guna tu...mcm mana ni?