.:::. MSue RoomZ .:::.

Cara Pasang Top Pengomen Berawan

noreply@blogger.com (Sue) — Fri, 10 Dec 2010 05:09:00 +0000

Assalamualaikum , hari ini Msue nak kongsi ngan korang sume cara nak buat top pengomen berawan . bukan sahaja label yang boleh berbentuk awan malah top pengomen pun boleh dibuat menjadi berawan .

1. Login ke Blogspot .

2. Klik Design- Add a Gadget - Javascript/HTML .

3. Copy kod di bawah dan pastekan ke dalamnya .

<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='text-decoration:none;font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + " </a>";//clickable commentator name
display = display + ccLName;
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://msueroomz.blogspot.com
&Exclusions=Anonymous,Greenlava
&ShowHowMany=20
&Order=alphabet
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
</div>

4. Preview dan Save Template .

Note: Pada highlight merah tukarkan ngan url blog korang . Highlight biru adalah jumlah top komen yang korang nak pamerkan

Via - BloggerSentral

Cara Meletakkan Iklan Di Sebelah Kiri / Kanan Post

noreply@blogger.com (Sue) — Fri, 03 Dec 2010 04:28:00 +0000

Assamualaikum , Msue nak kongsi ngan korang sume bagaimana nak Letakkan Iklan Pada Sebelah Kiri / Kanan Di Ruangan Post

1. Login ke Blogspot .

2. Klik Design - Edit HTML(Tandakan pada Expand Widget)

3. Copy kod dibawah ini .

<div style='display:block;float:left;margin: 0px 10px 0px 0px;'>
KOD IKLAN ANDA DISINI
</div>

Note: Pada highlight biru adalah kedudukan iklan yang korang nak samada kiri atau kanan

4. Pastekan dibawahnya

5. Preview dan Save template .

Semudah Alif Ba Ta Menukar Favicon

noreply@blogger.com (Sue) — Fri, 03 Dec 2010 03:18:00 +0000

Assalamualaikum . . .Msue ingin berkongsi ngan korang yang sudi sahaja Bagaimana Nak Tukar Favicon Semudah Alif Ba Ta pada blog korang .

1. Korang kecilkan saiz imej yang korang nak buat sebagai favicon di sini --> Favicon Genarator

2. Upload gambar yang korang nak jadikan favicon dari komputer korang .

3. Klik Generate Favicon .

4. Klik Download Favicon .

5. Login ke Blogspot .

2. Klik Design - Edit HTML(Tandakan pada Expand Widget)

3. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .

]]></b:skin>

4 . Copy kod di bawah dan pastekan di bawahnya .

5. Preview dan Save Template jika tiada error .

Note : Pada highlight korang tukarkan ngan url favicon tadi .

Cara untuk mendapatkan url .

1. Klik posting .

2. Uplaod gambar favicon yang korang download tadi dan copy urlnya .

3. Pastekan pada highlight di atas tadi .

Cara Memasang Page Views Counter Pada Post

noreply@blogger.com (Sue) — Fri, 03 Dec 2010 03:02:00 +0000

Assalamualaikum , hari ini MSue ingin berkongsi sedikit ilmu ngan korang yang sudi , bagaimana cara memasang Page Views Counter Pada Post . Maksudnye korang leh tahu bape banyak orang yang da tengok atau view artikel yang korang terbitkan itu .

1. Login ke Blogspot seperti biasa .

2. Klik Design = Edit HTML(Tandakan pada kotak Expand Widget)

3. Cari kod di bawah (Gunakan CTRL F Untuk Memudahkan Korang Mencarinya)

4. Pastekan kod di bawah di bawah kod tersebut

<b:if cond='data:blog.pageType == "item"'>
<div id='hit-counter'>
<a href='http://csharpdotnetfreak.blogspot.com' rel='follow'>
<script src='http://www.amitjain.co.in/pageview.php' type='text/javascript'/> </a>
</div></b:if>

5. Preview dan Save Template .

6. Kalau xjumpa kod tersebut , korang cari kod di bawah ini dan pastekan dibawahnya.

7. Kalau xjumpa juga , korang cari kod dibawah ini pula dan pastekan dibawahnya .

<data:post.body/>

Membina Latar Belakang Berbeza Disetiap Posting/Artikel

noreply@blogger.com (Sue) — Fri, 03 Dec 2010 02:06:00 +0000

Assalamualaikum , tengahari ini Msue nak kongsi korang macam mana korang nak Membina Latar Belakang Berbeza Disetiap Posting/Artikel korang tanpa perlu menukar apa-apa kod, korang cuma perlu meletakkan kod dibawah untuk meletakkan imej atau warna yang dikehendaki.

Untuk background colour posting korang..pada hightlight merah korang tukar ngan kod warna korang kehendaki..Pada highlight biru adalah Text korang

<div style="background: #cccc00;">
TEXT KORANG KAT CINI
</div>

Untuk meletak background image pada posting korang..pada hightlight merah korang tukar ngan URL IMAGE korang kehendaki..Pada highlight biru adalah Text korang

<div style="background: url('URL IMAGE');">
TEXT KORANG KAT CINI
</div>

Selamat mencuba..

Cara Memindahkan Blog Lama Ke Blog Baru

noreply@blogger.com (Sue) — Fri, 03 Dec 2010 01:51:00 +0000

Assalamualaikum , Kali ini Msue ingin berkongsi ngan korang bagaimana cara untuk Memindahkan Blog Lama Ke Blog Baru Secara Automatik , korang mungkin tidak mahu kehilangan peminat di blog lama korang kan ? ? Jadi korang boleh gunakan tutorial ini .

1. Login ke Blogspot .

2. Klik Design - Edit HTML(Tandakan pada kotak Expand widget)

3. Cari kod di bawah(Gunakan Ctrl + F untuk mekudahkan korang mencarinya) .

<head>

4. Pastekan kod di bawah ini di bawah atau selepas kod tersebut .

5. Preview dan Save template .

Note: Pada highlight merah korang tukarkan dengan url blog baru korang yang korang ingin pindahkan .

Via - The Trick

Cara Memasang Link Direct To This Post Pada Bawah Post Blog

noreply@blogger.com (Sue) — Thu, 02 Dec 2010 07:22:00 +0000

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana nak pasang Link Direct To This Post . Ia juga mampu menaikan trafik blog korang .Jika artikel yang korang buat best , pengunjung blog korang boleh berkongsi dan juga menyimpan melalui copy link.

1. Login ke Blogspot .

2. Klik Design - Edit HTML(Tandakan pada Expand Widget)

3. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .


<data:post.body/>

4. Copy kod dibawah .


<b><hr color='#27729B'/><marquee align='center' direction='left' scrollamount='3' width='100%'>Copy Link Dibawah Jika Korang Berminat Dengan Tutorial <data:post.title/></marquee><hr color='#27729B'/></b><br/>
Link Directly To This Post :<br/>
<textarea cols='65' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea><br/>
Link To The Homepage :<br/>
<textarea cols='65' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:blog.homepageUrl/>&quot;&gt;<data:blog.title/>&lt;/a&gt;</textarea>

Note: Merah = Warna garisan atas dan bawah , biru = Ayat , Coklat = arahan marquee , Hijau = kelajuan marquee . Tukarkannya

5. Pastekan dibawahnya

6. Preview dan Save template .

Jika korang hanya nak pamerkan hanya pada title post dan disembunyikan pada homepage(halaman utama) , korang tengok di sini --> Sembunyikan Widget

Pasang Page Peel Di Blog Anda

noreply@blogger.com (Sue) — Thu, 02 Dec 2010 07:17:00 +0000

Assalamualaikum , petang yangpanas dan baik ini MSue ingin berkongsi ngan korang bagaimana Memasang Page Peel atau dengan bahasa mudah Muka Surat Selak pada bahagian atas penjuru blog korang .

1. Login ke Blogspot seperti biasa .

2. Klik Design - Edit HTML(Tandakan pada kotak Expand widget)

3. Cari kod di bawah (Gunakan Ctrl + F untuk memudahkan korang mencari)

]]></b:skin>

4. Pastekan kod di bawah ini di bawah kod tersebut

5. Cari kod ini di bawah ini pula .

<body>

6. Pastekan kod dibawah ini di bawah kod tersebut .

Note: Pada highlight biru tukarkan dengan image pilihan korang sendiri , highlight merah korang tukarkan dengan url pilihan korang .

Via - NescafeAis

Semudah ABC Membina Right Header

noreply@blogger.com (Sue) — Thu, 02 Dec 2010 06:51:00 +0000

Assalamualaikum , Hari ini Msue ingin berkongsi bagaimana hendak Membina Right Header Semudah ABC. Tujuannya korang boleh memasukkan apa - apa di dalam header . Ia akan membuatkan header korang lebih menarik berbanding biasa .
Header Yang Ada Follower didalamnya

1. Login ke Blogspot .

2. Klik Design - Edit HTML(Tandakan pada Expand Widget)

3. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

4. Tambahkan kod di bawah ini di dalamnya .

width: 300px;
float: left;

Ia akan jadi seperti ini

#header {
width: 300px;
float: left;
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Note:# header korang kene dikecilkan sedikit supaya ade ruang untuk right header yang korang nak letak . nilai width:300px korang boleh tentukan sendiri . float:left adalah kedudukan header korang yang asal.msue letakkannya dibahagian kiri

5. Copy kod di bawah dan pastekan di bawahnya (no. 3)

#rightheader {
margin: 5px;
width: 300px;
float: right;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

6. Cari kod di bawah ini .

7. Copy kod di bawah

<b:section class='header' id='rightheader' showaddelement='yes'>
</b:section>

8. Pastekannya seperti di bawah

Hasilnya seperti di bawah

Note: Korang boleh padamkam border: 1px solid $bordercolor; jika korang tidak mahu border pada #header dan juga #rightheader

Via - Muncet

Membina Reply Pada Komen

noreply@blogger.com (Sue) — Tue, 30 Nov 2010 07:44:00 +0000

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana nak buat Reply Pada Komen , ia berfungsi untuk korang balas komen seseorang yang komen di blog korang. Lepas dah siap korang buat reply to comment ini , Korang boleh gantikan reply to comment dengan image / icon disini Menukar Reply To Comment Kepada Image

1. Login ke Blogspot .

2. Klik Design - Edit HTML(Tandakan pada Expand Widget)

3. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .

<b:include data='comment' name='commentDeleteIcon'/>

4. Copy kod dibawah .

<span class='comment-reply'><a expr:href='"https://www.blogger.com/comment.g?blogID=BLOG ID KORANG&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=400,height=450"); return false;'>[Reply to comment]</a></span>

Note: Pada highlight , gantikan dengan Blog ID korang.

Cara Dapatkan Blog ID

5. Pastekan dibawahnya

6. Preview dan Save template .

Note: Pastikan komen korang berada pada bawah post . kalau popup memang xakan menjadi

Memasang Komen Facebook Ke Dalam Blog Post

noreply@blogger.com (Sue) — Tue, 30 Nov 2010 06:19:00 +0000

Assalamualaikum.Msue nak kongsi ngan korang bagaimana cara untuk memasang Komen Facebook ke dalam blog korang .

1. Bina ----> Aplikasi Facebook

2. Pada website pada membina aplikasi fabook tadi.Korang masukkan URL blog korang seperti contoh dibawah .

3. Copy API KEY dan pastekannya dimana - mana dahulu..apabila korang sudah siap membina aplikasi facebook.API KEY akan digunakan kemudian

4. Login ke Blogspot.

5. Klik Design - Edit HTML(Tandakan pada kotak Expand Widget)

6. Copy kod dibawah dan letakkannya seperti contoh dibawah

xmlns:fb='http://www.facebook.com/2008/fbml'

7. Cari kod dibawah

</body>

8. Copy kod dibawah

9. Pastekan diatas kod tersebut diatasnya .

Note : Pada highlight tukarkan dengan API KEY yang korang copy tadi

10. Preview dan save template jika tida error.

11. Klik Add a Gadget - HTML / Javascript.

12. Copy kod dibawah .

<fb:comments></fb:comments>

atau

<fb:comments width="350"></fb:comments>

13. Save

14. Lokasikannya seperti contoh dibawah

15. Save

16. Tampilkan kotak komen tersebut hanya pada ruangan post disembunyi di ruangan homepage . ----> Display pada ruangan post sahaja

17. Klik Setting - Comments..tandakan pada hide comment seperti contoh dibawah

18. Save setting dan siap .

Via - Jejak Trend

Memasang Feautured Post Slideshow Pada Blog Anda

noreply@blogger.com (Sue) — Tue, 30 Nov 2010 05:40:00 +0000

Assalamualaikum..Msue nak kongsi ngan korang bagamana nak Memasang Feautured Post Slideshow menggunakan JQuery di blog korang .

1. Login ke Blogspot .

2. Klik Design - Edit HTML(Tandakan Pada Kotak Expand Widget)

3. Cari kod dibawah

</head>

4. Copy Kod dibawah

5. Pastekan Diatas kod diatas

6. Klik Preview dan Save Template jika tiada error.

7. Klik Add a Gadget - HTML/Javascript

8. Copy kod dibawah

Note : Gantikan Pada Highlight diatas

9. Pastekan kedalamnya.

10. Save dan View Blog

Memasang Page Navigation Google Pada Blog Anda

noreply@blogger.com (Sue) — Tue, 30 Nov 2010 05:19:00 +0000

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana nakMembuat Page Navigation seperti Google Pada Blog Kini korang boleh memasangnya di blog korang

1. Login ke Blogspot .

2. Klik Design- Edit HTML(JANGAN Tandakan pada kotak Expand widget)

3. Cari kod di bawah

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

4. Copy kod dibawah ini

5. Pastekan dibawah highlight merah diatas

6. Cari kod di bawah

]]></b:skin>

7. Copy kod dibawah

#nav a,#nav a:visited,.blk a{color:#000}
#nav a{display:block}
#nav .b a,#nav .b a:visited{color:#20c}
#nav .i{color:#a90a08;font-weight:bold}
.csb,.ss{background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png) no-repeat 0 0;height:26px;display:block}
.ss{background-position:0 -88px;position:absolute;left:0;top:0}
.cps{height:18px;overflow:hidden;width:114px}
.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
#nav td{padding:0;text-align:center}

8. Pastekan diatasnya

9. Preview dan Save template

10. Klik Layout - Add a Gadget - Label

11. Save

Note: Step 10 - 11 Korang xpayah buat kalau dah ada label pada sidebar .

12. Klik Layout - Edit HTML (Tandakan pada kotak Expand widget)

13. Cari kod di bawah

14. Copy kod dibawah dan gantikannya

15. Preview dan Save template

16. Klik Setting - Formatting

17. Pada show at most , tukarkan kepada 6 post seperti gambar / image dibawah

18. Save Setting dan view

Cuztomize Twitter Update Mengikut Citarasa Anda

noreply@blogger.com (Sue) — Tue, 30 Nov 2010 04:53:00 +0000

Assalamualaikum , Pada hari ini Msue ingin berkongsi ngan korang sume bagaimana nak Customize Twitter update korang .

1. Login ke Blogspot .

2. Klik Design - Add A Gadget - Javascript/HTML

3. Copy kod di bawah dan pastekan ke dalamnya .

<div <--Add Style Here --> id="twitter_div">
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/msueroomz" id="twitter-link" style="display:block;text-align:center;"></a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/msueroomz.json?callback=twitterCallback2&count=5"></script>

Note: Pada highlight ungu korang tukarkan ngan username twitter korang , highlight hijau itu adalah berapa jumlah status yang korang ingin pamerkan .

4.Pastekan kod stail yang ada di bawah mengikut citarasa korang pada highlight biru diatas.

Note: Pada highlight merah korang tukar tukarkan mengikut kesesuaian .

Kod stail untuk background warna

style="background: #ffcc00;"

Kod stail untuk background image

style="background: url(http://i921.photobucket.com/albums/ad54/nurulsue/love/emo-1-1.png)center left no-repeat; padding-left: 50px;"

center left adalah posisi tengah sebelah kiri atau korang boleh tukar ngan posisi lain . center center , top center , top left , top right , bottom left , bottom right , bottom center

Kod stail untuk border

style="border: 3px solid #cccccc; padding: 5px;"

Note: Korang leh gak gabungkan kod antara kod background image + background warna + border . Bergantung pada citarasa korang .

Via - Amanda

Pasangkan Related Post With Thumbnail Bergerak Di Blog Anda

noreply@blogger.com (Sue) — Tue, 30 Nov 2010 04:46:00 +0000

Assamualaikum , Sebelum ni Msue ade buat tutorial tentang cara membuat Adik Related Posted Pagi ni Msue nak kongsi ngan korang sume bagaimana nak buat related post bergerak . Ia akan buat blog korang lebih cool .

1. Login ke Blogspot .

2. Klik Design - Edit HTML(Tandakan pada Expand Widget)

3. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .

</head>

4. Copy kod dibawah .

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

5. Pastekan di atasnya

6. Cari kod di bawah

<data:post.body/>

7. Copy kod dibawah

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' direction='right' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='4' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=50;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>

8. Pastekan dibawahnya

9. Preview dan Save template .

Via - SerbaBlog

Membina Hide/Show Element

noreply@blogger.com (Sue) — Thu, 25 Nov 2010 03:41:00 +0000

Assalamualaikum..setelah sekian lama menyepi,kini MsueRoomZ kembali..Kali ini Msue ingin berkongsi ngan korang bagaimana hendak membuat Show/Hide Url atau Elements . Ia macam dropdown menu tetapi yang ini menggunakan fungsi hide/show . Korang boleh gunakan untuk meletakkan korang punya link list ataupun element tertentu untuk menjimatkan ruang di sidebar korang .

1. Login ke Blogspot .

2. Klik Design - Edit HTML(Tandakan pada kotak Expand widget)

3. Cari kod di bawah .

</head>

4. Pastekan kod di bawah ini di atas atau sebelumnya .

5. Preview dan Save template .

6. Klik pada Add a Gadget - HTML/Javascript .

7. Masukkan kod di bawah ke dalamnya .

<ul><a href="javascript:void(0);" onclick="expandcollapse('KEYWORD')"> [+/-] Kategori</a></ul>

<ul class="texthidden" id="KEYWORD">

<li><a href="http://linkataulinkelement.com">NAMA LINK ATAU NAMA ELEMENT 1</a></li>

<li><a href="http://linkataulinkelement.com">NAMA LINK ATAU NAMA ELEMENT 2</a></li>

<li><a href="http://linkataulinkelement.com">NAMA LINK ATAU NAMA ELEMENT 3</a></li>

<li><a href="http://linkataulinkelement.com">NAMA LINK ATAU NAMA NAMA ELEMENT 4</a></li>

<li><a href="http://linkataulinkelement.com">NAMA LINK ATAU NAMA ELEMENT 5</a></li>

</ul>

Note: Highlight merah - tukarkan yang bersesuaian , Highlight biru -Pada perkataan KEYWORD Gantikan ngan keyword korang sendiri(pastikan keywordnya sama)

Via - Muncet

Membina Label Cloud Dengan Cara Mudah

noreply@blogger.com (Sue) — Thu, 25 Nov 2010 02:59:00 +0000

Assalamualaikum,pagi ni msue nak kongsi bagaimana nak buat nak buat label cloud ataupun label berawan dengan cara yang mudah..kepada yang newbie pun boleh melakukannya jika ikut arahan dibawah .

1. Login ke Blogspot .

2. Klik Design - Edit HTML(JANGAN tandakan pada Expand Widget)

3. Cari kod dibawah

]]></b:skin>

4. Pastekan kod dibawah sebelum kod diatas

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

5. Cari kod dibawah

</head>

6. Pastekan kod dibawah diatas kot tersebut.

7. Cari kod dibawah .

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

8. Gantikan dengan kod dibawah .

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

9. Preview dan Save Template jika tiada error

Horizon Sub Navigation Versi 2 Yang Lebih Cool

noreply@blogger.com (Sue) — Wed, 19 May 2010 04:31:00 +0000

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana nak buat horizon sub navigation yang lebih cool dari yang sebelum ini . Korang boleh tengok tutorialnya disini --> Sub Navigation

1. Login ke Blogspot .

2. Klik Design - Edit HTML( Tandakan pada kotak Expand widget)

3. Cari kod di bawah

]]></b:skin>

4. Copy kod dibawah

ul#topnav {
margin: 0; padding: 0;
float: left;
width: 660px;
list-style: none;
position: relative;
font-size: 1.2em;
background: #C86595;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border: 3px outset #EC0982;
}
ul#topnav li:hover {
border: 3px inset #EC0982;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #FFFFFF;
text-decoration: none;
}
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 660px;
background: #F83A9F;
border: outset 3px #EC0982;
-moz-border-radius: 10px;

}
ul#topnav li:hover span {
display: block;
}
ul#topnav li span a {
display: inline;
}
ul#topnav li span a:hover {
text-decoration: underline;
color: #000000;
font-weight:bold;
border: inset 3px #EC0982;
-moz-border-radius: 10px;

}

Note: Tukarkan pada highlight diatas .

5. Pastekan diatasnya

6. Cari kod di bawah

</head>

7. Copy kod dibawah

Note :Gantikan Highlight hijau diatas dengan kod warna mengikut citarasa korang . Highlight hijau berkenaan lokasinya adalah seperti yang image dibawah

8. Pastekan diatasnya

9. Cari kod di bawah

10. Copy kod dibawah

<ul id='topnav'>
<li><a href='http://msueroomz.blogspot.com/'>Home</a></li>

<li>
<a href='#'>About</a>
<span>
<a href='http://msueroomz.blogspot.com/'>The Company</a>
<a href='http://msueroomz.blogspot.com/'>The Team</a>
<a href='http://msueroomz.blogspot.com/'>Careers</a>
</span>
</li>

<li>
<a href='#'>Services</a>
<span>
<a href='http://msueroomz.blogspot.com/'>What We Do</a>
<a href='http://msueroomz.blogspot.com/'>Our Process</a>
<a href='http://msueroomz.blogspot.com/'>Testimonials</a>
</span>
</li>

<li>
<a href='#'>Portfolio</a>
<span>
<a href='http://msueroomz.blogspot.com/'>Website</a>
<a href='http://msueroomz.blogspot.com/'>Development</a>
<a href='http://msueroomz.blogspot.com/'>Identity</a>
<a href='http://msueroomz.blogspot.com/'>SEO</a>
<a href='http://msueroomz.blogspot.com/'>Design</a>
</span>
</li>

<li><a href='http://msueroomz.blogspot.com/'>Contact</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Email Me</a></li>

<li>
<a href='#'>Social Web</a>
<span>
<a href='http://msueroomz.blogspot.com/'>Twitter</a>
<a href='http://msueroomz.blogspot.com/'>Facebook</a>
</span>
</li>

</ul>

Note: Tukarkan Pada highlight diatas

11. Pastekan diatasnya

12. Preview dan Save template

Membuat Fancy Image Hover

noreply@blogger.com (Sue) — Mon, 17 May 2010 09:22:00 +0000

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana nak buat Membuat Fancy Image Hover

1. Login ke Blogspot .

2. Klik Layout - Edit HTML( Tandakan pada kotak Expand widget)

3. Cari kod di bawah

]]></b:skin>

4. Copy kod dibawah

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center;
border: none;

5. Pastekan diatasnya

6. Cari kod di bawah

</head>

7. Copy kod dibawah

8. Pastekan diatasnya

9. Preview dan save template

Untuk Memasuk Pada Posting

1. Klik New Post

2. Copy kod dibawah

Note:Tukarkan pada highlight merah diatas

3. Pastekan kedalamnya

4. Klik Publish post

Membuat Fancy Navigation

noreply@blogger.com (Sue) — Mon, 17 May 2010 07:25:00 +0000

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana nak Membuat Fancy Navigation . Ia akan membuatkan blog korang nampak lain dari orang lain .

1. Login ke Blogspot .

2. Klik Layout - Edit HTML( Tandakan pada kotak Expand widget)

3. Cari kod di bawah

4. Copy kod dibawah

<ul id='topnav'>
<li><a href='http://msueroomz.blogspot.com/'>Home</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Services</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Twitter</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Blog</a></li>
<li><a href='http://msueroomz.blogspot.com/'>AboutMe</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Email</a></li>
<li><a href='http://msueroomz.blogspot.com/'>Label</a></li>
</ul>

Note: Tukarkan Pada highlight diatas

5. Pastekan diatasnya

6. Cari kod di bawah

</head>

7. Copy kod dibawah

8. Pastekan diatasnya

9. Cari kod di bawah

]]></b:skin>

10. Copy kod dibawah

ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 660px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
}
ul#topnav a {
color: #FFFFFF;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTAx9xSX4a1NDAhyphenhyphenuNvTLcWhkzDH_9F2Cncz62W9dJCUdjVgDu9buAopFZmMcYraWjRJ8lKst40juVfZvnPYiq0asAhiPXIa48ywLDUC5rT1gzNwNY16xMoZ8vwWxAZtEvtGYrMEybB243/s1600/red1.gif) repeat-x left bottom;
}
ul#topnav span {
color: #000000;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipDE0Y27P_IYCrl2xa9OMg2lowcYW59z92A4t7RL6DRYTpF1P2-z_2ZGLLJ7MGkaEhzk3eTw8b7j1O3e57sbnFexdBXvar3eKYT2bjj-zICMfKT5uMB2uQBH3tCu-Cj5-YmX7CFyziyegI/s1600/orange1.jpg) repeat-x left top;
}

Note:Tukarkan pada highlight diatas

11. Pastekan diatasnya

12. Preview dan Save template

Pesanan Pada Bawah Title Posting Dengan Bersama Title Posting

noreply@blogger.com (Sue) — Wed, 12 May 2010 04:06:00 +0000

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana nak buat Pesanan Pada Bawah Title Posting Dengan Bersama Title Posting . DEMO

1. Login ke Blogspot .

2. Klik Layout - Edit HTML(Tandakan pada Expand Widget)

3. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .

<data:post.body/>

4. Jika korang meggunakan readmore , korang cari kod dibawah ini

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

5. Copy kod dibawah .

<hr color='#ff0000'/><marquee align='center' direction='left' scrollamount='3' width='80%'>
<b>Selamat Membaca Artikel <data:post.title/> Sila beri komen yang membina</b>
</marquee><hr color='#ff0000'/>

Note: Biru = warna garisan atas dan bawah , merah = ayat , hijau= kelajuan marquee , ungu = arahan pergerakan marquee . Tukarkan kesemua yang dihighlight ini mengikut citarasa korang .

6. Pastekan diatasnya

7. Preview dan Save template .

Cara Mudah Dapatkan IP Address Sesuatu Blog

noreply@blogger.com (Sue) — Wed, 12 May 2010 02:52:00 +0000

Assamualaikum , Sebelum ini Msue ade berkongsi ngan korang cara nak Ban IP Address sesuatu Blog .Hari ini Msue nak kongsi lagi ngan korang sume bagaimana Cara Mudah Dapatkan IP Address Sesuatu Blog .

1. Klik Start Pada Komputer / Laptop korang .

2. Klik Run

3. Dalam Ruangan tersebut taipkan kod dibawah . Lihat gambar dibawah.

cmd

4. Taipkan kod dibawah ini selepas cursor yg berkelip - kelip tersebut. Lihat contoh gambar dibawah

ping msueroomz.blogspot.com

5. Tekan Enter . Ia akan jadi seperti ini .

6. Copy IP Address

7. Siap

Membuat Nombor Pada Komen Dengan Icon / Image

noreply@blogger.com (Sue) — Wed, 12 May 2010 01:03:00 +0000

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana nak Membuat Nombor Pada Komen Dengan Icon / Image

1. Login ke Blogspot .

2. Klik Layout - Edit HTML(Tandakan pada Expand Widget)

3. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .

4. Copy kod dibawah .

5. Pastekan dibawahnya seperti contoh dibawah .

<dl id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>

6. Cari kod di bawah

<data:commentPostedByMsg/>

7. Copy kod dibawah .

<span class='comm-num'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

8. Pastekan dibawahnya

9. Cari kod di bawah

</head>

10. Copy kod dibawah .

Note: Tukarkan yang dihighlight Contoh Background yang boleh korang gunakan dibawah ini

Note Tambahan : Klik Kanan pada salah satu image / icon diatas - Properties dan copy image address / image location

11. Pastekan diatasnya

12. Preview dan Save template .

Membuat Fungsi Refresh Secara Automatik Versi 2

noreply@blogger.com (Sue) — Tue, 11 May 2010 05:53:00 +0000

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana Membuat Fungsi Refresh Secara Automatik Versi 2 ,Sebelum ini Msue ade watkan tutorial membuat refresh secara automatik versi 1

1. Login ke Blogspot .

2. Klik Layout - Edit HTML ( tandakan pada kotak expand widget )

3. Cari kod dibawah (gunakan CTRL + F untuk memudahkan korang mencarinya)

<head>

3. Copy kod dibawah

Note : Pada highlight adalah masa refresh dalam bentuk saat , tukarkan mengikut kehendak korang .

4. Pastekan dibawahnya

5. Save dan Preview .

Menukar Reply To Comment Kepada Image

noreply@blogger.com (Sue) — Tue, 11 May 2010 05:07:00 +0000

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana nak buat reply to comment kepada image , jika korang belum buat , korang boleh tengok disini tutorial die . Membuat Reply To Comment

Sebelum Korang Ikut Tutorial ni..Pastikan korang dah buat Membuat Reply To Comment

1. Login ke Blogspot .

2. Klik Layout - Edit HTML(Tandakan pada Expand Widget)

3. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .

[Reply to comment]

5. Gantikannya dengan kod dibawah ini

6. Preview dan Save template .