love beloG

kotak mesej beranimasi

2010-12-19T22:18:00.000-08:00

TUTORIAL FOR BLOG

Dashboard pilih Design >Page Elements
Kemudian pilih Add Gadget--->>HTML/JAVASCRIPT

Copy and paste kod di bawah dalam kotak HTML

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

<style>

#info{

border: 1px solid;

margin: 10px 0px;

padding:15px 10px 15px 50px;

background-repeat: no-repeat;

background-position: 10px center;

position:relative;

color: #B22222;

background-color: #F0E68C;

background-image: url('http://i208.photobucket.com/albums/bb138/robbie_9000/little%20stuff/icon_warning_32x.gif');

}

</style><script src="http://code.jquery.com/jquery-1.2.3.min.js" type="text/javascript">

</script>

$(document).ready(function(){

$(".close").click(function(){

$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});

});

$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)

.fadeOut(400).fadeIn(400);

});

</script>

<center><b>Mesej:</b> - WELCOME TO MY SAJE SAJE BLOG.<br />Klik pangkah untuk memadam mesej</center></div>

</b:if>

...............

kod biru : url image anda

kod merah : mesej anda

then 'SAVE'

................................................

info :

meletak mesej di bawah tajuk post

Masuk ke dashboard dan pilih Design seterusnya Edit HTML

klik Expend Widget Template

cari kod seperti di bawah

lebih mudah gunakan "Ctrl + F "

dan paste kan kod tadi di bawah nya.

SELAMAT MENCUBA

cara meletak cute icon sebelah komen

2010-12-19T21:28:00.000-08:00

TUTORIAL FOR BLOG

Masuk ke dashboard dan pilih Design seterusnya Edit HTML

klik Expend Widget Template

cari kod seperti di bawah

lebih mudah gunakan "Ctrl + F "

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

tambah kod di bawah SELEPAS/ DI BAWAH kod tersebut

then ' save template '

done

cara mendapat kan url icon anda

klik sini

SELAMAT MENCUBA

buat link membesar apabila di sentuh

2010-12-19T21:17:00.000-08:00

TUTORIAL FOR BLOG

penerangan : teks akan membesar apabila mouse menyentuh link tersebut

Masuk ke dashboard dan pilih Design seterusnya Edit HTML

cari kod di bawah

a: hover {

color: $mainVisitedLinkColor;

text-decoration:none;

}

lebih mudah gunakan "Ctrl + F "

a: hover {

tambah kod berwarna merah ke dalam kod tersebut

a: hover {

color: $mainVisitedLinkColor;

text-decoration:none;

font-size: 150%

}

..........

kod yang berwarna merah boleh di ubah mengikut kehendak.

then ' save template '

SELAMAT MENCUBA

DONE

memasang fungsi read more

2010-12-19T21:06:00.000-08:00

TUTORIAL FOR BLOG

Masuk ke dashboard dan pilih Design seterusnya Edit HTML

klik Expend Widget Template

cari kod seperti di bawah

lebih mudah gunakan "Ctrl + F "

</head>

Pastekan kod dibawah ni DI ATAS/SEBELUM kod di atas

Cari kod <data:post.body/>

Gantikan kod <data:post.body/> dengan kod dibawah ni

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read More >></b></a></span>
</b:if>

then 'save template'

SELAMAT MENCUBA

meletak icon pada tajuk post

2010-12-19T20:57:00.000-08:00

TUTORIAL FOR BLOG

Masuk ke dashboard dan pilih Design seterusnya Edit HTML

klik Expend Widget Template

cari kod seperti di bawah

lebih mudah gunakan "Ctrl + F "

<b:if cond=" 'data.post.url' ">

anda akan melihat kod seperti ini

<b:if cond="'data:post.url'"><a href="'data:post.url'"><data:post.title/></a>

tambahkan kod di bawah di ANTARA kod

<b:if cond="'data:post.url'"> dan <a href="'data:post.url'"><data:post.title/></a>

seperti ini :

<b:if cond="'data:post.url'">

.......

cara mendapatkan url image/icon

klik sini

SELAMAT MENCUBA

DONE

cara menghilangkan tarikh atau postdate

2010-12-11T16:04:00.000-08:00

TUTORIAL FOR BLOG

Masuk ke dashboard dan pilih Design seterusnya Edit HTML

klik Expend Widget Template

cari kod seperti di bawah

lebih mudah gunakan "Ctrl + F "

h2.date-header {

atau

.date-header {

tambahkan kod di bawah SELEPAS/DIBAWAH kod di atas

visibility: hidden;

contoh seperti di bawah

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80%;
color:#777;
height: 0px;
visibility: hidden;
}

Preview and then " Save Template "

SELAMAT MENCUBA

meletakkan background pada blockquote

2010-12-10T20:38:00.000-08:00

TUTORIAL FOR BLOG

Masuk ke dashboard dan pilih Design seterusnya Edit HTML

klik Expend Widget Template

cari kod seperti di bawah

lebih mudah gunakan "Ctrl + F "

.post blockquote {

anda akan nampak kod seperti ini

.post blockquote {

margin:1em 20px;

}

gantikan kepada

post blockquote {

background: url(URL BACKGROUND ANDA) ;

-moz-border-radius-topleft: 10px;

-moz-border-radius-bottomright: 10px;

padding: 6px;

Border: 1px dashed #000000;

margin:1em 20px;

}

Then , "Save"

........

cara mendapatkan url background/image

klik here

SELAMAT MENCUBA

top navigation menu like mine

2010-12-10T20:00:00.000-08:00

TUTORIAL FOR BLOG

Masuk ke dashboard dan pilih Design seterusnya Edit HTML

klik Expend Widget Template

cari kod seperti di bawah

lebih mudah gunakan "Ctrl + F "

]]></b:skin>

copy dan paste kod di bawah SEBELUM / DI ATAS kod di atas

/**************MENU HEADER*************************/
/*Credits: By Mohd Artarmizi (http://mymijie.blogspot.com) */
/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */
.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/menub_bg.gif) repeat-x;
width: 945px;
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/menub_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{< color: #fff; background: url(http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}

Next Step,

Save template anda dan pergi ke

Dashboard, Layout >> Page Elements >>Dan pilih Add HTML/JavaScript

letakkan di atas kawasan catatan blog/blog post

paste kan kod di bawah di dalam kotak HTML/JavaScript tersebut

<ul class='glossymenu'>
<li class='current'><a href='Masukkan Link Disini'><b>NAMA MENU</b></a></li>
<li><a href='Masukkan Link Disini'><b>NAMA MENU</b></a></li>
<li><a href='Masukkan Link Disini'><b>NAMA MENU</b></a></li>
</ul>

kod_url --> link kan dengan URL anda

Menu --> gantikan dengan nama yang anda mahu

"Preview and Save"

DONE

SELAMAT MENCUBA

disable highlight text

2010-12-10T19:34:00.000-08:00

TUTORIAL FOR BLOG

Dashboard pilih Design >Page Elements
Kemudian pilih Add Gadget--->>HTML/JAVASCRIPT

Copy and paste kod di bawah dalam kotak HTML

<script type="text/javascript">
/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}

//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
<script type="text/javascript">
disableSelection(document.body) //disable text selection on entire body of page
</script>

Then "SAVE"

DONE

membuka link di new tab tanpa right klik

2010-12-10T19:27:00.000-08:00

TUTORIAL FOR BLOG

Dashboard pilih Design >Page Elements
Kemudian pilih Add Gadget--->>HTML/JAVASCRIPT

Copy and paste kod di bawah dalam kotak HTML

<script type="text/javascript" language="javascript">
       var arr = document.getElementsByTagName("a"); //get all links in the page
       for(var i = 0; i < arr.length; i++)
       {
          if(arr[i].href.indexOf("Your URL") < 0 //not links that are 'inside' blog
             && arr[i].href.indexOf("javascript:") < 0) //not javascript links
             arr[i].target = "_blank";
       }
    </script>

Then "SAVE"

SELAMAT MENCUBA

cara menukar background pada blog

2010-12-01T14:30:00.000-08:00

TUTORIAL FOR BLOG

Dashboard pilih Design >Page Elements
Kemudian pilih Add Gadget--->>HTML/JAVASCRIPT

Copy and paste kod di bawah dalam kotak HTML

<script type="text/javascript">
var background= new Array()
background="Masukkan URL background di sini"
document.write("<style>");
document.write("body {");
document.write(' background:url("' + background + '") repeat top center;');
document.write(" }");
document.write("</style>");
</script>

OK, Save.

DONE.

memasang Floating Button di sisi blog

2010-12-01T11:40:00.000-08:00

TUTORIAL FOR BLOG

Dashboard pilih Design >Page Elements
Kemudian pilih Add Gadget--->>HTML/JAVASCRIPT

Copy and paste kod di bawah dalam kotak HTML

............................................

info :

kod warna biru : url akaun anda

kod warna purple : url image icon

tukar kedudukan ( left / right )

saiz ( px )

Then " Save "

OK, DONE.

cursor bersalji / sparkling cursor

2010-11-29T20:04:00.000-08:00

TUTORIAL FOR BLOG

Masuk ke dashboard dan pilih Design seterusnya Edit HTML

klik Expend Widget Template

cari kod seperti di bawah

lebih mudah gunakan "Ctrl + F "

<head>

copy dan paste kod di bawah SEBELUM/DI ATAS kod diatas

<script type="text/javascript">
                </script>

<script type="text/javascript">
            // <![CDATA[
            var colour="red";
            var sparkles=100;
     
            var x=ox=400;
            var y=oy=300;
            var swide=800;
            var shigh=600;
            var sleft=sdown=0;
            var tiny=new Array();
            var star=new Array();
            var starv=new Array();
            var starx=new Array();
            var stary=new Array();
            var tinyx=new Array();
            var tinyy=new Array();
            var tinyv=new Array();
            window.onload=function() { if (document.getElementById) {
              var i, rats, rlef, rdow;
              for (var i=0; i<sparkles; i++) {
                var rats=createDiv(3, 3);
                rats.style.visibility="hidden";
                document.body.appendChild(tiny[i]=rats);
                starv[i]=0;
                tinyv[i]=0;
                var rats=createDiv(5, 5);
                rats.style.backgroundColor="transparent";
                rats.style.visibility="hidden";
                var rlef=createDiv(1, 5);
                var rdow=createDiv(5, 1);
                rats.appendChild(rlef);
                rats.appendChild(rdow);
                rlef.style.top="3px";
                rlef.style.left="0px";
                rdow.style.top="0px";
                rdow.style.left="3px";
                document.body.appendChild(star[i]=rats);
              }
              set_width();
              sparkle();
            }}
            function sparkle() {
              var c;
              if (x!=ox || y!=oy) {
                ox=x;
                oy=y;
                for (c=0; c<sparkles; c++) if (!starv[c]) {
                  star[c].style.left=(starx[c]=x)+"px";

                  star[c].style.top=(stary[c]=y)+"px";
                  star[c].style.clip="rect(0px, 5px, 5px, 0px)";
                  star[c].style.visibility="visible";
                  starv[c]=50;
                  break;
                }
              }
              for (c=0; c<sparkles; c++) {
                if (starv[c]) update_star(c);
                if (tinyv[c]) update_tiny(c);
              }
              setTimeout("sparkle()", 40);
            }
            function update_star(i) {
              if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
              if (starv[i]) {
                stary[i]+=1+Math.random()*3;
                if (stary[i]<shigh+sdown) {
                  star[i].style.top=stary[i]+"px";
                  starx[i]+=(i%5-2)/5;
                  star[i].style.left=starx[i]+"px";
                }
                else {
                  star[i].style.visibility="hidden";
                  starv[i]=0;
                  return;
                }

              }
              else {
                tinyv[i]=50;
                tiny[i].style.top=(tinyy[i]=stary[i])+"px";
                tiny[i].style.left=(tinyx[i]=starx[i])+"px";
                tiny[i].style.width="2px";
                tiny[i].style.height="2px";
                star[i].style.visibility="hidden";
                tiny[i].style.visibility="visible"
              }
            }
            function update_tiny(i) {
              if (--tinyv[i]==25) {
                tiny[i].style.width="1px";
                tiny[i].style.height="1px";
              }
              if (tinyv[i]) {
                tinyy[i]+=1+Math.random()*3;
                if (tinyy[i]<shigh+sdown) {
                  tiny[i].style.top=tinyy[i]+"px";
                  tinyx[i]+=(i%5-2)/5;
                  tiny[i].style.left=tinyx[i]+"px";
                }
                else {


                  tiny[i].style.visibility="hidden";
                  tinyv[i]=0;
                  return;
                }
              }
              else tiny[i].style.visibility="hidden";
            }
            document.onmousemove=mouse;
            function mouse(e) {
              set_scroll();
              y=(e)?e.pageY:event.y+sdown;
              x=(e)?e.pageX:event.x+sleft;
            }
            function set_scroll() {
              if (typeof(self.pageYOffset)=="number") {
                sdown=self.pageYOffset;
                sleft=self.pageXOffset;
              }
              else if (document.body.scrollTop || document.body.scrollLeft) {
                sdown=document.body.scrollTop;
                sleft=document.body.scrollLeft;
              }
              else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
                sleft=document.documentElement.scrollLeft;
             sdown=document.documentElement.scrollTop;
              }
              else {
                sdown=0;
                sleft=0;
              }
            }
            window.onresize=set_width;
            function set_width() {
              if (typeof(self.innerWidth)=="number") {
                swide=self.innerWidth;
                shigh=self.innerHeight;
              }
              else if (document.documentElement && document.documentElement.clientWidth) {
                swide=document.documentElement.clientWidth;
                shigh=document.documentElement.clientHeight;
              }
              else if (document.body.clientWidth) {
                swide=document.body.clientWidth;
                shigh=document.body.clientHeight;
              }
            }
            function createDiv(height, width) {
              var div=document.createElement("div");
              div.style.position="absolute";
              div.style.height=height+"px";
              div.style.width=width+"px";
              div.style.overflow="hidden";
              div.style.backgroundColor=colour;
              return (div);
            }
            // ]]>
            </script>

anda boleh menukar kod warna red ikut citarase anda

anda boleh mencari kod warna di HTML COLOR CODES

contoh :

var colour="red";

var colour="#FF99CC";

" Save Template "

SELAMAT MENCUBA

menbuat 3 columns di footer

2010-11-29T18:55:00.000-08:00

TUTORIAL FOR BLOG

Masuk ke dashboard dan pilih Design seterusnya Edit HTML

klik Expend Widget Template

cari kod seperti di bawah

lebih mudah gunakan "Ctrl + F "

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

copy dan paste kod di bawah dan GANTI kan pada kod berwarna coklat

.................................

.........................................................

in case kalo tidak jumpa

cuba cari kod di bawah

anda boleh menggunakan "Ctrl + F" untuk mudah cari

<div id=footer

..............

next,

kalo tiada error

cari kod di bawah pula

lebih mudah gunakan "Ctrl + F "

</b:skin>

dan paste kod di bawah SEBELUM/DI ATAS kod di atas

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

then, Save Template.

warning : pastikan anda backup template dulu

SELAMAT MENCUBA

memasang butang [show / hide]

2010-11-29T06:51:00.000-08:00

TUTORIAL FOR BLOG

menyembunyikan sebahagian teks pada blog.

sebahagian dari teks hanya kelihatan apabila anda menekan button

lebih kurang seperti button read more.

contoh : sile la klik butang di bawah

kod di bawah yang perlu anda gunakan
ubahsuai di Edit HTML tok posting :

teks yang anda ingin sembunyikan di sini

</div>

Show / Hide --> anda bole tukar kan perkataan dalam box ikut sesedap rasa

SELAMAT MENCUBA

memasang fungsi reply pada komen

2010-11-29T04:46:00.000-08:00

TUTORIAL FOR BLOG

Masuk ke dashboard dan pilih Design seterusnya Edit HTML

klik Expend Widget Template

cari kod seperti di bawah

lebih mudah gunakan "Ctrl + F "

<data:commentpostedbymsg>

copy dan paste kod di bawah SEBELUM / DI ATAS kod di atas

<span><a expr:href='"https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'>[Reply]</a></span>

.........................................

[Reply] --> boleh di ganti kan dengan perkataan atau image lain

YOUR-BLOG-ID --> ganti kan dengan blog ID anda

" Preview and Save "

SELAMAT MENCUBA

top navigation menu

2010-11-29T01:33:00.000-08:00

TUTORIAL FOR BLOG

Masuk ke dashboard dan pilih Design seterusnya Edit HTML

klik Expend Widget Template

cari kod seperti di bawah

lebih mudah gunakan "Ctrl + F "

</b:skin>

copy dan paste kod di bawah SEBELUM / DI ATAS kod di atas

/*Top Navigation Menu*/
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}

.basictab li a:visited{
color: #2d2b2b;
}

.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}

Save template anda dan pergi ke

Dashboard, Layout >> Page Elements >>Dan pilih Add HTML/JavaScript

letakkan di atas kawasan catatan blog/blog post

paste kan kod di bawah di dalam kotak HTML/JavaScript tersebut

kod_url --> link kan dengan URL anda

Menu --> gantikan dengan nama yang anda mahu

"Preview and Save"

SELAMAT MENCUBA

tajuk blog bergerak pada browser

2010-11-29T00:45:00.000-08:00

TUTORIAL FOR BLOG

cara letakkan efek skrol

atau menggerak kan tajuk blog pada browser

Masuk ke dashboard dan pilih Design seterusnya Edit HTML

klik Expend Widget Template

cari kod seperti di bawah

lebih mudah gunakan "Ctrl + F "

<head>

copy dan paste kod di bawah SEBELUM / DI ATAS kod di atas

"Preview dan Save"

SELAMAT MENCUBA

memasang pop up mesej

2010-11-24T21:30:00.000-08:00

TUTORIAL FOR BLOG

lebih mudah guna " Ctrl + F "

cari kod di bawah

</head>

copy dan paste kod di bawah

di ATAS/SEBELUM kod tersebut

Ini adalah Pop Up Mesej! >>> anda bole gantikan dengan mesej anda sendiri

SELAMAT MENCUBA

menjadikan link bertukar warna / rainbow

2010-11-24T17:06:00.000-08:00

TUTORIAL FOR BLOG

mahu kan link anda bertukar-tukar warna ( rainbow)
hanya bila cursor anda menyentuh link tersebut

Dashboard pilih Design >Page Elements
Kemudian pilih Add Gadget--->>HTML/JAVASCRIPT

Masukkan kod di bawah

and " SAVE "

DONE!

SELAMAT MENCUBA

cara menukar favicon blog

2010-11-24T01:29:00.000-08:00

TUTORIAL FOR BLOG

dan klik " Expend Widget Template "

lebih mudah guna " Ctrl + F "

cari kod di bawah

</head>

copy dan paste kod di bawah

di ATAS/SEBELUM kod tersebut

untuk mendapatkan favicon menarik

anda boleh lawati iconj.com

dapat kan kod yang di beri

dan paste SEBELUM kod ini
</head>

..................................................................................................

tips mendapatkan FAVICON URL :

-- cara 1 --

cara mendapatkan URL icon anda

(menggunakan image sendiri)

klik sini

--cara 2 --

menggunakan cute favicon sedia ada di photobucket

preview dulu ok sebelum save
backup juga template

SELAMAT MENCUBA

efek salji dalam blog

2010-11-24T00:45:00.000-08:00

TUTORIAL FOR BLOG

Dashboard pilih Design >Page Elements
Kemudian pilih Add Gadget--->>HTML/JAVASCRIPT

Masukkan kod di bawah

Then Save

DONE !

SELAMAT MENCUBA

cara mendapatkan Url image

2010-11-23T20:15:00.000-08:00

TUTORIAL FOR BLOG

cara mudah mendapatkan URL image anda

dan dapat kan Direct Link anda

www.photobucket.com

anda juga boleh menggunakan

tinypic

www.tinypic.com

SELAMAT MENCUBA

meletak autoHiding sosial bookmarking

2010-11-22T00:45:00.000-08:00

TUTORIAL FOR BLOG

mahu kan sosial boormark seperti ini di bawah entri anda

lets get start..

then '' Edit HTML '' dan klik " Expend Widget Template "

lebih mudah guna " Ctrl + F "

cari kod di bawah

</head>

copy dan paste kod di bawah

di ATAS/SEBELUM kod tersebut

<!--HIDDEN-BOOKMARKS-STARTS-->
<style type='text/css'>
div.beauty-bookmarks                                                                     {
height:54px;
background:url('http://i52.tinypic.com/sxd4e8.jpg') no-repeat left top;
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 top;
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>
<!--HIDDEN-BOOKMARKS-STOPS-->

dan sekarang , next

cari kod di bawah

lebih mudah gunakan " Ctrl + F "

<data:post.body/>

dan di BAWAH/SELEPAS kod tersebut

copy dan paste kan kod 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/#' 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>

warning : jangan lupa backup template anda dahulu

Anda bole " Preview " dan klik " Save Template "

ok, im DONE !

SELAMAT MENCUBA

meletak facebook share button

2010-11-21T20:25:00.000-08:00

TUTORIAL FOR BLOG

Perkara pertama anda perlu lakukan adalah

backup template anda atau Download Full Template

Masuk ke dashboard dan pilih Design seterusnya Edit HTML

klik Expend Widget Template

cari kod seperti di bawah
lebih mudah gunakan "Ctrl + F "

<data:post.body/>

then copy dan paste kod di bawah ini

selepas kod di atas ( <data:post.body/> )

<iframe
allowTransparency='true'
expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;
+ data:post.url +
&quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:550px; height:40px;'/>

info :

perkataan like boleh di ubah kepada perkataan lain.

font arial boleh di tukar ke font lain sprti lucida,Tahoma,verdana,trebuchet,lucida

terdapat tiga warna selain dari light iaitu evil dan dark

then, " Save Template"
DONE.

SELAMAT MENCUBA