Tutorial Label Beraminasi(flash)

Merujuk kepada pengunjung yang bernama jue , yanag menanyakan bagaimana nak buat Label flash yang beraminasi sama dengan label kat blog Qassam. Ok petama sekali terima kasih Qassam ucapkan kepada Saudari Eriyza kerana dengan tunjuk ajar beliau dapatlah Qassam curahkan semula ilmu ni kepada pengunjung blog Qassam pula.

Pertama sekali :-

* Login.
* Masuk ke Layout - Edit HTML.
* Download Full Template sebelum mengedit blog.
* Kemudian, cari kod di bawah ini.

<b:section class='sidebar' id='sidebar' preferred='yes'>

* Tambahkan Kod ini pula dibawah kod tadi:-

<b:widget id='Label99' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div> <script type='text/javascript'> var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;); // uncomment next line to enable transparency //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;); so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;); so.addVariable(&quot;mode&quot;, &quot;tags&quot;); so.addVariable(&quot;distr&quot;, &quot;true&quot;); so.addVariable(&quot;tspeed&quot;, &quot;100&quot;); so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;); so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;); so.write(&quot;flashcontent&quot;); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

* Preview dan save
* Antara perkara yang perlu di ubah ialah :-

240 = saiz lebar
300 = saiz tinggi
ffffff = warna latarbelakang
333333 = warna tulisan
12 = saiz tulisan

Sekian Semoga berjaya..

Credit to Eriyza

Read More

Tutorial Auto Publish in Blog

Kali ini Qassam akan berikan sikit tutorial tentang auto publish .tutorialni khas bagi sesiapa yang terlalu sibuk dengan kerja(workerholic) dan tak sempat update blog selalu..dengan adanya Auto publish ini, dapatlah menyelesaikan masaalah "tidak sempat"update blog ini. Qassam tahu mungkin ramai dah tahu tentang ini, tapi bagi mereka yang belum tahu lagi tu..jom baca dan praktik dekat blog korang..:)

1. Pertama sekali, anda taip entry macam biasa..


2. Sebelum click publish post tu, ubah tarikh dan masa yang kita plan bila nak keluar, contohnya hari ni adalah 24/2, kita plan nak autopublish entry pada 25/2 pada jam 8.00 am seperti gambar rajah di bawah:-

3. Bila dah semua di ubah,(tarikh,Masa) bolehlah tekan butang Publish Post ...


4. Selesai....

P/s: anda bolehlah menulis seberapa banyak pun entry dan publishkan mengikut tark2 yang anda kira sesuai...barulah orang akan perasan bahawa blog kiter selalu update...huhuhu...Rahsia Tau..:)

Read More

Tutorial Recentpost thumbspy

Salam 1Malaysia,
Kali ini, saya akan berikan sedikit panduan untuk sesiapa yang berminat nak buat recentpostthumbspy kat sebelah sidebar blog masing-masing.
Langkah-langkahnya adalah seperti berikut:-

1. login, klik (Layout) -> Page Elements

2. Tambah Gadget (Add Gadget)-->Add Html/Javascript

3. Masukkan kod di bawah:-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://www.sigmirror.com/files/26262_dji0c/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:13px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language="JavaScript">

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://evshare.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src="http://www.sigmirror.com/files/26260_4oaqk/recentpostthumbspy-min.js" type="text/javascript"></script>
</div>

p/s: sila tukarkan Url yang berwarna merah dengan Url blog anda.

Semoga Berjaya.!

Read More

Teknik membuat Ruangan Exchange Link

Assalamualaikum Wbkt.
Bagi menunaikan permintaan HambaAllah yang menanyakan cara nak buat Banner Exchange/Link Exchange dalam blog kita, sila ikuti tutorial yang Qassam buat di bawah ini:

Contoh Banner Exchange 1

Contoh Link Exchange 2

Ikutilah step yang akan diterangkan dibawah:-

1. login, klik (Layout) -> Tambah Gadget (Add Gadget)

2. Copy kod Dibawah ini dan paste

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi72m5cNP5G45naq6z-o77OWXHBRbaD7Ria11XjtJLobJpSWlBTTdOg0U3mL9LkjwTPw3pYNI1k4zG2XtP0m1sX163dpYOFFPIHDWjbxA9zmu0fuVs6Cjgmi6LMZTXFx0qYP7rgy5VmST0/s1600/banner2.jpg" border="0"></a><br>Copy code below, insert into your blog </font><br><textarea name="code" rows="4" cols="17"> <a href="http://evshare.blogspot.com/" title="Qassam" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi72m5cNP5G45naq6z-o77OWXHBRbaD7Ria11XjtJLobJpSWlBTTdOg0U3mL9LkjwTPw3pYNI1k4zG2XtP0m1sX163dpYOFFPIHDWjbxA9zmu0fuVs6Cjgmi6LMZTXFx0qYP7rgy5VmST0/s1600/banner2.jpg" border="0" alt="Qassam"> </a> </textarea>

3.Sila tukarkan Link Yang berwarna merah tersebut dengan Link Anda Sendiri. Manakala bagi nombor yang berwarna biru pula hendaklah di sesuaikan dengan saiz Sidebar Blog anda.

4. Klik "Simpan"

5. Selesai

P/s: Sila Pastikan anda edit gambar-gambar yang anda ingin jadikan banner dalam laman blog anda, menggunakan contohnya : Adobe photoshop. Setelah mendapat gambar yang mempunyai saiz dan corak yang cantik, maka Uploadkanlah ke server.

Sekian , Semoga membantu.

Read More

Tips/Teknik Memilih Template Blog

Assalamualaikum Wbkt.
Kadang-kadang kita terlalu teruja dengan template yang ‘Canggih’ Hal ini ditambah dengan terlalu banyak pilihan template/themes yang berbagai bentuk dan warna. Ramai yang lupa bahwa pelawat tidak hiraukan dengan kecanggihan template yang kita guna. Orang masuk ke blog kita sebenarnya kerana isinya yang menarik,dan lain dari yang lain.

Selain itu, kalau kita perhatikan, Web-web berpengunjung ramai,serta traffic yang tinggi semuanya berbentuk sederhana. Lihat contohnya tiga web bertraffic tertinggi di dunia: google.com, yahoo.com dan msn.com. Ketiganya memakai template minimalist: background putih, font tulisan warna hitam dan warna tulisan di menunya yang tidak serabut. Google.com, website no. 1 di dunia termasuk pengasas minimalist di mana cuma terdapat kotak search engine dan sedikit menu link di atasnya. Dulu, yahoo.com memiliki banyak link di halaman utama / frontpage-nya, tapi sekarang sudah setanding google. Apa yang pentingnya,adalah-" the simple is the better". Saya sendiri malas berkunjung untuk kedua kalinya pada sebuah blog yang terlalu canggih dan berat loadingnya karena banyak script yang dipasang.

Oleh karena itu, memilih template harus mempertimbangkan tips-tips di atas: pilihlah template atau themes yang kemas, background warna yang sederhana, dan warna font artikel yang senang dibaca.

Selain itu, apa yang penting adalah “kekemasan blog.” Blog yang kemas ialah:
(a) sidebar tidak panjang;
(b) font artikel cukup satu warna dan seragam;
(c) blogroll atau banner dipasang kemas dan sesuai;
(d) sesuai dibuka dengan berbagai browser, terutama IE dan firefox.

Bagaimana dengan Anda? Apakah Anda suka blog kemas atau yang “caca-marba/serabut?”

Tips bagi Blogger Baru:

1. Bagi pengguna wordpress.com, untuk ganti template / theme / tema, setelah login
(a) klik “Paparkan” atau “Presentation”
(b) deretan template di bawahnya akan keluar;
(c) klik template / theme /tema yang Anda suka.

2. Bagi pengguna blogger.com / blogspot, walaupun template asli (default) blogspot tidak lawa, tapi kita boleh memilih template di laman web ini(www.btemplates.com).

Sekian..moga-moga ianya memberi manfaat

Read More

RECENT COMMENT DI SIDEBAR

1. login, klik (Layout) -> Tambah Gadget (Add Gadget) -> Feed

2. Isi dengan Feed Komentar / Comment blog Anda.

Struktur komentar feed blogspot ada dua. Pilih salah satu:

(a) Atom 1.0 yaitu http://namablog.blogspot.com/feeds/comments/default
(b) RSS 2.0 iaitu http://namablog.blogspot.com/feeds/comments/default?alt=rss
3. Klik “Seterusnya”

4. Di menu “Tajuk” beri Tajuk “Recent Comment” atau “Komen Terbaru”

5. Klik “Simpan.” Selesai.

Read More

Menu Navigasi Plus Submenu (jQuery Multi Level CSS Menu #2)

Assalamualaikum wbkt

Pertama sekali saya memohon berbanyak kemaafan kepada semua pengunjung blog ini, kerana lama Qassam bercuti...dan di tambah pula slepas cuti raya hari tu Qassam tak berapa sihat..so tak sempatlah nak update blog ini..agaknya dah bersawang kot blog ni..hihih...
dalam entry kali ini Qassam akan berkongsi cra-cara nak buat Menu Navigai yang mempunyai submenu sperti permintaan saudara HambaAlah tempohari, okeylah sila ikut cara-cara yang akan saya tunjukkan;-

1. Uploadkan 2 file ini ke server anda.
-jqueryslidemenu.css (dapatkan disini)
-jqueryslidemenu.js (dapatkan disini) (dalam file ini,hendaklah di comfirmkan URL penuh )

2. Login-Layout-Edit Htmlt. - Masukkan kod HTML di bawah ini, di bahagian atas kod <head>

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>

3. Kod ini pula di letakkan di bahagian HTML

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

4. Sila edit pada bahagian-bahagian URL tersebut mengikut kesesuaian blog anda.

5. Save Template.

p/s: sebarang masaalah bolehlah di ajukan disini.

Read More

Membuat Menu Dan Navigation/Navigasi

Semalam seorang penggunjung laman blog ini saudari eryati ada mengajukan soalan, tentang cara -cara membuat Menu Dan Navigasi seperti yang terdapat dalam laman blog ini, sebenarnya kita boleh dapatkan menu navigasi ini,dengan menukar template blog yang dah ada menu navigasi yang cantik-cantik...itu adalah cara yang senang...di sini, saya akan ceritakan/ajarkan cara-cara nak buat menu navigasi tersebut, bagi template yang tiada di sertakan menu navigasi, baiklah ayuh kita mulakan :-

1. Login - Layout - Page Element - Add A Gadget - HTML / Javascript. - Masukkan kod HTML di bawah ini.

<ul id="main-nav">
<li><a href="/link home" title="HOME">Home</a></li>
<li><a href="/link download" title="DOWNLOAD">Download</a></li>
<li><a href="/link guestbook" title="BUKU TAMU">Guest book</a></li>
<li><a href="/link about" title="ABOUT US">About</a></li>
</ul>

p/s: Letakkan di atas kotak catatan blog/blog post.

** Anda boleh menukar link dan title yang berwarna merah dengan link dan title anda sendiri


2. Masukkan Kod Css kedalam Layout pula,

---> Login-Layout-Edit Html

Kemudian carikan ]]></b:skin> dan letakkan kod dibawah ini pada ruangan atas kod ]]></b:skin>/ sebelum kod ]]></b:skin>

ul#main-nav {font-family:helvetica,arial,sans-serif;margin:0;padding:0;float:left;border-bottom:0.1em solid #04e;width:100%;}
ul#main-nav li {margin:0;padding:0;list-style:none;float:left;margin:0 0.3em 0 0;}
ul#main-nav li a {font-weight:bold;text-decoration:none;display:block;padding:0.3em;border-bottom:0.4em solid white;color:black;background:#fff;}
ul#main-nav li a:hover {border-bottom:0.4em solid #04e;color:#04e;}

3. Akhir sekali Save Template...Siap...

Read More

Cara Buat Image Slide Show

Image Slide Show/gambar bergerak bukan sesuatu yang susah untuk di buat sebenarnya, jika kita perhatikan dan lawati laman-laman blog di internet ini, bermacam-macam cara/teknik orang buat untuk koleksi gambar mereka.
Di dalam internet ini, terdapat banyak laman-laman sesawang yang menawarkan pakej image slide show di laman web mereka, ada yang memerlukan pelawat mendaftar dan ada juga tidak memerlukan pendaftaran. Jom kita lihat, laman web ini memerlukan kita mendaftar dan seterusnya menguruskan foto-foto kita untuk di jadikan slide show, biasanya image slide show yang di tawarkan adalah berbentuk flash, kerana format ini adalah yang terkini setakat penulis tahu, pada peringkat akhir proses mmbuat image slide show tersebut, anda akan di berikan kod untuk di letakkan di laman web/blog. Anda bolehlah meletaknya di bahagian sidebar/atas/tengah /mana-mana bahagian yang di fikirkan perlu, dengan mengedit sdikit pada kodnya supaya sesuai dengan saiz sidebar anda. Seterusnya, saya akan berikan beberapa laman sesawang yang menawarkan khidmat membuat image slide show :-

1. http://www.slide.com

2. Picasa image slide show

3. Pyzam Slide Show

Terdapat juga cara lain untuk membuat image slide show ini, iaitu menggunakan kod-kod yang tertentu. Baiklah di bawah ini penulis akan berikan satu kod yang mudah untuk membuat slide show tesebut.

1. Login ke Blogspot.

2. Pilih Layout - Page Elements

3. Pilih Add Gadget--> Html/JavaScript.

4. Masukkan Kod ini :-

<script language="JavaScript1.2">

/*
Left-Right image slideshow Script-
By Dynamic Drive (www.dynamicdrive.com)
For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
*/

///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='100px'
var scrollerheight='106px'
var scrollerbgcolor='white'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000


//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<a href="http://www.cnn.com"><img src="PE01805A.gif" border=0"></a>'
slideimages[1]='<img src="PE01803A.gif">'
slideimages[2]='<img src="TN00411A.gif">'
slideimages[3]='<img src="PE02054A.gif">'
slideimages[4]='<img src="cake.gif">'
//extend this list

///////Do not edit pass this line///////////////////////

var ie=document.all
var dom=document.getElementById

if (slideimages.length>1)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.left>0&&tlayer.left<=5){
tlayer.left=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.left>=tlayer.document.width*-1){
tlayer.left-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.left=parseInt(scrollerwidth)+5
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.left>0&&tlayer2.left<=5){
tlayer2.left=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.left>=tlayer2.document.width*-1){
tlayer2.left-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.left=parseInt(scrollerwidth)+5
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=5){
tdiv.style.left=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(scrollerdiv2)",pausebetweenimages)
return
}
if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
tdiv.style.left=parseInt(tdiv.style.left)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.left=scrollerwidth
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.left)>0&&parseInt(tdiv2.style.left)<=5){
tdiv2.style.left=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(scrollerdiv1)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
tdiv2.style.left=parseInt(tdiv2.style.left)-5+"px"
setTimeout("move4(scrollerdiv2)",50)
}
else{
tdiv2.style.left=scrollerwidth
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (ie||dom){
scrollerdiv1=ie? first2 : document.getElementById("first2")
scrollerdiv2=ie? second2 : document.getElementById("second2")
move3(scrollerdiv1)
scrollerdiv2.style.left=scrollerwidth
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.left=parseInt(scrollerwidth)+5
document.main.document.second.visibility='show'
}
}

window.onload=startscroll

</script>




<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; visibility=hide>
<layer id="first" left=1 top=0 width=&{scrollerwidth}; >
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>

5. Anda hanya perlu mengubah kod yang berwarna merah sahaja, iaitu dengan menambah foto-foto yang telah anda Upload ke server .

6. Akhir sekali simpan

Selesai...Selamat berjaya!
=====================================================================

Satu permintaan sahabat Hamba Allah, yang bertanyakan cara buat slide gambar seperti dalam blog j-Qaf sulaiman, baiklah...caranya amat senang sekali, sila ikuti langkah-langkah berikut:-

1. Log masuk ke web http://www.uploadhouse.com untuk upload gambar-gambar.
p/s: apabila anda upload gambar-gambar kesini, mereka akan berikan link untuk gambar yang anda masukkan itu..ini penting bagi mengisi kedalam kod yang saya akan bagi lepas ni.

2. isikan link yang anda dapat melalui web tempat anda upload gambar tadi, kedalam kod ini, :-

<div class='widget-content'>
<div class="textwidget"><marquee direction="up" width="200" onmouseover="this.stop()" scrollamount="2" onmouseout="this.start()" height="200" align="left">

<a href="http://www.uploadhouse.com/viewfile.php?id=4502940&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img0.uploadhouse.com/fileuploads/4502/4502940-holder-bfaf6503364163b6622f4d489f1f2e2c.jpg"/></a>

<p><a href="http://www.uploadhouse.com/viewfile.php?id=4503054&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img4.uploadhouse.com/fileuploads/4503/4503054-holder-b57e6fb5a4146039f5b378ab3b92dab4.jpg"/></a>

<p><a href="http://www.uploadhouse.com/viewfile.php?id=4532267&showlnk=0" target="_blank"><img src="http://img7.uploadhouse.com/fileuploads/4532/4532267-holder-60fdb8ca4f1f2e23f577d37b11659407.jpg"/></a>

<p><a href="http://www.uploadhouse.com/viewfile.php?id=4502902&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img2.uploadhouse.com/fileuploads/4502/4502902-holder-5d3ca385ef5cf4b6e49b08a8d9aa079f.jpg"/></a>

<p><a href="http://www.uploadhouse.com/viewfile.php?id=4502973&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img3.uploadhouse.com/fileuploads/4502/4502973-holder-ae34696c88dd7fdeb64368178d106d35.jpg"/></a>

<p><a href="http://www.uploadhouse.com/viewfile.php?id=4502999&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img9.uploadhouse.com/fileuploads/4502/4502999-holder-ce4c955bca42ccd79b2043f37874f113.jpg"/></a>

<p><a href="http://www.uploadhouse.com/viewfile.php?id=4532270&showlnk=0" target="_blank"><img src="http://img0.uploadhouse.com/fileuploads/4532/4532270-holder-47ea53c2ac9bc10c8939894a861ff385.jpg"/></a>

<p><a href="http://www.uploadhouse.com/viewfile.php?id=4532280&showlnk=0" target="_blank"><img src="http://img0.uploadhouse.com/fileuploads/4532/4532280-holder-a2f532cfb47ab4be36fb42d8f9238c45.jpg"/></a>

<p><a href="http://www.uploadhouse.com/viewfile.php?id=4503157&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img7.uploadhouse.com/fileuploads/4503/4503157-holder-0a58e49497a471d3a800b7e401425070.jpg"/></a>

<p><a href="http://www.uploadhouse.com/viewfile.php?id=4503141&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img1.uploadhouse.com/fileuploads/4503/4503141-holder-8a970cfe1c5b725641b33761a0346321.jpg"/></a>



<p><a href="http://www.uploadhouse.com/viewfile.php?id=4503195&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img5.uploadhouse.com/fileuploads/4503/4503195-holder-7bde68edcc1c3ab28dfde7fe931be7d4.jpg"/></a>

<p><a href="http://www.uploadhouse.com/viewfile.php?id=4532206&showlnk=0" target="_blank"><img src="http://img6.uploadhouse.com/fileuploads/4532/4532206-holder-04ca6462b0d4368b4fdb6351f5092ca9.jpg"/></a>

<p><a href="http://www.uploadhouse.com/viewfile.php?id=4532223&showlnk=0" target="_blank"><img src="http://img3.uploadhouse.com/fileuploads/4532/4532223-holder-f927d1f7a5460d0436510b91bc347258.jpg"/></a>

<p><a href="http://www.uploadhouse.com/viewfile.php?id=4532318&showlnk=0" target="_blank"><img src="http://img8.uploadhouse.com/fileuploads/4532/4532318-holder-c995635d18e2c31dc80c7e8c2ae23f85.jpg"/></a>
</p></p></p></p></p></p></p></p></p></p></p></p></p></marquee></div>
</div>

Sila tukar link yang berwarna merah.

1. Login ke Blogspot.

2. Pilih Layout - Page Elements

3. Pilih Add Gadget--> Html/JavaScript.

4. Masukkan Kod tadi.




Semoga berjaya. Sekian

Read More

Kod Untuk Jam Blog

Tutorial kal ini berkaitan dengan cara-cara nak membuat 'Jam Blog' pada side bar Blog. Sila ikuti penerangan yang di berikan dengan teliti:-

1. Login ke Blogspot.

2. Pilih Layout - Page Elements

3. Pilih Add Gadget--> Html/JavaScript.

4. Masukkan Kod ini/atau download disini :-

<div class='widget-content'>
<form name="Tick">
<input name="Clock" size="11" type="text"/>
</form>
<script>
<!--
/*By George Chiang (JK's JavaScript tutorial)
http://javascriptkit.com
Credit must stay intact for use*/
function show(){
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="صباحا"
if (hours>12){
dn="�ساء"
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
document.Tick.Clock.value=hours+":"+minutes+":"
+seconds+" "+dn
setTimeout("show()",1000)
}
show()
//-->
</script>

<script>

/*
Live Date Script-
&#169; Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
visit http://www.dynamicdrive.com
*/


var dayarray=new Array("Ahad","Isnin","Selasa","Rabu","Khamis","Jumaat","Sabtu")
var montharray=new Array("Januari","Februari","Mac","April","Mei","Jun","Julai","Ogos","September","Oktober","November","Disember")

function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here
var cdate="<small><font face="Arial" color="000000"><b>"+dayarray[day]+", "+daym+" "+montharray[month]+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}

</script>
</div>

5. Masukkan semua kod di atas dan save

Nota: Anda juga boleh dapatkan berbagai-bagai jenis jam di sini

Semoga Berjaya!

Read More

Cara Buat Drop Down Menu untuk Sidebar

Tutorial kal ini berkaitan dengan cara-cara nak membuat 'Drop Down Menu' pada side bar Blog. Sila ikuti penerangan yang di berikan dengan teliti:-

1. Login ke Blogspot.

2. Pilih Layout - Page Elements

3. Pilih Add Gadget--> Html/JavaScript.

4. Masukkan Kod ini :-

<div class='widget-content'>
<p align="center"><span >

<select onchange="window.open(this.options[this.selectedIndex].value)" style="background-color: rgb(51, 153, 102); color: rgb(255, 255, 0); width: 125px; height: 20px; font-weight: bold;" size="1"><option value="#"/>Tajuk Depan
<option value="Link"/>Tajuk 1
<option value="Link"/>Tajuk 2
<option value="Link"/>Tajuk 3
<option value="Link"/>Tajuk 4
<option value="Link"/>Tajuk 5
<option value="Link"/>Tahuk 6
</select></span></p>

5.Anda boleh mengubah saiz "Drop Down Menu" anda pada nombor yang berwarna Merah

- Width-->Lebar
- Hight--> Ketinggian

6. Manakala untuk Link yang berwarna merah juga anda perlu ganti dengan link anda sendiri, dan jangan lupa tukar label Tajuk 1-Tajuk 6 dengan Label anda sendiri.

Sekian Selamat Mencuba.

Read More

Jawapan kepada Soalan -Sdr JQAFSKSR

Alhamdulillah bersyukur kehadrat ilahi kerana hari ini adalah hari yang ke-17 kita umat islam berpuasa,dan Bulan ramadhan beransur-ansur meninggalkan kita, marilah kita sama-sama meningkatkan amal kita di bulan yang penuh barakah ini.....

Baiklah, entry kali ini,adalah bagi menjawab persoalan yang di kemukakan oleh Saudara jqafsksr yang bertanyakan tentang cara nak linkkan foto-fotonya kedalam laman blognya.

Setelah saya melawat laman blognya, barulah saya faham masaalahnya...ok penyelesaianya macam ni,

1. Login ke Blogspot.

2. Pilih layout--->Edit Html-->Expand Widget Templates

3. Download Full Template sebelum mengedit blog.

4. Cari kod di bawah :-

<!-- bagian menu -->
<div class='Menu'>
<ul>
<li><a class='on' href='#'><span>UTAMA</span></a></li&gt;
<li class='page_item'><a href='#' title='Photos'><span>GALERI</span></a></li>
<li class='page_item'><a href='#' title='Video'><span>GURU</span></a></li>
<li class='page_item'><a href='#' title='Music'><span>PELAJAR</span></a></li>

<li class='page_item'><a href='#' title='Calender'><span>TAKWIM</span></a></li>
<li class='page_item'><a href='#' title='Links'><span>PAUTAN</span></a></li>
<li class='page_item'><a href='#' title='Contact'><span>HUBUNGI</span></a></li>
<li class='page_item'><a href='http://layout4all.blogspot.com/' title='Template/layout'><span>Designer</span></a></li>
</ul>
</div>
<!-- bagian content -->

5. Tukarkan kod yang berwarna merah '#' itu, kepada link yang telah anda buat.

6. Cara nak buat link untuk label-label berikut adalah seperti :-

Contoh :-

>>>UTAMA= Anda bolehlah gunakan link ini--> http://j-qafsksr.blogspot.com/
>>>GALERI= Anda boleh gunakan post-post yang lama dari blog anda dan jadikan ianya sebagai GALERI . contoh:-http://j-qafsksr.blogspot.com/2009/08/album-sksr.html gantikan isi yang ada dalam post tu kepada galeri-galeri gambar yang di kehendaki...pastu, ambil link tersebut dan gantikan kod yang berwarna merah seperti diatas '#' dengan link tersebut.

7 . Save template.

Nota: Pastikan anda membaca dengan teliti apa yang saya terangkan,sebelum mencuba. Sekian
" Segala yang baik Datangnya Dari Allah, kekurangan itu dari kesilapan saya sendiri"

Read More

Cara Buat Link Download/Muat turun

Hari ini ,ada seorang pengunjung laman blog jqafskbr yang bertanyakan tentang bagaimanakah cara nak buat Link Download seperti di laman blog tersebut..Ok, di kesempatan ini dapatlah saya terangkan serba sedikit cara-cara nak buat link tersebut...

1. Login ke Blogspot.

2. Pilih layout--->Page Elements--->Add a Gadjet-->Html/JavaScript

3. Bila browser Html/JavaScript dah di buka Isikan di bahagian content tersebut dengan script ini :-

<ul>
<li><a href="LINK DISINI" target="_blank">TAJUK</a></li>
<li><a href="LINK DISINI" target="_blank">TAJUK</a></li>
<li><a href="LINK DISINI" target="_blank">TAJUK</a></li>
<li><a href="LINK DISINI" target="_blank">TAJUK</a></li>
<li><a href="LINK DISINI" target="_blank">TAJUK</a></li>
<li><a href="LINK DISINI" target="_blank">TAJUK</a></li>
<li><a href="LINK DISINI" target="_blank">TAJUK</a></li>
<li><a href="LINK DISINI" target="_blank">TAJUK</a></li>
<li><a href="LINK DISINI" target="_blank">TAJUK</a></li>
</ul>

4. Untuk tulisan LINK DISINI anda di kehendaki menukarnya dengan link Bahan yang telah anda uplodkan di server( link tersebut akan diberi secara Automatik jika anda memasukkan/upload ke server)

P/s: saya cadangkan anda uploadkan bahan2 tadi DISINI . Ini kerana sambil anda upload bahan2 untuk disimpan di server anda juga akan diberi ganjaran setiap kali Uniqe Download..memang berbaloi kan ?

5. Manakala tulisan TAJUK pula, hendaklah ditukar kepada apa2 nama bahan yang anda nak paparkan.

6. Jika bahan2 anda banyak, anda hanya perlu menambah <li><a href="LINK DISINI" target="_blank">TAJUK</a></li> sahaja sebelum tanda </ul>

Sekian..semoga berjaya, sebarang masaalah boleh tanya saya di bahagian comment.

Read More

Cara Buat READMORE/FULLSTORY

Assalamualaikum,
bertemu lagi kita di bulan ramadhan Al-Mubarak ini, semoga hidup ini di berkati yang maha esa..amin...

Ok, dalam entry kali ini saya akan terangkan bagaimana nak buat READMORE/BACA SETERUSNYA/ FULL STORY , sebenarnya tutorial ni di buat bagi menjawab soalan HAMBA ALLAH , yang menanyakan cara-cara membuat Readmore tersebut. Baiklah dah sedia pen dan kertas?..:)

1. Login ke Blogspot.

2. Pilih Layout - Edit HTML (Tanda kotak Expand Widget).

3. Download Full Template sebelum mengedit blog.

4. Sekarang cari <data:post.body/> atau <p><data:post.body/></p> dan ganti/tukarkan dengan Kod di bawah :-

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Baca Selanjutnya..</a>
</b:if>

5. Save template.

6. Sekarang pergi pula ke Settings - Formatting.

7. Masukkan kod di bawah ini ke dalam Post Template.

Taip di sini untuk bahagian paparan ringkas.
<div class="fullpost">
Selanjutnya taip di sini untuk paparan penuh.
</div>

8. Save settings.

Untuk mencubanya, anda mulakan topik baru anda dengan menggunakan mod Edit HTML sewaktu menulis. Jika kod yang sama seperti di atas berada di dalam kotak, maknanya anda sudah berjaya membuat baca selanjutnya. Semoga berjaya...

Cara yang kedua ialah seperti berikut :-


1. Login ke Blogspot.

2. Pilih Layout - Edit HTML (Tanda kotak Expand Widget).

3. Download Full Template sebelum mengedit blog.

4. Cari kod </head> , dan letakkan kod di bawah ini, di atas kod </head>

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

5. Kemudian cari pula kod ini <p><data:post.body/></p> dan letakkan pula kod ini di bawahnya :-

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>

6. Klik Simpan. Selesai.
7. Klik SETTINGS, terus klik FORMATTING atau Format. Di bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong dgn kod berikut:

<span class="fullpost">

</span>

8.Jangan lupa klik SIMPAN

Semoga berjaya!

Read More

Tutorial Membuat Template Blog/Web dengan CSS siri 2

Assalamualaikum...bertemu lagi kita, sori bebanyak..cz lama tak update blog..maklumlah banyak kerja nak di siapkan insyallah saya akan sambung tutorial membuat template yang saya buat minggu lepas....Ohya! gambar kat sebelah tu hanyalah hiasan ...kalau tak suka...sila abaikan..hehhe..saje letak gambar tu...sebab dah takde gambar yang sesuai...

Ok...kita sambung dari tutorial lepas....

2. TD

Pada bagian element body CSS, copy font, color, margin, padding, dan text-align kemudian buat element baru CSS yang dinamai TD :

td {
font:12px verdana;
color:#01244F;
margin:0 auto;
padding:0;
text-align:center;
}

3. LINK

Pada bagian tag <body> masih terdapat unsur link, yaitu:
<body link="#000000" vlink="#000000">
Link ini, pada CSS dipisahkan menjadi elemen-elemen BERIKUT:

a:link {
color:#000000;
}
a:visited {
color:#000000;
}
a:hover {
color:#01244F;
}

a:link merupakan pengaturan link. a:visited pengaturan link yang sudah pernah dibuka. a:hover pengaturan link yang disorot.

Untuk sementara, CSS yang sudah ada:
--------------------------------------
<style type="text/css">
body {
background:#ADD2FF url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg") repeat-y center;
font:12px verdana;
color:#01244F;
margin:0 auto;
padding:0;
text-align:center;
}
td {
font:12px verdana;
color:#01244F;
margin:0 auto;
padding:0;

text-align:center;
}
a:link {
color:#000000;
}
a:visited {
color:#000000;
}
a:hover {
color:#01244F;
}

</style>
-----------------
4. Content

<div id="content" align="left" style="width:750px; border-top:5px solid #FFE53C">
Ambil style dan align untuk content, pindahkan pada CSS. Karena content merupakan tag id, maka pada CSS, penamaan content diawali dengan karakter # atau #content.

#content {
width:750px;
border-top:5px solid #FFE53C;
text-align:left;
}

5.Sidebar

<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">
Ambil style untuk sidebar, pindahkan pada CSS. Karena sidebar merupakan tag id, maka pada CSS, penamaan sidebar diawali dengan karakter # atau #sidebar.

#sidebar {
float:left;
width:230px; >
border-top:5px solid #FFE53C;
font-size:11px;
}

Seterusnya, atur juga jarak antara baris pada paragraph sidebar, iaitu:

#sidebar p {
line-height:1.5em;
}

.....Bersambung

Read More

Tutorial Membuat Template Blog/Web dengan CSS siri 1

Assalamualaikum Wbkt dalam entry saya kali ini saya akan berikansedikit tutorial ringkas mengenai cara-cara membuat Template CSS untuk laman Blog.Didalam Tutorial kali ini saya akan membahaskan penggunaan CSS atau Cascading Style Sheet. ianya adalah merupakan pengumpulan data style yang kita gunakan dalam pembuatan template Blog /web.
Ayuh kita perhatikan contoh template ini(Non CSS):-














-----------------------------------------------------------------------------

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
</head>
<body style="background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<div id="content" align="left" style="width:750px; border-top:5px solid #FFE53C">
<div id="header">
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header1.jpg" /><img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header2.jpg" /><img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header3.jpg" />
</div>
<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Hari Kemarin</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerPreviousItems>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a>
</li>
</BloggerPreviousItems>
</ul>
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Kumpulan Arsip</h2>
<MainOrArchivePage>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerArchives>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</li>
</BloggerArchives>
<ArchivePage>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogURL$>">Current Posts</a>
</li>
</ArchivePage>
</ul>
</MainOrArchivePage>
<$BlogMemberProfile<$BlogMemberProfile<$BlogMemberProfile<$BlogMemberProfile$>
amp;gt;
amp;gt;
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Blog Teman</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://riniaisyah.blogspot.com/" target="_blank">rini medan</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://blogger-skin-resources.blogspot.com/" target="_blank">free skin</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://moeslimah.blogspot.com/" target="_blank">muslimah</a>
</li>
</ul>
</div>
<div id="main" style="float:right; width:500px; padding:5px;">
<Blogger>
<BlogDateHeader>
<h2 style="text-align:right; font:bold 85% Georgia,Serif; color:#4487CD; text-transform:uppercase; letter-spacing:.3em;">
........... <$BlogDateHeaderDate$> </h2>
</BlogDateHeader>
<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<h3 style="background: url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; padding:2px 14px 2px 25px; font:bold Georgia,Serif; color:#A93101; border-bottom:1px dashed #000000;"><$BlogItemTitle$></h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>
<p style="background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right; line-height:1.5em;">
<$BlogItemBody$>
</p>
<p style="line-height:1.5em; color:#4487CD; text-align:right;">
<em style="float:left; text-align:left;">posted by <$BlogItemAuthorNickname$>@ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
</em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</MainOrArchivePage><$BlogItemControl$>
</p>
<ItemPage>
<BlogItemCommentsEnabled><a name="comments"></a>
<h4 style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 1em; padding-left:14px; padding-top:10px; font-size:14px; border-top:1px dashed #000000;"><$BlogItemCommentCount$> Comments:</h4>
<dl>
<BlogItemComments>
<dt style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
At <$BlogCommentDateTime$>, <$BlogCommentAuthor$> said...
</dt>
<dd>
<p>"<$BlogCommentBody$>"</p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p><$BlogItemCreate$></p>
<p><a href="<$BlogURL$>">&lt;< Home</a></p>
</BlogItemCommentsEnabled>
</ItemPage>
</Blogger>
</div>
<div id="footer" style="clear:both; background:#FFE43B; text-align:center; padding:2px;"><$BlogPageTitle$></div>
</div>
</div>
</body>
</html>

----------------------------------------------------------------------------
Maaf jika skrip dalam template ini beserabut sikit...hehe..ianya memang begitu :P
Kalau diperhatikan contoh di atas, ada banyak tag style bahkan ada yang berulang penggunannya. Dengan menggunakan CSS, penulisan style dapat diringkaskan.
Tag style CSS diletakkan di antara tag <head>, iaitu:
------------------------------

<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>

<style type="text/css">
</style>
</head>

----------------------------
1. Body

<body style="background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

------------------------------
Ambil isi dari style dan pindahkan pada CSS. Setiap titik koma (;) dibuat perbaris. Untuk url background diberi tanda petik, menjadi:

<style type="text/css">
body {
background:#ADD2FF url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg") repeat-y center;
font:12px verdana;
color:#01244F;
}
</style>

Margin dituliskan dengan : margin:0 auto;
Padding diatur: padding:0;.
Tentukan align dengan menulis text-align:center;.

Hasilnya menjadi:

<style type="text/css">
body {
background:#ADD2FF url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg") repeat-y center;
font:12px verdana;
color:#01244F;
margin:0 auto;
padding:0;
text-align:center;
}
</style>

------------------- Bersambung untuk siri akan datang----:)

Read More

Tips Menukar/Mengganti Template Blog

Assalamualaikum semua.. Alhamdulillah, dalam entry kali kali ni saya akan ajarkan salah satu cara/tips menukar templates/skin blog..mungkin anda dah boring dengan paparan blog lama anda,dan nak menukarnya kepada paparan yang lebih canggih dan elegen lagi.
Okey, Terdapat beberapa laman web yang menyediakan template blogger.com secara percuma antaranya ialah seperti :-

* http://www.geckoandfly.com/blogspot-templates/
* http://www.blogskins.com/
* http://blogger-templates.blogspot.com/
* http://www.bloggertemplates.org/
* http://blogspottemplates.blogspot.com/
* http://www.finalsense.com/services/blog_templates/
* http://www.blogcrowds.com/resources/blogger_template.php

Untuk blogger.com, templatenya terdapat dalam 2 jenis format, iaitu :-

1. Format Html – template versi lama atau disebut juga versi classic
2. Format XML – template versi baru

Untuk menukar template blogger anda dengan menggunakan format XML, terdapat 4 langkah yang perlu anda lakukan.

1. Download dan “save” ke dalam komputer anda mana-mana template format XML yang anda berkenan dari mana-mana website yang menyediakan template percuma.


2. Login ke dalam control panel akaun blogger anda dan klik pada bahagian “template @ layout> edit html”











3. Cari template yang anda telah save di dalam komputer ana tadi, dan kemudiannya tekan butang “upload”


atau.. anda boleh “select all & copy” semua aturcara XML yang terdapat di dalam fail xml tadi dan “paste” kan aturcaa tersebut ke dalam ruangan “EditTemplate”.. dan kemudiannya, tekan butang “Save Template”.





Ok dan satu lagi , bila kita dah tekan butang upload tadi akan keluar perkataan ni " WIGET ARE ABOUT TO BE DELETED" so klik je butang CONFIRM &SAVE......selesai..

Selamat Mencuba....:)

Read More

Tips Mengelak Blog Anda Di Copy Paste !!

Perbuatan COPY PASTE atikel-atikel dalam dunia siber ini, sudah lama berlaku dan ianya bagaikan tidak terkawal sejak akhir-akhir ini...maklumlah manusia semakin bijak, jadi pada entry saya kali ini..saya akan tunjukkan tips/cara untuk mengelakkan atikel anda daripada "Di curi" dan di copy paste oleh orang-orang yang tidak bertanggungjawab...





Cara-caranya adalah seperti berikut :-

1. Pergi ke Layout >> Add a GadGet >> select html/javascript

Copy code javascript ni dan paste ke dalam html/javascript text box

<script language="JavaScript">
<!--

//Disable right mouse click Script
//By Maximus ([email protected]) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="MASUKKAN TEXT ANDA DISINI!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>

Akhir sekali SAVE dalam blog anda..Cuba test dalam Laman blog anda !! Insyallah jadi Wassalam

Read More

Tutorial Scrool Text /Text Bergerak

Salam... Pertama sekali aku mintak maaf banyak-banyak kepada sahabatku syeikh yusof, kerana lambat buat entry baru tentang tulisan bergerak..sori bebanyak yer..coz maklum ler bila pindah kat sekolah baru ni banyak ciket kejenya..ni pun baru siap print soalan Bahasa Arab Tahun 3 untuk ujian bulan yang ke-2..Syukran syeikh Yusof kerana uploadkan soalan Bahasa Arab tu..Oklah kita straight to the point tentang cara-cara untuk buat tulisan bergerak ni..


1. Kotak Blogroll Model Textarea

begini cara untuk membuatnya :

Pasang code berikut ini di kedalam element blog (Page Elements --> Add a Gadget --> HTML /Javascript)

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

#link1 <br />
#link2 <br />
#link3 <br />
#link...

</div>

keterangan skrip di atas:
- Kod width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, anda boleh mengubahnya dan menyesuaikanya dengan ukuran yg anda suka.
- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link anda, oh ya itu juga boleh diisi dengan banner link.
- Jika anda ingin daftar link-linknya menjadi berturutan , maka hilangkan kode


2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeza dengan kotak yg diatas, kerana kotak yang ini tidak memiliki rollbar (yg biasanya disebelah kanan terus ditarik keatas kebawah itu ). Link-link atau isi didalam kotak ini akan bergerak/berjalan, cara vertikal atau horizontal. Ok begini cara membuatnya:

Pasang code berikut ini di kedalam element blog (Page Elements --> Add a Gadget --> HTML /Javascript)

<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link...<br />

</marquee>

Keterangan skrip :

- Kod "up" itu menunjukan arah pergerakan, anda boleh menggantinya dengan down, left, right .
- Jika andas menggantinya dengan pergerakan horizontal (left atau right) maka hilangkan kod
.
- Angka "100" menunjukkan tinggi dari kotak blogroll anda. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

3. Ini adalah cara yang terakhir (sama seperti dalam blog Sk Seri utama)

Pasang kod ini di kedalam element blog (Page Elements --> Add a Gadget --> HTML /Javascript)

<div class="widget-content">
<marquee onmouseout="this.start()" direction="up" align="center" behavior="scroll" scrollamount="2" onmouseover="this.stop()" scrolldelay="10"

height="200" width="100%">
<center>
<br/><br/><span><strong>Tajuk</strong><br/>
Text Disini
</span>
<br/><br/><span>
<strong>Tajuk</strong><br/>
Text disini
</span>
</center>
</marquee>
</div>

Keterangan Skrip:

1. Sila tukar/gantikan perkataan'Tajuk' dan 'Text Disini' dengan ayat/text anda sendiri.

Selamat Mencuba...Wassalam

Read More

Step By Step Bina Blog

Salamz...
Okey..tutorial saya yang pertama ini tertumpu kepada step-step untuk memulakan pembinaan laman blog..di bawah ini di paparkan gambar menunjukkan step dari mula pembinaan sehinggalah siap, baiklah..silalah follow....:)

1. Step pertama kali anda perlu taip www.blogger.com--->Pilih bahasa--->klik butang "rekalah blog sekarang/create Blog"



2. Step kedua lengkapkan borang maklumat seperti tertera di laman blogger .



. Setelah selesai mengisi maklumat diri anda teruskan ke step lain pula--->seperti di bawah


4. Seterusnya... pilih template atau dengan bahasa mudah..baju web blog anda...pilih yang mana berkenan dan ----> Klik butang "Teruskan/Next"

5. Tada....dah siap...senangkan?

Bersambung ke tutorial akan datang....Sekian....

Read More