Aku dan Blogspot

Salam kemaafan

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

Salam

Aku tengah cari mood utk mengupdate blog ni..
Maaf sekali lagi kalo blog ni terbior bontang ye..

p/s: kepada follower2 sekelian jengah-jengah la kat seantero.info
Suratkhabar melayu ada, omputih ada, cina ada, india pun ada..
Auto update setiap 1 jam sekali...

Selamat Berpuasa

2010-08-11T01:45:00.000-07:00

Selamat berpuasa kepada semua pembaca blog ini. Diharap kita semua mendapat keberkatan di bulan Ramadhan tahun ini. Amin....

Buat Sticky Post

2010-04-26T07:32:00.000-07:00

Salam semua..
Kali ini aku nak kongsikan cara nak buat sticky entri dalam blogspot. Apa yang dimaksudkan dengan sticky entri ialah post yang sentiasa berada di atas(muka depan) blog korang. Jom godek daaaa.....
Cara dia mudah je.. Masa dah siap tulis entri korang, klik kat Post Options dan tukar tarikh kepada tarikh yang akan datang. Apa-apa hal boleh tengok gambar di bawah(jangan malu-malu klik gambar tuu kalo kecik sangat... hahahaha)

Buat Newsletter

2010-04-15T09:50:00.000-07:00

Salam semua..

Sory byk2 kalo aku menyepi tanpa entri dalam blog ini. So xpayah nak citer panjang, aku nak share 1 godek yg sempoi iaitu cara-cara membuat newsletter dalam blog. Nak tau apa itu newsletter, klik sini utk maklumat lanjut.

Apa yang korang boleh tengok kat sidebar aku(2nd last), ada ruangan newsletter utk kengkawan. So cara nya camni:-

1) Pergi ke http://google.com/friendconnect dan login.

2) Kemudian klik nama blog korang di sidebar sebelah kanan

3) Kemudian klik pautan 'Send a newsletter'.

4) Klik check box “Ask visitors to subscribe immediately after their first sign-in" dan klik Newsletter Gadget tab.

5) Tukar ayat korang sendiri dan pilih lah kaler yg korang minat

6) Generate code dan copy code tersebut

7) Pergi ke Layout > Page Elements > Add a Gadget > HTML/JavaScript Gadget

8) Paste kod tadi dalam HTML/JavaScript Gadget

Setel. Sekarang korang boleh gunakan newsletter korang.

Aku yang busy

2010-01-19T11:36:00.000-08:00

Maaf semua kalo aku lambat balas komen korang ke? Takde posting baru ke? Lambat balas emel ke? Ini adalah disebabkan aku sibuk dengan projek akan datang aku..

Insya Allah bulan Feruari nanti aku sambung balik posting kat sini ye...

Apa yang aku sempat hanyalah menjawab emel dan komen korang.(ada masa terluang)

Sekali lagi aku memohon maaf...

p/s: Doakan aku berjaya dengan projek aku ye kengkawan....

No Labels

2010-01-05T13:06:00.000-08:00

Salam semua...

Berpandukan tajuk kali ini, ada sorang member menanyakan bagaimana nak hilangkan labels pada setiap pos dan inilah jawapannya.

p/s: Save dulu templates asal korang...

Apa yang perlu dilakukan ialah:-

1) Pergi ke Layout > Edit HTML dan klik Expand Widget Templates.

2) Cari kod di bawah

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

3) Delete dan save.

Siap....

Posted By Below Post Title

2009-12-17T09:45:00.000-08:00

Salam..

Tajuk godek kali ini agak mengelirukan, jadi aku senangkan dengan gambar di bawah:-

Berdasarkan gambar, posted by telah berada di bawah tajuk entri korang.

Jom godek..

1) Pergi ke dashboard--> layout- -> Edit HTML dan klik "Expand Widget Templates"

2) Cari kod di bawah
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Cut kod di atas dan save kan dulu dalam notepad.

3) Kemudian cari kod ini pula
<div class='post-body entry-content'>

4) Copy kod yang korang cut tadi betul2 selepas kod <div class='post-body entry-content'>

5) Save dan lihat blog korang...

Tukar Penampilan Links dalam Blog

2009-12-16T07:25:00.000-08:00

Salam semua..

Tajuk godek hari ini ialah menukarkan penampilan links dalam blog korang menjadi lebih menarik. Korang boleh tengok kat links dalam blog aku ini.

Let's godek...

1) Pergi ke layout- -> Edit HTML dan klik "Expand Widget Templates"

2) Cari kod di bawah
a:hover {
text-decoration:underline;
}

3) Tukarkan dengan kod ini
a:hover {
position: relative;
bottom: 5px;
left: 1px;
color:#000000;
}

4) Save dan siap

p/s: korang boleh tukarkan warna links(apabila tweak) dengan menukar kod color di atas. Boleh rujuk sini untuk bermacam color

ProCon Latte

2009-11-28T11:58:00.000-08:00

Salam semua..

Sebelum aku tido ni, aku nak kongsikan pasal add-ons mozilla yang aku pakai dan sememangnya bagus iaitu ProCon Latte

Add-ons ni berfungsi untuk block sebarang website yang mengandungi unsur lucah. Sesuai untuk sesiapa yang punya anak atau adik yang baru nak kenal dunia internet ni.

Apa yang korang perlu buat ialah klik link Procon Latte tadi dan install je terus. Restart mozilla korang dan siap untuk block sebarang kelucahan. Selain itu, korang juga boleh list kan website-website yang korang rasa tidak bagus untuk dilayari dengan menyenaraikan nama-nama website tersebut di dalam list ProCon Latte.

Cuba, jangan tak cuba... Ok aku nak tido..

p/s: Hanya untuk pemakai Mozilla saja..harap maklum

Labels di bawah Tajuk Entri

2009-11-27T18:38:00.001-08:00

Salam...

Kali ini aku nak kongsikan 1 godek yang direquest oleh seorang member yang meminta menukar lokasi labels di bawah tajuk entri. Lihat contoh di bawah:-

Ok jom godek...

1) Pergi ke Layout > Edit HTML dan tick Expand Widget Templates

2) Cari kod


<b:include data='post' name='postQuickEdit'/>
</span> </div>

<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span> </div>

<div class='post-footer-line post-footer-line-3'/>

p/s:Setiap blog mungkin berlainan kod, so korang kena cari kod labels blog korang sendiri.Yang penting kod yang berwarna hitam di atas adalah sama saja, hanya merah mungkin berlainan.

3) Cut kod yang berwarna merah di atas ( dan paste selepas kod di bawah
<div class='post-header-line-1'/>

Preview blog korang, jika menjadi save terus....

p/s: Kalau entri korang takde labels, tak perlulah korang praktikkan godek ini....

Selamat Menyambut Hari Raya Aidiladha

2009-11-26T01:43:00.000-08:00

Salam semua...

Dengan kesempatan yang ada ini, aku ingin mengucapkan Selamat Hari Raya Aidiladha. Sama-samalah kita menghayati setiap pengorbanan yang lalu untuk meningkatkan keimanan dalam diri kita semua. Amin.

Aku sayang emak aku....

2009-11-19T02:16:00.000-08:00

Sama-sama kawan-kawan renung-renungkan.

Orang kata aku lahir dari perut ibu..
Bila dahaga, yang susukan aku.. ibu
Bila lapar, yang suapkan aku..ibu
Bila keseorangan, yang sentiasa di sampingku.. ibu
Kata ibu, perkataan pertama yang aku sebut.. Ma!
Bila bangun tidur, aku cari.. ibu
Bila nangis, orang pertama yang datang ..ibu
Bila nak bermanja.. aku dekati ibu
Bila nak bergesel... aku duduk sebelah ibu
Bila sedih, yang boleh memujukku hanya ibu
Bila nakal, yang memarahi aku ...ibu
Bila merajuk... yang memujukku cuma..ibu
Bila melakukan kesalahan... yang paling cepat marah..ibu
Bila takut... yang tenangkan aku.. ibu
Bila nak peluk... yang aku suka peluk..ibu

Aku selalu teringatkan ..Ibu
Bila sedih, aku mesti talipon... Ibu
Bila seronok... orang pertama aku nak beritahu...Ibu
Bila bengang.. aku suka luah pada ..Ibu
Bila takut, aku selalu panggil.. "ibuuuuuuuuuuuuu!"
Bila sakit, orang paling risau adalah ..Ibu
Bila nak exam, orang paling sibuk juga Ibu
Bila buat hal, yang marah aku dulu..Ibu
Bila ada masalah, yang paling risau.. Ibu
Yang masih peluk dan cium aku sampai hari ni.. Ibu
Yang selalu masak makanan kegemaranku.. Ibu
Yang selalu simpan dan kemaskan barang-barang aku, Ibu
Yang selalu berleter kat aku.. Ibu
Yang selalu puji aku.. Ibu
Yang selalu nasihat aku.. Ibu
Bila nak kahwin..
Orang pertama aku tunjuk dan rujuk... Ibu

Aku ada pasangan hidup sendiri
Bila seronok... aku cari pasanganku
Bila sedih... aku cari Ibu
Bila berjaya... aku ceritakan pada pasanganku
Bila gagal... aku ceritakan pada Ibu
Bila bahagia, aku peluk erat pasanganku
Bila berduka, aku peluk erat Ibuku
Bila nak bercuti... aku bawa pasanganku
Bila sibuk... aku hantar anak ke rumah Ibu
Bila sambut valentine.. Aku hadiahi bunga pada pasanganku
Bila sambut hari ibu...
aku cuma dapat ucapkan Selamat Hari Ibu
Selalu ..... aku ingat pasanganku
Selalu... Ibu ingat kat aku
Bila..bila... aku akan talipon pasanganku
Entah bila.. ...aku nak talipon Ibu
Selalu ...aku belikan hadiah untuk pasanganku
Entah bila... aku nak belikan hadiah untuk Ibuku

Renungkan:

"Kalau kau sudah habis belajar dan berkerja... bolehkah kau kirim wang
untuk Ibu? Ibu bukan nak banyak... lima puluh ringgit sebulan pun
cukuplah". Berderai air mata aku. Hari ini kalau Ibu mahu lima ratus
sebulan pun aku mampu. Aku boleh kirimkan. Tapi Ibu sudah tiada. Aku tidak
berkesempatan lagi.. bukan lima puluh ringgit.. lima puluh sen pun tidak
sempat aku kirimkan! Hanya yang termampu Alfatihah, Alfatihah, Alfatihah.

p/s: Jom tiap-tiap hari cium mak kita. Makkkkk... I Love You muaaahhhhhhhh...

Display Related Posts with Thumbnails

2009-11-17T03:29:00.000-08:00

Salam semua,

Tajuk godek kali ini agak kebaratan kerana aku x reti nak translate kan nye.
Tapi apa-apa hal korang boleh tengok gambar di bawah.

Senang cakap, setiap entri korang akan ada entri berkaitan bersertakan gambar kecil.hehhh

Ok la, jom godek...

1) Korang kena isi form dulu kat LinkWithIn.org

2)Pastikan korang pilih platform "Other"

3) Kemudian klik Get Widget

4) Setelah korang klik, terdapat HTML kod utk di copy. Tapi apa yang korang perlu buat ialah hanya copy kod ID mengikut gambar di bawah.

5) Kemudian pergi ke Layout>Edit HTML dan tick Expand widget templates

6) Cari kod

.post-footer {

7) Copy kod di bawah dan paste sebelum .post-footer {

<b:if cond='data:blog.pageType == "item"'>
<script>
var linkwithin_site_id = SITE_ID_KORANG;
(function () {
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'http://www.linkwithin.com/widget.js?rand='   Math.random();
document.getElementsByTagName('head')[0].appendChild(elem);
})();
</script>
<a href="http://www.linkwithin.com/"><img
src="http://www.linkwithin.com/pixel.png" alt="Blog Widget by LinkWithin"
style="border: 0" /></a>
</b:if>

6) Tukar SITE_ID_KORANG dengan ID yang korang copy dalam step 4

Setel..

Membuat mesej alu-aluan

2009-10-31T06:17:00.001-07:00

Salam semua..

Hari ini aku nak kongsikan satu godek yang sempoi iaitu 'membuat mesej alu-aluan'.
Heh... kalau korang masih confuse, cuba try klik blog testing aku ni.

Yaa.. menarikkan. Jom godek

Apa yang korang perlu buat ialah:-

1) Pergi ke Layout > Add a Gadget > HTML/Javascript

2) Copy kod di bawah ini

<script language='JavaScript'>
window.alert(" SELAMAT DATANG! ");
</script>

3) Save dan tengok hasilnya..

p/s:Korang boleh tukarkan kata alu-aluan korang sendiri dengan tukarkan SELAMAT DATANG!

Mudahkan.. Selamat mengodek..

Pengumuman

2009-10-28T04:40:00.000-07:00

Salam semua..

Aku nak wat pengumuman sikit ari ni..
Sesiapa yang dok area Muar ke Batu Pahat ke? Jom lepak2 ngeteh..
Mana tau ada projek baik boleh citer2 skit..

Aku memang nak cari member2 yang bleh lepak 1 table citer pojex kat internet ni..
So kengkawan, kalo de roger2 je ok....

Salam.....

p/s: Nanti2 aku post kan godek baru ye.. rlex2 dlu..

Membuat efek Marquee pada Site Title

2009-10-25T12:29:00.000-07:00

Salam semua..

Sory laa kalau dah lama tak post kan godek2 kat sini.
Hari ini atas permintaan seorang member, aku kongsikan 1 godek cara membuat efek bergerak (marquee) pada site title. Contoh korang boleh tengok kat blog ini. (tengok kat browser)

Caranya sangat sempoi iaitu:-
1. Pergi Layout --> Edit HTML.

2. Setelah itu copy kode Javascript kat blog ini selepas kod <head>

3. Tukar Nama Site dengan tajuk blog korang

4. Save dan enjoy...

p/s: Aku xpaham kenapa kod dlm pos ni x function.. tapi kod kat blog ni boleh plak.
Sila pergi ke blog ini utk mendapatkan kod tersebut..

Gathering Hari Raya

2009-09-28T04:20:00.000-07:00

Beraya Bersama Kawan Sekolahku

Tarikh : 25/9/09 (Raya ke-6)
Tempat : Rumah Puntat
Waktu : 10 mlm ke atas
Aktiviti : Eat & Wet

Meriah hingga basah....

Paparkan Yahoo Messenger Status Dalam Blog

2009-09-23T16:31:00.000-07:00

Salam Raya semua..

Aku harap korang semua dalam keadaan sihat dan gembira semuanya. Pada Hari Raya ke-5 ini, aku nak kongsikan 1 godek yang menarik iaitu memaparkan YM status korang dalam blog.

Apa yang korang perlu buat ialah pergi ke Layout > Add a Gadget > HTML/Javascript

Kemudian masukkan kod di bawah

<a href="ymsgr:sendIM?NAMA YM KORANG"> <img src="http://opi.yahoo.com/online?u=NAMA YM KORANG&m=g&t=2&l=us"/>
</a>

dan tukarkan tulisan merah dengan nama YM korang. Save.. Setel.

Itu saja dan selamat mengodek di Hari Raya

Selamat Hari Raya

2009-09-17T13:23:00.000-07:00

Salam semua..

Memandangkan Hari Raya pun tinggal 2 hari je lagi, aku di sini memohon maaf kalo2 ada terkasar bahasa ke, terkecik kan hati korang ke, apa-apa je yang tersalah. Aku harap korang dapat memaafkan aku ye.. (0-0) :-)

Aku harap korang dapat berkunjung lagi ke GodekBlog nie walaupun aku dh jarang2 meluangkan masa kat blog ni. Tapi jika korang ada sebarang request, aku akan cuba post kan utk kengkawan.

Akhir kata

p/s: hati-hati bagi yg balik kampung...

Akhirnya.....

2009-09-13T16:01:00.000-07:00

Salam semua..

Hari ini aku nak umumkan bahawasanya, aku telah berjaya menyiapkan website aku setelah sekian lamanya. So tujuan aku tuliskan entri ini adalah untuk meminta kengkawan memberikan komen pada web baru aku ini tentang design ke, color ke, apa-apa je la yang korang nak komen.(komen membina)

Aku tak kisah korang nak komen apa pun yang penting ikhlas. So apa lagi, cepat mengomen yee...

Ini website aku GotClutch.com

Navigation Tab Sempoi

2009-09-06T05:39:00.000-07:00

Request dari salah seorang rakan kita yang meminta untuk membuat navigation tab.
Untuk makluman godek ini telah aku buat dan boleh tengok kat sini.
Tapi mungkin godek yang lepas ini agak sukar, so aku kongsikan 1 cara yang sempoi malam ni.

Korang boleh tengok blog cubaan aku di sini yang menggunakan tab sempoi ini.

Ok jom godek...

Apa yang korang perlu buat ialah

1) Pergi Layout > Add a Gadget dan pilih HTML/Javascript

2) Masukkan kod di bawah ke dalam HTML/Javascript

<a href="http://BLOGKORANG.blogspot.com">|HOME|</a><a href="http://godekblog.blogspot.com">|GODEK|</a><a href="http://google.com">|FAVORITES|</a><a></a>

Dalam kod di atas korang perlu tukar sendiri link/pautan(merah) dan ayat(biru)

3) Save dan drag HTML/Javascript korang tadi ke bawah header blog. Refer gambar di bawah:-

Setel...

Warna-warni blog

2009-09-06T05:08:00.000-07:00

Salam semua..

Hari ini aku nak kongsikan 1 cara paling sempoi untuk mengindahkan blog korang dengan warna-warna kegemaran. Mungkin ada diantara korang dah tahu cara ini, tapi takde hal kan..

Jika korang nak mendapatkan warna kegemaran korang dengan menggunakan kod hex agak susah, so disini apa yang sempoi nya ialah korang tidak perlu pening-pening nak dapatkan kod hex itu kerana hanya dengan 1 klik saja masalah korang akan selesai.

Apa yang korang perlu buat ialah install add-ons untuk mozilla.

p/s: ini hanya untuk pengguna mozilla saja.

1) Install add-ons di sini

2) Bila siap install, restart mozilla korang

3) Nanti korang akan nampak gambar ini di hujung bawah sebelah kiri browser korang.

4) Kemudian korang klik icon tersebut dan halakan ke mana-mana kaler dalam website yang korang berkenan. Di bawah dalah contoh warna untuk header blog aku.

Gunakan kod hex itu di dalam HTML template blog korang.Ok.. sempoi kan..

Apa lagi, cat baru ler blog korang sbb dah nak raya ni.. heheheh

Arios...

Led Zeppelin - Kashmir

2009-08-13T04:27:00.000-07:00

Layan beb......

p/s: tetiba je aku nak posting video... hahahhahah

Tukar cursor/pointer dalam blog

2009-08-12T09:20:00.000-07:00

Salam semua..

Semalam aku ada dapat request dari seorang member yang menanyakan bagaimana mahu menukarkan cursor di dalam blog kita. Sesudah aku mengodek-godek, akhirnya aku telah ketemu 1 cara yang paling mudah.

Apa lagi jom godek....

Apa yang korang perlu buat ialah

1) Pergi ke Layout>Add a Gadget>pilih HTML/Javascript

2) Masukkan kod di bawah ke dalam HTML/Javascript tadi

<style type="text/css">body {cursor:url("http://i680.photobucket.com/albums/vv161/tikitiki_girlgirl/Slorg.gif"),default}</style>

3) Tukarkan kod merah dengan link cursor korang tersendiri (klik sini untuk pelbagai cursor)

p/s: pastikan korang ambil Direct Link utk cursor pilihan korang..okay.

Setel..

Masukkan Image Slide Show dalam Header

2009-07-29T04:20:00.000-07:00

Salam semua,

Kali ini aku nak kongsikan 1 godek yang diminta oleh l@n@.
Aku telah berjaya mengodeknya tadi dan korang boleh tengok kat blog ini.

Jom godek...

Sebelum itu, korang kena tukarkan sedikit HTML kod dalam template korang.

1) Pergi ke Layout>Edit HTML

2) Cari kod ini

<div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML2' locked='yes' title='' type='HTML'/>
</b:section>
 </div>

3) Kemudian tukarkan jadi seperti di bawah:

<div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
 </div>

4) Save dan Layout blog korang akan jadi seperti di bawah

Kemudian apa yang korang perlu buat ialah pergi ke photobucket.com dan upload gambar-gambar korang. Kepada yg belum register, silalah mendaftarkan diri.. free je.

Apabila korang telah upload gambar korang, klik create slideshow dan masukkan berapa banyak gambar korang.(tapi tak silap aku 3 je boleh..heheheh). Kemudian save dan cari ruangan share dan copy Direct Link
Refer gambar di bawah:-

Sesudah korang mendapatkan kod korang tadi, pergi ke Layout>Add a Gadget(bahagian header tadi) > HTML/JavaScript Add

Masukkan kod dibawah kedalam HTML/JavaScript.

<div style="width:660px; text-align: center;">
<embed width="660" src="http://w987.photobucket.com/pbwidget.swf?pbwurl=http://w987
.photobucket.com/albums/ae360/bedot82/437101de.pbw" wmode="transparent"height="210"
type="application/x-shockwave-flash"></embed></div>

Kemudian korang tukarkan width, height dan link(Direct link dari photobucket tadi) korang refer pada kod berwarna merah.

p/s: width size mesti mengikut header korang, jangan belasah je nanti blog jadi merapu..

Siap....

Sesiapa yang kurang paham, jangan segan-segan tinggalkan komen.

Random Rotating Post gadget

2009-07-16T21:14:00.000-07:00

Haloooooo..

Godek baru sampei lagi...
Apa daa maksud tajuk godek kali ini tapi kalo korang nak tengok contoh, usha-usha ler sidebar aku..hhahahahah

Amcam gerek tak?
Heh... Jom godek

Apa yang korang perlu buat ialah:-

1) Pergi ke Layout > Add a gadget > Html/Javascript gadget

2) Kemudian korang masukkan kod di bawah (ruang Title biar in kosong)

<style type="text/css">
    .gfg-root {
  width : 85%;
  height : auto;
  position : relative;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 18px;
  border: 1px solid #BCCDF0;
}

.gfg-title {
  font-size: 20px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-title a {
  color : #3366cc;
}

.gfg-subtitle {
  font-size: 20px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
  margin-bottom : 0px;
}

.gfg-subtitle a {
  color : #3366cc;
  display:none !important;
}

.gfg-entry {
  background-color : white;
  width : 100%;
  height : 6.9em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : auto;
  height : 100%;
  padding-left : 20px;
  padding-right : 5px;
}

.gfg-list {
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-bottom : 5px;
  display:none !important;
}

.gfg-listentry {
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  padding-left : 15px;
  padding-right : 5px;
  margin-left : 5px;
  margin-right : 5px;
}

.gfg-listentry-odd {
  background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight { 
  background-image : url('garrow.gif');
  background-repeat: no-repeat;
  background-position : center left;
}

/*
 * FeedControl customizations.
 */

.gfg-root .gfg-entry .gf-result .gf-title {
  font-size: 18px;
  line-height : 1.2em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
  height : 3.8em;
  color: #000000;
  margin-top : 3px;
}

/*
 * Easy way to get horizontal mode, applicable via js options to gadget.
 */

.gfg-horizontal-container {
  position : relative;
}

.gfg-horizontal-root {
  height : 1.5em;
  _height : 100%;
  position : relative;
  white-space : nowrap;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  border: 1px solid #AAAAAA;
  padding : 5px;
  margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
  font-weight : bold;
  background-color: #FFFFFF;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  float : left;
  padding-left : 10px;
  padding-right : 12px;
  border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
  color : #444444;
  text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
  width : auto;
  height : 1.5em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 0px;
  margin-left : 0px;
  padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : 100%;
  height : 100%;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
  display : none;
}

/*
 * FeedControl customizations.
 */

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
  display : none;
}

.gfg-horizontal-root .gfg-entry  .gf-result .gf-title {
  color: #0000cc;
  margin-right : 3px;
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
  display : block;
  color: #AAAAAA;
}

.gfg-branding {
  white-space : nowrap;
  overflow : hidden;
  text-align : left;
  position : absolute;
  right : 0px;
  top : 0px;
  width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
  background-repeat : no-repeat;
  background-position : center;
  cursor : pointer;
  float : right;
  width : 17px;
  height : 20px;
}

.gfg-collapse-open {
  background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
  background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
  float : left;
}

.clearFloat {
  clear : both;
}
body {
      background-color: white;
      color: black;
      font-family: Arial;
      font-size: small;
      margin: 0;
    }
    #feedGadget { 
      margin-top : 5px;
      margin-left: auto;
      margin-right: auto;
      width : 440px;
      font-size: 16px;
      color: #9CADD0;
    }
</style>
<script src="http://www.google.com/jsapi/?key=PASSWORD AJAX" 
 type="text/javascript"></script>
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

  <script type="text/javascript">

    function showGadget() {
      var feeds = [
       {title:'title',
        url:'http://godekblog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
       
       ];

      new GFdynamicFeedControl(feeds, 'feedGadget',
                               {numResults : 1000, stacked : true,
                               title: "Kandungan Blog Aku"});
    }
    google.load("feeds", "1");
    google.setOnLoadCallback(showGadget);
  </script>
<div id="feedGadget">Sila tunggu....</div>
  <div id="feedGadget"> <a href="http://godekblog.blogspot.com/" target="_blank">GodekBlog</a>.</div>

Kemudian korang tukarkan bold dalam kod tadi dengan korang punya.

- http://godekblog.blogspot.com = URL blog korang
- Kandungan Blog Aku = Tajuk gadget korang
- PASSWORD AJAX (klik sini untuk dapatknya)

Save dan letakkanlah di mana-mana korang suka..

Arios..

p/s: sory la kalo lama x update..hohohhhoo

Aku sibuk dengan kawan baruku...

2009-07-16T05:46:00.000-07:00

Salam kepada semua..

Aku tengah busy dengan kawan baru aku ni.. nama dia DRUPAL. hehehehe
Tengah mengodek drupal utk pojek akan datang.. doakan la aku berjaya mengodek si kawan baruku ini.

Maaf la semua ye..

p/s: kepada kengkawan yang request sebarang godek, boleh tak detailkan lagi soalan anda supaya aku senang nak paham dan terus je mengodek tanpa menanyakan balik pertanyaan korang.hahahaha

maaf kpd sesiapa yg terasa..

no offense.. none taken.. peace..

(kalo sempat mlm ni aku postkan godek terbaru ye.. arios)

Membuat Table Dalam Pos

2009-06-28T04:44:00.000-07:00

Salam semua...

Godek kali ini adalah requet dari Faizah yang mahu memasukkan table/kotak seperti jadual di dalam pos entri. Korang boleh tengok sini

Jom godek..

Refer pada blog cobaan aku tadi, apa yang korang perlu buat ialah memasukkan kod seperti di bawah di dalam pos entri korang.

<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH COLSPAN=2>TOTAL TEST</TH> </TR>

<tr> <td>NAMA</td>     <td>TEST 1</td>  <td>TEST 2</td> </tr>
<tr> <td>Dol</td>      <td>90%</td>     <td>80%</td> </tr>
<tr> <td>Mat</td>      <td>70%</td>     <td>90%</td> </tr>
<tr> <td>Man</td>      <td>60%</td>     <td>50%</td> </tr>

</TABLE>
<p>

p/s: Pastikan semasa membuat posting dalam Edit HTML mode.

Korang hanya perlu tukarkan teks-teks tersebut.

Jika korang nak masukkan gambar, upload gambar dan masukkannya mengikut mana-mana kotak yang korang suka.(kod HTML untuk gambar tersebut)

Untuk memudahkan korang, kod di bawah adalah contoh dari blog cobaan aku tadi.

<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH COLSPAN=2>TOTAL TEST</TH> </TR>

<tr> <td>NAMA</td> <td>TEST 1</td> <td>TEST 2</td> </tr>

<tr> <td><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_My4fAPyVeIc/SkdWuSJXbqI/AAAAAAAAAf0/xkMChQPu-2c/s1600-h/blog50roberta_jacobson.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 50px; height: 50px;" src="http://2.bp.blogspot.com/_My4fAPyVeIc/SkdWuSJXbqI/AAAAAAAAAf0/xkMChQPu-2c/s200/blog50roberta_jacobson.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5352342035298217634" /></a>Dol</td> <td>90%</td> <td>80%</td> </tr>

<tr> <td>Mat</td> <td>70%</td> <td>90%</td> </tr>

<tr> <td>Man</td> <td>60%</td> <td>50%</td> </tr>

</TABLE>
<p>

Jika kurang paham, tinggalkan komen..

Masukkan Gambar Dalam Scrollbar

2009-06-23T12:00:00.000-07:00

Godek ini request dari syamimi yang mahu meletakkan gambar-gambar di dalam scrollbar. Korang boleh refer sini kalau tak puas hati. heheheh...

Jom godek...

Semasa menulis entri pastikan korang menggunakan mode Edit HTML.
Masukkan kod di bawah di dalam entri korang :-

<div style="border: 1px solid #aaa;background-colo r:#f9efef; width:350px; height:250px; overflow:auto; color:#FFF;"><p>
LETAK KOD ATAU TEKS DI SINI

</p>
</div>

Jika korang nak masukkan gambar, tukarkan kod image yang korang upload dengan tulisan merah.

Contoh :-

<div style="border: 1px solid #aaa;background-colo r:#f9efef; width:350px; height:250px; overflow:auto; "><p>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_My4fAPyVeIc/SkEl4PjQ2HI/AAAAAAAAAfo/buAkEEVVDRc/s1600-h/kawin buntat.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 200px; height: 134px;" src="http://4.bp.blogspot.com/_My4fAPyVeIc/SkEl4PjQ2HI/AAAAAAAAAfo/buAkEEVVDRc/s200/kawin buntat.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5350599480470198386" /></a>

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_My4fAPyVeIc/SkEl4PjQ2HI/AAAAAAAAAfo/buAkEEVVDRc/s1600-h/kawin buntat.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 200px; height: 134px;" src="http://4.bp.blogspot.com/_My4fAPyVeIc/SkEl4PjQ2HI/AAAAAAAAAfo/buAkEEVVDRc/s200/kawin buntat.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5350599480470198386" /></a>

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_My4fAPyVeIc/SkEl4PjQ2HI/AAAAAAAAAfo/buAkEEVVDRc/s1600-h/kawin buntat.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 200px; height: 134px;" src="http://4.bp.blogspot.com/_My4fAPyVeIc/SkEl4PjQ2HI/AAAAAAAAAfo/buAkEEVVDRc/s200/kawin buntat.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5350599480470198386" /></a>

</p>
</div>

Ini adalah contoh dari blog cobaan aku.heheheh

p/s: Dalam kod di atas, korang boleh tukarkan width dan height mengikut kesesuaian blog korang.

Setel...

Masukkan Yahoo Smiley Emoticons Dalam Komen

2009-06-23T11:14:00.000-07:00

Godek kali ini request dari DakMuo yang ingin meletakkan Yahoo Smiley Emoticons ke dalam ruangan komen. Sebelum itu boleh refer kepada gambar di bawah:-

Jom godek...

1) Pergi Layout > Edit HTML dan tandakan Expand Widget Templates

2) Cari kod </body> dan masukkan kod di bawah sebelum </body>

<script src='http://kendhin.890m.com/emoticon/smile1.js' type='text/javascript'/>

3) Kemudian cari kod <b:if cond='data:post.embedCommentForm'>

Masukkan kod di bawah betul-betul selepas kod tadi

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>

Save template korang. Selesai...

Masukkan Search Box Dalam Header

2009-06-19T06:52:00.000-07:00

Alooo semua...

Sorry sebab ter busy pulak minggu lepas, so hari ini aku dapat mengodek 1 lagi benda best iaitu memasukkan Search Box dalam header. Korang boleh tengok gambar di bawah kalau tak puas hati..heheheeh...

Jom godek...

1) Pergi ke Layout > Edit HTML > Expand Widget Templates(tandakan kotak)

2) Cari kod seperti di bawah :-

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

Paste kod di bawah betul-betul selepas kod tadi

#header .searchbox {
text-align:$endSide; //$endSide = Right & $startSide = Left
margin: 25px; // Distance from right or left side
}

3) Kemudian cari kod

<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>

Kemudian masukkan kod di bawah selepas kod di atas

<div class='searchbox'>
<form action='http://blog-korang.blogspot.com/search' id='searchthis' method='get' style='display:inline;'>
<input id='b-query' maxlength='255' name='q' size='20' type='text'/>
<input id='b-searchbtn' type='submit' value='Search'/>
</form></div>

Tukarkan tulisan merah kepada URL blog korang dan tulisan biru pula untuk button search itu nanti.

Selesai.. Enjoy

Masukkan Adsense Dalam Pos Entri

2009-06-13T00:58:00.000-07:00

Godek kali ini adalah request dari Moyumas yang meminta bagaimana memasukkan Adsense ke dalam pos samada di sebelah kiri atau kanan. Tanpa membuang masa, jom godek..

Sebelum itu kepada sesiapa yang blur, boleh refer gambar di bawah:-

Pastikan korang dah monetize atau letakkan adsense di dalam pos korang dengan klik pada Monetize tab

1) Pergi ke Layout > Edit HTML dan tick Expand Widget Templates.

2) Cari kod <data:post.body>

3) Kemudian masukkan kod di bawah sebelum <data:post.body> tadi.

<div style='float:left;'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:if>
</div>

p/s: kalau korang nak adsense itu berada sebelah kanan pula tukarkan left kepada right.

Save template korang dan tengok hasilnya.

Membuat Zoom Efek Pada Gambar

2009-06-08T04:24:00.000-07:00

Salam semua...

Sekali lagi godek untuk kali ini berkaitan dengan gambar juga. Aku akan godek gambar supaya boleh dizoom. Kalau korang nak tengok contohnya, klik sini. (klik gambar untuk zoom)

Jom godek..

1) Pergi Layout > Edit HTML dan cari </head>

2) Kemudian masukkan kod di bawah sebelum </head>

<script src='http://www.sigmirror.com/files/21237_kxmzc/ta.js' type='text/javascript'/>

<script src='http://www.sigmirror.com/files/21238_pa3w8/ti.js' type='text/javascript'/>

3) Cari <body> dan gantikan dengan <body onload='setupZoom()'>

Save template korang.

Apabila korang hendak masukkan gambar mesti dapatkan link URL gambar tersebut dahulu.(gambar persendirian upload dulu ke imageshack.us dulu)

Gunakan kod di bawah untuk dapatkan hasilnya. (gantikan link korang dengan kod merah di bawah)

<a href="Gambar Link"><img src="Gambar Link" width="200" border="0" height="200" />

Image Hover Effect

2009-06-07T07:56:00.000-07:00

Salam & Selamat Sejahtera semua..

Kali ini aku nak kongsikan 1 godek yang agak sempoi dan bergaya iaitu 'Image Hover Effect'. Jika korang masih blur, cuba korang arahkan mouse korang kat gambar ~~awek aku~~ di bawah.

Ok.. jom godek.

1) Pergi ke Layout > Edit HTML

2) Cari kod </head>

3) Kemudian copy kod di bawah dan paste di atas </head> tadi.

<style type="text/css">

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}


a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>

Save template korang.

Jika korang nak menjadikan image di entri korang seperti di atas, korang kena tambahkan sedikit kod di dalam entri korang itu.(Edit HTML mode)
Apabila korang sudah upload gambar, korang akan nampak kod seperti di bawah:-

Apa yang korang perlu buat ialah masukkan kod ini class=linkopacity sebelum kod ini href="http://4.bp.blogspot.com/_My4fAPyVeIc/SivYtBIuLiI/AAAAAAAAAe4/7taiqwWENSE......

Dan akan jadi seperti di bawah:-

Selamat mengodek...

p/s: aku minat giler Fazura ni...heheheheh

Header Terbaru Blog Aku

2009-06-06T12:31:00.001-07:00

Jam menunjukkan pukul 3:32 pagi dan aku baru je selesai mengubah header blog aku.Aku ambil masa lebih kurang 1 jam lebih memikirkan dan men'design' header yang tak seberapa ini. Jadi sesiapa antara korang yang nak beri komen pasal header aku yang baru ini, komen je.. aku tak kisah korang nak komen apa pun.

No offense...
None taken..

Mata aku pun dah mengantuk, kepala pun dah berat so aku nak tido dulu.
Esok lusa aku sambung lagi.

Tukar Font Dalam Blog

2009-06-02T04:19:00.000-07:00

Ok hari in aku nak kongsikan godek terbaru iaitu tukar font dalam entri korang.
Untuk makluman, godek ini hanya sesuai untuk mereka-mereka yang menggunakan Windows XP/Vista sahaja.

1) Contoh teks yang terpapar
Kodnya ialah seperti di bawah:-

<span style="font-family: Comic Sans MS; font-size: 12pt; line-height: 115%;">Contoh teks yang terpapar</span>

p/s: tukarkan bold untuk tukar font lain mengikut contoh di bawah dan italic pula teks korang

2)Contoh teks yang terpapar
Tukarkan kepada Impact

3)Contoh teks yang terpapar
Tukarkan kepada Lucida Console

4)Contoh teks yang terpapar
Tukarkan kepada Roman

5)Contoh teks yang terpapar
Tukarkan kepada Old English Text MT

6)Contoh teks yang terpapar
Tukarkan kepada Script MT Bold

7)Contoh teks yang terpapar
Tukarkan kepada WST_Fren

8)Contoh teks yang terpapar
Tukarkan kepada WST_Swed

Masukkan Video Dalam Blog

2009-05-30T05:14:00.000-07:00

Hari ini aku nak godek masukkan video youtube atau mana-mana site video ke dalam blog. Caranya adalah mudah sekali iaitu copy sahaja embed video tersebut. Sebagai contoh lihat gambar di bawah(youtube):-

Kemudian korang paste ke dalam blog korang. Pastikan dalam Edit HTML mode.

Siap..

Dan kalau korang nak adjust size video korang, korang boleh adjust dengan menukarkan width dan height video tersebut. Caranya ialah, apabila korang paste Embed vidoe tersebut(Edit HTML mode), korang akan dapat tengok seperti kod di bawah:-

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/f1vvUec71v8&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/f1vvUec71v8&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Apa yang korang perlu lakukan ialah tukarkan nombor yang merah kepada nombor yang korang suka. Itu saja..

Di bawah adalah video yang telah aku adjust.. heheheh...

Enjoy.

Masukkan Pos Terbaru (Recent Posts) Widget

2009-05-29T10:20:00.000-07:00

Salam & Selamat Sejahtera kepada semua

Kali ini aku nak kongsikan 1 godek yang agak simple untuk blog korang iaitu Recent Post Widget. Boleh rujuk gambar di bawah:-

Baiklah jom godek...

1) Pergi ke Layout > Add A Gadget > Feed

2) Masukan Feed URL blog korang di dalamnya.
Contoh Feed URL blog aku:- http://godekblog.blogspot.com/feeds/posts/default

Bagaimana mendapatkan Feed URL?
Di paling bawah pos blog korang terdapat link Posts(Atom) atau korang tengok gambar

Di situlah Feed URL blog korang.

3) Sesudah korang masukkan Feed URL blog korang, save dan tengok blog korang.

Sekian, terima kasih.

p/s: korang boleh tukarkan tajuknya.

Buat Warna Background dalam Pos

2009-05-24T07:47:00.000-07:00

Kalau korang nak highlight perenggan atau ayat-ayat dalam pos korang macam kat bawah , cuba try godek ini.

<div style="background:#d4e8d9; padding:5px 8px 5px 8px;">
TEKS KORANG
</div>

Jangan lupa tukarkan merah dengan warna korang di sini

Kalau korang nak letakkan image background, gunakan kod di bawah:-

<div style="background:url(Link URL gambar korang) no-repeat;">
TEKS KORANG
</div>

Jangan lupa tukarkan link URL gambar korang(merah)

Arios...

Buat Link Exchange

2009-05-18T09:34:00.000-07:00

Tajuk pos untuk kali ni adalah refer kepada pertanyaan member mengenai cara-cara membuat 'Link Exchange' melalui emel. Dengan menggunakan cara ini, kita dapat bertukar link dengan member-member korang.

1) Korang boleh ke chicklette.net untuk membuat logo korang sendiri ataupun mana-mana site yang menyediakan perkhidmatan percuma.

2) Apabila sudah siap, korang perlu save di komputer korang dan upload samada di imageshack.us , imageboo.com atau seumpama.

3) Copy URL image logo korang

4) Tukarkan tulisan merah kepada URL korang dan perkataan korang sendiri untuk kod di bawah:-

<h2>Link Exchange</h2>
<br/>
Copy kod dibawah dan letakkan di blog anda.

<br/>
<img src="http://link-gambar-korang.gif" border="0" alt="Ayat Korang">
<br/><br/>
<textarea name="code" rows="4" cols="20">
<a href="http://URL-Blog-Korang.com/" target="_blank"> <img src="http://link-gambar-korang.gif" border="0" alt="Ayat Korang"></a>
</textarea>

Pergi ke Layout>Add Gadget> HTML/Javascript dan masukkan kod di atas setelah korang ubahkannya.

Ok setel..

Ubah Background Template

2009-05-15T21:31:00.000-07:00

Salam & Selamat Sejahtera

Kali ini aku nak kongsikan 1 lagi ilmu godek berpandukan pada member yang menanyakan tentang cara mengubah background blog. Apa yang dipraktikan di sini ialah pengubahan template untuk Minima Blogger Template.

Ok, di sini memerlukan beberapa langkah.

1) Cari kod seperti di bawah

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Kemudian tukarkan tulisan merah kepada background: #000;

Dan bila korang preview blog, blog korang akan jadi seperti di dalam gambar di bawah:-

p/s: untuk ubah warna pergi ke sini dan ubahkan tulisan hijau(kod hex) background: #000;

2) Cari kod

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Kemudian tambahkan kod warna merah ke dalamnya.

#outer-wrapper {
background: #ffffcc;
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Preview dan blog korang akan jadi seperti gambar di bawah:-

Untuk ubah warna :-

header cari kod

#header-wrapper {

Blog post cari kod

#main-wrapper {

Sidebar cari kod

#sidebar-wrapper {

Masukkan kod ini background: #ffffcc; selepas kod-kod bahagian mana yang korang nak ubah. Ingat mesti tukar tulisan hijau mengikut warna korang.

3) Masukkan gambar sebagai background blog

Pastikan gambar yang hendak digunakan bersaiz 1024 x 768 jpg file. (meliputi seluruh blog)

Ok di sini aku akan gunakan imageboo.com sebagai platform gambar yang akan di uploadkan.
Setelah korang uploadkan gambar korang, sila gunakan link seperti "http://imageboo.com/contoh.jpg"

Kemudian korang pergi ke Layout >> Edit HTML.
Cari kod

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Tukarkan kod merah kepada

background:#fff url("direct URL of the image");
background-position: down-left;
background-attachment: fixed;
background-repeat: no-repeat;

Tukarkan link gambar korang yang telah diuploadkan tadi.
Preview dan jika memuaskan, korang boleh save template blog korang.

Arios...

Membuat Teks dan Banner (Marquee)

2009-05-13T03:22:00.000-07:00

Marquee adalah menggerakkan teks atau banner mengikut kehendak korang.
Cara-caranya ialah :-

1)Bergerak dari kanan ke kiri
Masukkan kod ini

<marquee>TEKS KORANG</marquee>

TEKS KORANG

2)Bergerak dari kiri ke kanan
Masukkan kod

<marquee direction="right">TEKS KORANG</marquee>

TEKS KORANG

3)Bergerak memantul kiri ke kanan dan kanan ke kiri
Masukkan

<marquee behavior="alternate">TEKS KORANG</marquee>

TEKS KORANG

4)Bergerak berjalan dari bawah ke atas.
Kodnya ialah

<marquee direction="up">TEKS KORANG</marquee>

TEKS KORANG

5)Bergerak berjalan dari atas ke bawah.
Kodnya ialah

<marquee direction="down">TEKS KORANG</marquee>

TEKS KORANG

6)Teks berhenti berjalan apabila mouse point pada teks tersebut
Kodnya ialah

<marquee onmouseover="this.stop()" onmouseout="this.start()">TEKS KORANG</marquee>

HA HA HA

OK setakat ini saja, Kalau ada tambahan aku list up lagi.
ARIOS

Tambahan : Marquee untuk gambar

Ok.. kalau korang upload gambar, pasti korang akan jumpa kod seperti di bawah(Edit HTML)

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://assets.aarp.org/www.aarp.org_/cs/fun/nikki_halloween_cat.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 300px;" src="http://assets.aarp.org/www.aarp.org_/cs/fun/nikki_halloween_cat.jpg" border="0" alt="" /></a>

So apa yang korang perlu lakukan ialah tukarkan TEKS KORANG di dalam kod marquee tadi kepada kod HTML gambar korang. Itu saja.

Tambahan

1) Buat blinking teks
Kodnya ialah

<blink> TEKS KORANG </blink>

LIP LAP

2) Adjust kelajuan Marquee Teks
Kodnya ialah memasukkan

scrollamount="2"

Hanya masukkan kod di atas ke dalam mana-mana kod marquee teks korang.
Dan kod korang akan jadi seperti berikut:-

<marquee scrollamount="2">TEKS KORANG</marquee>

TEKS KORANG

p/s: nombor(merah) mewakili kelajuan teks korang bergerak. (Jika korang mahu lajukan maka amaunnya mesti semakin besar)

Membuat Menu Tab View

2009-05-05T16:50:00.000-07:00

Yo..

Kali ini aku nak kongsikan satu lagi ilmu yang menarik iaitu membuat Menu Tab View.
Dengan menggunakan menu tab view korang dapat meminimumkan pengunaan ruang di dalam blog korang. Hanya memerlukan satu layout ianya dapat menampilkan beberapa informasi halaman pada tab-tab yang telah korang buat. Korang boleh tengok sidebar kanan blog aku ini.

Jom godek...

1) Pergi ke Layout > Edit HTML (pastikan korang save dulu template asal)

2) Cari kod ]]></b:skin>

3) Masukkan kod di bawah sebelum ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #FFCC00; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #222; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFE16C; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #FFCC00; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFB7; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

p/s : korang boleh tukar warna atau saiz mengikut kehendak korang berpandukan tulisan merah pada kod tersebut.

4) Selepas itu masukkan kod di bawah sebelum </head>

<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>

5) Save

6) Kemudian korang pergi Layout > Add a Gadget > HTML/Javascript

7) Masukkan kod di bawah di dalam HTML/Javascript tersebut.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :-

Hijau adalah untuk mengubah saiz menu tab view mengikut kehendak korang.

Biru adalah text yang akan tertera pada tab menu korang

Merah adalah isi di dalam tab view korang. Korang boleh masukkan link di dalamnya.
Contoh <a href="http://www.google.com">google</a>
Hanya tukarkan text yang berwarna merah saja.

Ok.. Enjoy..

Masukkan Social Bookmark Pada Setiap Pos

2009-05-03T10:48:00.000-07:00

Apa yang aku nak kongsikan pada hari ini ialah cara-cara memasukkan butang 'social bookmark' pada setiap pos di blog korang. Ini akan memudahkan pelawat blog korang 'bookmark'(Del.icio.us, Google Bookmarks, Technorati) mana-mana pos di dalam blog korang dengan mudah. Sila rujuk gambar di bawah:-

Pastikan save dulu template asal blog korang.

Cara-caranya ialah:-

1) Pergi ke Layout>Edit HTML (klik expand widget templates)

2) Cari kod ini <div class='post-footer'>

3) Kemudian masukkan kod di bawah selepas kod <div class='post-footer'>

<p class='post-footer-line post-footer-line-3'><br/> <div align='left'><a expr:href='"http://www.addthis.com/bookmark.php?pub=4QVQQ2TM5XDPAYVN&amp;url="   data:post.url   "&amp;title="   data:post.title' target='_blank' title='Bookmark using any bookmark manager!'><img alt='AddThis Social Bookmark Button' height='16' src='http://s5.addthis.com/button1-bm.gif' style='border: 0px; padding: 0px' width='125'/></a></div> <!-- AddThis Bookmark Post Button END --></p>

Preview blog korang dan pastikan ada butang 'social bookmark' di dalam blog korang.

Enjoy...

Tambah Page Element di atas Pos

2009-05-01T14:56:00.000-07:00

Salam semua..

Hampir 2 minggu aku tidak update blog aku ini kerna terlalu sibuk dengan kehidupan alam realiti aku..heheheh

So untuk godek kali ini, aku nak kongsikan 1 kaedah yang simple bagi memeriahkan blog kita iaitu menambahkan page element di atas pos/main coloumn blog kita. Korang boleh rujuk gambar di bawah (klik untuk gambar besar) :-

Dengan menambah page element ini, korang dapat memasukkan widget atau apa sahaja di bahagian atas pos korang.

Ianya amat mudah iaitu korang mesti pergi ke Layout>EditHTML (tidak perlu expand widget templates)

Kemudian korang cari kod di bawah:-

<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section> </div>

Apa yang korang perlu lakukan ialah tukarkan no kepada yes.
Save dan tengok layout blog korang, confirm dah jadi macam gambar di atas.

Arios...

Bermasalah dengan Bx-Errors

2009-04-21T09:41:00.000-07:00

Aku sendiri pernah terkena dengan masalah Bx-Errors ni..
Korang boleh rujuk gambar di bawah:-

Selalunya ia akan berlaku apabila kita upload new template.
So di sini, ada jalan penyelesaiannya.

Antara contoh-contoh Bx-Errors:-

* bx-bliced
* bX-ev85ll
* bX-39cc9q
* bX-y6cz0v
* bX-982020

Apa yang korang perlu lakukan ialah copy semua HTML kod yang baru korang upload itu ke dalam Notepad dan cari setiap kod widget korang yang bermula dengan kod b:widget id=
Di bawah adalah contoh-contoh kod widget.

* b:widget id='Header1'
* b:widget id='Blog1'
* b:widget id='Label1'
* b:widget id='HTML1'

Kemudian tukarkan nombor-nombor berikut(merah) kepada nombor yang berlainan untuk mengelakkan Bx-Errors. Pastikan korang tukar kesemua b:widget id= dalam blog korang.

Jika masih berlaku masalah yang sama, korang perlu close korang punya browser dan delete all temporary internet files and cookies. Dan cuba sekali lagi.
Setakat ini saja yang aku dapat berkongsi dan ianya dapat membantu aku menyelesaikan masalah yang telah lama memeningkan otak aku.

Arios...

Disable Right Click Widget

2009-04-17T04:31:00.000-07:00

Refer kepada pos aku yang lepas, ada member minta tolong bagaimana membuatkan gambar tidak boleh di ciplak oleh orang lain. So di sini aku baru saja dapat widget untuk disable right click on blogger. Dengan menggunakan widget ini, orang lain tidak akan dapat menciplak dari blog korang samada gambar, teks etc. Harap dapat membantu.
Ok mari teruskan...

Caranya adalah korang pergi Layout>Add a GadGet>dan pilih HTML/javascript

Copy kod di bawah:-

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

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Function Disabled!";

///////////////////////////////////
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>

Kemudian paste kan dalam HTML/javascript korang tadi dan save.
Setel...

Highlight Author Comments

2009-04-14T17:53:00.000-07:00

Salam & Selamat Sejahtera semua,

1st sekali aku nak minta maaf sebab tak dapat nak translate tajuk post kali ini.
Ok bagi memudahkan semua, sila rujuk gambar di bawah:-

Apa yang dapat dilihat pada gambar ialah bahagian komen untuk aku(pemilik blog) telah bertukar warna. Ini bertujuan untuk membezakan komen diantara pemilik blog dengan pemberi komen yang lain.

p/s: Ini untuk ruangan komen di bawah pos (Embedded below post)

Ok. Kita teruskan dengan godek untuk kali ini.

1) Backup template blog korang.

2) Klik Layout>Edit HTML>Expand Widget Templates. Cari kod di bawah

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Tukarkan dengan kod ini

<ul class='commentlist' style='margin: 0; padding: 0;'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>

<li class='author-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-"   data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></div>

<div class='clear'/>

</li>


<b:else/>

<li class='general-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-"   data:comment.id' title='comment permalink'>

<data:comment.timestamp/>
</a></div>
<div class='clear'/>
</li>

</b:if>
</b:loop>
</ul>

Cuba preview blog korang, jika tiada masalah korang boleh teruskan.

3) Cari kod ini </b:skin>
Kemudian copy kod di bawah dan paste sebelum kod </b:skin> tadi.

.author-comments {
background: #cccccc;
border: 1px solid #333333;
padding: 5px;
}

Pada kod di atas yang berwarna merah ialah warna background dan warna hijau adalah border. So korang boleh tukarkan mengikut kehendak korang di sini.

Selamat mencuba.

Tukar "Older post" dan "Newer post"

2009-04-11T04:26:00.000-07:00

Salam dan selamat sejahtera kepada semua.
Hari ini aku nak kongsikan 1 lagi godek iaitu menukar link older post dan newer post yang terdapat di bawah blog korang.

Munkin korang nak tukarkan perkataan tersebut kepada perkataan korang tersendiri, so korang boleh cuba dengan kegodekan kali ini. Korang boleh tengok contoh di bawah post aku ini.

Mula-mula korang kena pergi Layout>Edit HTML
Sila klik Expand Widget Template

Kemudian korang cari kod

<data:newerPageTitle/> = Newer Post

<data:olderPageTitle/> = Older Post

So korang hanya perlu menukarkan kod-kod di atas kepada ayat korang tersendiri saja.

<data:newerPageTitle/> tukarkan kepada Next/Seterusnya

<data:olderPageTitle/> tukarkan kepada Previous/Sebelumnya

Setel... Korang boleh save dan tengok keberkesanannya. heheheh

Tambah Elemen di bawah Header

2009-03-30T04:14:00.000-07:00

Kali ini aku nak kongsikan cara-cara nak tambahkan elemen di bawah header blog.
Dengan adanya elemen ini, korang boleh masukkan pelbagai widget atau apa-apa yang korang suka. Rujuk gambar:-

Sebelum itu pastikan korang backup dulu template asal korang. Cara-caranya ialah:-

1) Cari kod ]]></b:skin>

Kemudian copy kod di bawah dan paste sebelum kod ]]></b:skin>

#under_header{
margin:10px 0;
padding:1%;
width:98%;
}

2) Kemudian korang cari kod seperti di bawah:-

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

Dan copy kod di bawah dan paste betul-betul selepas kod di atas:-

<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>

Save dan siap, korang boleh tengok layout blog korang.

Sidebar Navigation Widget

2009-03-28T05:21:00.000-07:00

Dah lama aku tidak pos kat blog ini memandangkan sibuk(entah apa yang sibuk entah)
Hari ini aku nak kongsikan satu lagi ilmu iaitu Sidebar Navigation Widget. Dengan menggunakan widget ini, korang boleh meminimumkan ruang di blog korang dan kelihatan kemas.

Korang boleh tengok gambar di bawah:-

Korang copy kod di bawah dan masukkan di dalam page element blog korang.
Layout>Add a Gadget>HTML/Javascript

<style type="text/css">
.sidebarnavbutton {
cursor: pointer;
cursor: hand;
margin: 1px;
padding: 2px;
background-color: #ffffff;
color: #000000;
border-style: solid;
border-width: 1px 2px 2px 1px;
border-color: #C0C0C0 #000000 #000000 #C0C0C0;
}
.sidebarnavbutton:hover
{
cursor: pointer;
cursor: hand;
margin: 1px;
padding: 2px;
background-color: #dddddd;
color: #000000;
border-style: solid;
border-width: 2px 1px 1px 2px;
border-color: #000000 #C0C0C0 #C0C0C0 #000000;
}
</style>
<script type="text/javascript">
//<!--
var sidebarid = 'sidebar';
var widgetClassPrefix = 'widget ';
var widgetClassDisqualifier = 'draggable-widget';
var blnsidebaraccordion = true;
// /-->
</script>
<script src="http://benfinnigan.com/js/sidebarnav.js" type="text/javascript"></script>

Setel...

p/s: Kalau ada masalah harap dimaafkan kerana tidak semua sidebar boleh berfungsi apabila dimasukkan widget ini.

Membuat Tag/Label Cloud

2009-03-16T11:10:00.000-07:00

Kalau korang nak buat tag/label cloud seperti gambar di bawah, pastikan blog korang mempunyai label terlebih dahulu.(label setiap pos)

Jika korang belum ada label, edit pos-pos korang dan masukkan label. Selepas itu add page elements>label.

Sudah lama aku mencuba benda ini, kali ini memang luck, so aku nak kongsikan di sini.
Cara-caranya ialah:-

Klik Layout>Edit HTML>Expand Widget Templates

p/s: Pastikan korang dah backup template asal korang untuk mengelakkan sebarang kejadian yang tidak diingini.

Di sini terdapat 3 langkah yang melibatkan kod HTML, jadi korang kena berhati-hati dengan langkah tersebut.

1) Copy kod di bawah dan masukkan betul-betul sebelum ]]></b:skin>

 /* 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:&quot;&quot; 
!important}

2) Kemudian korang cari kod </head> dan masukkan kod di bawah betul-betul sebelum </head>

 


<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

3) Cari kod seperti di bawah

<b:widget id='Label1' 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'>
<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>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Dan korang kena tukarkan kepada kod ini:-

<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&gt;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 = &quot;<data:label.name/>&quot;;


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] &lt; cloudMin){

continue;


}

for (var i=0;3 &gt; 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>

Ok.. setel..

Page Navigation Widget

2009-03-14T00:21:00.001-07:00

Ok aku baru saja dapat 1 lagi ilmu baru.
Kalau korang kurang faham apa yang dimaksudkan dengan 'Page Navigation Widget', cuba perhatikan gambar di bawah :-

atau tengok blog aku ini yang paling bawah sekali

Mula-mula korang kena pergi Layout>Add Page Element>HTML/Javascript

Korang copy kan kod di bawah dan masukkan ke dalam Page Element tadi.

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/") 14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/' thisLable '?&max-results=' pageCount '">';

for(var i=0, post; post = json.feed.entry[i]; i  ) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c  ) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum  ;
htmlMap[htmlMap.length] = '/search/label/' thisLable '?updated-max=' timestamp 'T00%3A00%3A00%2B08%3A00&max-results=' pageCount;
}
}
}
}//end if(post.category){

itemCount  ;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum  ;
htmlMap[htmlMap.length] = '/search?updated-max=' timestamp 'T00%3A00%3A00%2B08%3A00&max-results=' pageCount;
}
}
itemCount  ;
}
}

for(var p =0;p< htmlMap.length;p  ){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml   upPageWord  '</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'  upPageWord  '</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="' htmlMap[p] '">'  upPageWord  '</a></span>';
}

fFlag  ;
}

if(p==(thisNum-1)){
html  = '&nbsp;<span class="showpagePoint"><u>' thisNum '</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml '1</a></span>';
}else{
html  = '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html  = '<span class="showpageNum"><a href="' htmlMap[p] '">'  (p 1)  ' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="' htmlMap[p] '">'  downPageWord  '</a></span>';
eFlag  ;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p  ){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'  firstPageWord  ' </a></span>' upPageHtml ' ' html  ' ';
}else{
html = '' labelHtml   firstPageWord  ' </a></span>' upPageHtml ' ' html  ' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page ' thisNum ' of ' (postNum-1) ': </span>' html;

if(thisNum<(postNum-1)){
html  = downPageHtml;
html  = '<span class="showpage"><a href="' htmlMap[htmlMap.length-1] '"> ' endPageWord '</a></span>';
}

if(postNum==1) postNum  ;
html  = '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p  ){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>

Selepas korang masukkan widget tadi, korang mesti letakkan page element tadi di bawah blog post korang. Rujuk gambar di bawah:-

Ok, di sini korang boleh tukarkan berapa banyak pos korang yang akan terpapar di setiap page.
Korang tukarkan nombor(merah) yang terdapat dalam kod di atas.

Warna hijau pula untuk nombor page.

p/s: Kalau korang tak ubahkan kod di atas pun tak mengapa..

Enjoy..

Membuat drop down menu

2009-03-10T23:38:00.000-07:00

Kalau korang nak buat drop down menu seperti di atas, cara-caranya ialah:-

Korang kena copy kod di bawah dan tukarkan link(biru) dan text(merah) kepada korang punya tersendiri.

<form><select name="menu" onchange="window.open
(this.options[this.selectedIndex]
.value,'_blank')" size="1" name="menu">

<option>Blog-blog aku</option>

<!-- change the links with your own -->

<option value="http://godekblog.blogspot.com/">Godek Blog</option>

<option value="http://lubukblog.blogspot.com/">Lubuk Blog</option>

<option value="http://malaysiamusician.blogspot.com/">List Malaysia Musicians</option>

</select></form>

Ok.. korang boleh letakkan di sidebar blog korang.
(Layout>Add Gadget>HTML/JavaScript.)

Enjoy..

Masukkan gambar sebelah tajuk pos

2009-03-10T07:12:00.000-07:00

Cara-cara memasukkan gambar bersebelahan tajuk pos adalah seperti berikut.

Mula-mula korang kena upload gambar korang tersendiri di free image hosting.
Aku pakai imageshack.us (gambar yang sesuai ialah antara 35x35px - 50x50px)

Selepas korang dah upload gambar, korang kena copy link gambar korang dan masukkan kod seperti di bawah

<img src="http://img13.imageshack.us/img13/401/peacesign.gif"/> (tukarkan tulisan merah kepada link korang)

Kemudian korang kena ubah kod HTML template korang (klik Layout>Edit HTML)

Klik Expand Widget Template

Dan cari kod seperti di bawah:-

<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>

Dan tukarkan kepada

<a expr:href='data:post.url'> <img src="http://img13.imageshack.us/img13/5195/peacesign.gif"/>  
<data:post.title/></a>

Pastikan korang tukar tulisan merah dengan link gambar korang sendiri.

Save & Enjoy..

11 Keyboard Shortcut

2009-03-04T09:09:00.000-08:00

Kali ini aku nak kongsikan 11 keyboard shortcut(basic) untuk para blogger.

CTRL+B	Bold Text
CTRL+I	Italic Text
CTRL+A	Select all(pilih semua)
CTRL+C	Copy
CTRL+V	Paste
CTRL+X	Cut
CTRL+F	Find(khas utk cari kod HTML
CTRL+N	New browser window
CTRL+T	New Tab (khas utk Mozilla)
HOME	Terus ke page atas
END	Terus ke page paling bawah

Enjoy

Masukkan Yahoo Emoticons dalam Blog

2009-02-26T19:23:00.000-08:00

Hahaha.. korang mesti nak masukkan icon-icon ni kat dalam pos korang.

Pertama sekali, korang mesti menggunakan Firefox sebagai browser korang.
Di bawah adalah langkah-langkahnya dan korang kena buat satu persatu.

1) Korang kena install greas monkey, klik sini
2) Klik sini untuk install script.
3) Tukar kod pada template korang dengan mencari ]]></b:skin>
4) Masukkan kod di bawah betul-betul sebelum ]]></b:skin>

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

Save dan cuba korang klik 'create new post'(Compose mode)

Masukkan Signature dalam Pos

2009-02-26T18:30:00.000-08:00

Hari ini aku baru dapat satu ilmu macam mana nak masukkan signature dalam pos.
Cuba korang tengok bawah pos ini.

Ok mula-mula korang mesti buat signature korang sendiri. Korang boleh pakai Paint ke, Photoshop ke, dan apa-apa lagi. Macam aku, aku pakai http://mylivesignature.com ataupun korang boleh googling je 'Online Signature Creator'.

Lepas korang dah buat signature tu, korang mesti upload signature korang ke 'free image hosting' seperti http://imageshack.us, http://photobucket.com, http://flickr.com dan banyak lagi. Aku pakai imageshack.us.

Ini contoh aku pakai imageshack.us

Korang kena copy kod 'for website', di bawah adalah contoh:-

<a href="http://imageshack.us"><img src="http://img205.imageshack.us/img205/7290/sign.png" border="0" alt="Image Hosted by ImageShack.us"/></a><br/>

Dan korang kena tukarkan kepada kod berikut:-

<img src="http://img205.imageshack.us/img205/7290/sign.png" border="0" alt="Image Hosted by ImageShack.us"/>

Sekarang korang kena copy kod yang dah korang tukar tadi dan pergi ke Setting > Formatting.
Kemudian scroll ke page paling bawah dan korang akan jumpa ruangan 'Post Template'.

Korang paste kan kod tadi ke dalam ruangan tesebut.

Siap.. Enjoy

p/s: Untuk pos-pos yang lama signature korang tidak akan ada dan kalau korang nak buat kena buat secara manual dengan copy dan paste kod 'signature korang di setiap pos korang yang terdahulu.(HTML mode)

Tukar Warna Sidebar

2009-02-22T19:50:00.000-08:00

Ok kali ini, aku akan godek sidebar blog pula. Kalau tajuk tu confuse kan korang, mintak maap ler.
Apa yang aku akan buat ialah tukarkan warna background pada tajuk kat sidebar.
Korang boleh tengok gambar.

Apa yang korang perlu buat ialah klik Layout>Edit HTML
Kemudian korang cari kod

h2 {

Lepas tu korang tambahkan kod di bawah betul-betul selepas h2 {

background:#FFFF00;

Nanti kod korang akan jadi macam di bawah

h2 {
background:#FFFF00;

p/s: korang boleh tukar warna ikut pilihan korang di Color Colculator

Nah.. siap.
Enjoy

Membuat Header Yang Menarik

2009-02-19T23:28:00.000-08:00

Kali ini aku akan kongsikan cara-cara untuk membuat header macam blog ini. (header blog ni hampaeh jek!) hahahha..

Ok.. header seperti blog aku ni, layout dia korang boleh tengok gambar di bawah.

Cara-caranya ialah:-

1) Klik Template>Edit HTML. Pastikan korang save dulu template asal korang.
2) Cari kod seperti di bawah:-

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your blog title will appear here (Header)' type='Header'/>
</b:section>
</div>

3) Tukarkan kesemua kod di atas dengan ko di bawah:-

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger template Design Series (Header)' type='Header'/>
</b:section>
<div id='header-right'>
<b:section class='header' id='header-right-top' showaddelement='yes'>
</b:section>
</div>
<div id='header-right-bottom'>
<b:section class='header' id='header-right-bottom-section' showaddelement='yes'>
</b:section>
</div>
</div>

4) Kemudian cari kod yang ini pulak:-

#header-wrapper {
border: 1px solid #000000;
margin:0 auto 10px;
border:1px solid $bordercolor;
clear: both;
word-wrap: break-word;
overflow: hidden;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

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

4) Tukarkan kesemua kod di atas dengan kod di bawah:-

#header-wrapper {
width: 950px;
border: 1px solid #000000;
margin:0 auto 10px;
border:1px solid $bordercolor;
clear: both;
word-wrap: break-word;
overflow: hidden;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

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

#header-right {
width: 400px;
float: right;
border: 1px solid $bordercolor;
color: $pagetitlecolor;
margin: 5px;
}
#header-right-top {
padding: 0 5px 10px;
}

#header-right-bottom-section {
padding: 0 5px 10px;
}

#header-right ul {
margin: 0;
padding: 5px;
}

#header-right ul li {
display: inline;
padding: 5px;
}

#header-right-bottom {
width: 400px;
float: right;
border: 1px solid $bordercolor;
color: $pagetitlecolor;
margin: 5px;
}

#header-right-bottom ul {
margin: 0;
padding: 5px;
}

#header-right-bottom ul li {
display: inline;
padding: 5px;
}

Ok save dan tengok layout blog korang.. mesti dah jadi mcm dlm gambar.

p/s: korang boleh masukkan elemen apa yang korang suka

Enjoy..

Buat Favicon

2009-02-18T06:10:00.000-08:00

Huh.. 3 hari aku tak online ni kan pulak nak pos kat blog ni.
So hari ni, aku nak kongsikan 1 ilmu godek yang aku dapat.
Ok kalau sesapa yang tak paham maksud favicon tu.. korang boleh tengok gambar kat bawah ni:-

Cara-caranya:-

1 Korang design satu icon 32x32 dan save dalam format jpg file(guna paint jek)

2.Kemudian korang klik Layout>Edit HTML

3.Korang cari kod seperti di bawah:-
<title><data:blog.pageTitle/></title>

4.Lepas tu korang masukkan kod seperti berikut betul-betul di bawah <title><data:blog.pageTitle/></title>

<link href='URL icon korang' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='URL icon korang' rel='shortcut icon' type='image/x-icon'/>

5.Nanti kod korang akan jadi camni.
<title><data:blog.pageTitle/></title>
<link href='URL icon korang' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='URL icon korang' rel='shortcut icon' type='image/x-icon'/>

p/s: korang kena tukarkan URL korang sendiri. Kalau aku guna imageshack.us Free dan tidak perlu register.

Tidak Boleh Klik Gambar

2009-02-14T14:06:00.000-08:00

Kali ini kita bermain dengan gambar pula. Aku akan buat gambar yang ada dalam pos ini tidak boleh diklik. Cuba korang try klik gambar di atas..

Hahaha.. tidak boleh klikkan..

Cara-caranya

Bila korang upload ganbar, korang akan jumpa kod macam kat bawah kan?

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.destination360.com/central-america/costa-rica/images/monteverde-cloud-forest.jpg"><img style="cursor:pointer; cursor:hand;width: 415px; height: 332px;" src="http://www.destination360.com/central-america/costa-rica/images/monteverde-cloud-forest.jpg" border="0" alt="" /></a>

Apa yang korang perlu buat ialah buang kod yang 'bold'.

Siap..Enjoy

Open Picture In New Tab

2009-02-14T03:25:00.000-08:00

p/s: gambar ini takde kaitan.. saja je aku letak

Ok ada member tanya macam mana nak bukak gambar kat new tab? ok cuba try klik gambar raksasa biru yang ganas ni.. huhuhuh

Ok kita mulakan godek kita hari ini.

Mula-mula korang kena tukar mode ke HTML
Bila korang upload gambar, akan ada kod macam ni..

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.gapingvoid.com/BlueMonster350px.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 364px; height: 388px;" src="http://www.gapingvoid.com/BlueMonster350px.jpg" border="0" alt="" /></a>

Apa yang korang perlu buat ialah masukkan kod target="_blank" selepas kod
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.gapingvoid.com/BlueMonster350px.jpg"target="_blank"

Kalau korang nak link ke mana-mana page, korang just ubah alamt URL macam ni:-

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://lubukblog.blogspot.com/" target="_blank"

Ok setel..

Webpage Content Toolbar Widget

2009-02-13T03:52:00.000-08:00

Sekali lagi aku tak tahu nak translate tajuk pos aku kali ni. Tapi widget ni amat berguna kerana memudahkan pelawat boleh share, email, print dan bookmark blog korang dengan widget ni.

Korang cuma perlu tambahkan elemen dalam blog korang.

Klik Layout>Add Gadget>HTML/JavaScript

Masukkan kod ini ke dalamnya.

<script type="text/javascript">
  stenium_url    = location.href;
  stenium_title  = document.title;
  stenium_style  = 'classic';
  stenium_widgets = 'share,email,print,bookmark';
  stenium_layout = '1';
</script>
<script src="http://www.stenium.com/js/widget_loader.js" type="text/javascript"></script>

Enjoy..

Floating "Top of Page" Icon Widget

2009-02-13T03:22:00.000-08:00

Sory sebab aku tak dapat nak terjemahkan dalam BM.

Widget ini bagus untuk blog yang mempunyai pos-pos yang panjang berjela-jela. Kalau korang tengok kat blog aku, sebelah kanan paling bawah terdapat anak panah warna hijau. Cuba korang skrol blog aku ke bawah dan klik anak panah tersebut.
Ya..menarikkan?

Apa yang korang perlu buat ialah tambahkan elemen dalam blog korang.

Klik Layout>Add Gadget>HTML/JavaScript

Masukkan kod ini ke dalamnya.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://www.optimist.co.za/images_old/UpArrow.GIF"/></a>

Siap.. Enjoy.

Masukkan Kategori dalam Blog

2009-02-13T02:38:00.000-08:00

Kalau korang nak masukkan kategori-kategori dalam blog korang, ianya tidaklah susah sangat. Dengan memasukkan ketegori dalam blog korang, pelawat akan lebih mudah melawati pos-pos yang terdapat dalam blog korang.

Ok.. kita teruskan godek yang seterusnya tanpa banyak me'nyayah'.

Pertama sekali, korang mesti memasukkan label pada setiap pos korang. Refer gambar di bawah:-

Kalau korang tidak isi label pada pos korang yang lepas, sila isikan sekarang.
p/s: korang just edit je pos-pos korang yang lepas.

Kemudian korang kena tambahkan elemen pada sidebar korang.

Klik Layout>Add Gadget>HTML/JavaScript

Sekarang isikan Title korang.

Kemudian copy kod di bawah

<ul>
<li><a href="/search/label/[LABEL]">[TEXT]</a>  </li>
<li><a href="/search/label/[LABEL]">[TEXT]</a>  </li>
</ul>

Korang kena tukarkan [LABEl](bold) kepada label yang korang tulis dalam pos korang.
Juga tukarkan [TEXT](bold). [TEXT] ini yang akan terpapar pada sidebar korang nanti.

Setel...

p/s: kalau korang banyak kategori, cuma tambahkan kod seterusnya dalam elemen sidebar <li><a href="/search/label/[LABEL]">[TEXT]</a> </li> sebelum </ul>

Enjoy...

Buat Pos Berkaitan (Related Post Widgets )

2009-02-12T05:39:00.000-08:00

Widget ini akan memaparkan pos-pos dulu yang berkaitan mengikut kategori, tag dan label pada semua pos korang. Ini akan menyenangkan pelawat korang sekaligus mereka akan terus melayari blog korang lebih lama lagi.

Ok.. tanpa membuang masa jom godek..

1) Pergi Layout >Edit HTML
2) Save dulu templates asal korang(Download Full Template)

3) Klik "Expand Widget Templates"

4) Cari kod </head>

5) Kemudian paste kod di bawah betul-betul sebelum </head> tadi.

<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://www.sigmirror.com/files/21737_edkth/related.js' type='text/javascript'/>

6) Kemudian cari kod <p><data:post.body/></p>

7) Paste kod di bawah betul-betul selepas <p><data:post.body/></p> tadi.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot;   data:label.name   &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Sudah siap pun.. korang boleh save dan tengok hasilnya.

p/s: korang boleh tukarkan Related posts kepada ayat koramg sendiri.

Masukkan "Search' widget

2009-02-11T14:16:00.000-08:00

Kalau korang nak masukkan 'search' widget seperti gambar, jom try sekarang.
Benda ni bagus untuk memudahkan pelawat blog korang mencari pos-pos korang yang lepas.

1) Mula-mula korang pergi Template>Layout
2) Buat HTML/Javascript elemen yang baru di sidebar korang
3) Kemudian masukkan kod di bawah di dalamnya


<p align="center"><form id="searchthis" action="/search" 
style="display:inline;" method="get"> <input id="search-box" name="q" 
size="25" type="text"/> <input id="search-btn" value="Search" 
type="submit"/> </form></p>

Nah.. sudah pun siap.

D.I.Y Templates

2009-02-11T12:33:00.000-08:00

Bosan dengan templates korang!.. Ubahkannya jadi menarik sekarang..

Korang boleh pelbagaikan templates korang dengan kretiviti korang tersendiri secara automatik. Tidak memerlukan kepakaran HTML atau apa pun, ianya sangat mudah dan menarik!!

Korang boleh masukkan gambar, warna, tambah kolum dan macam-macam lagi.
Ianya akan generate kod HTML untuk digantikan dengan templates asal korang yang membosankan.

Kalau korang nak buat templates dengan gaya korang tersendiri, klik sini

Selamat mencuba..

Ubah Margin Blog

2009-02-11T10:11:00.000-08:00

Apakah margin?
Margin ialah ruang antara setiap elemen di dalam layout blog korang.

Cuba perhati gambar di bawah:-

Dengan mengubah margin ini nanti, blog korang akan bertambah serinya.

Apa-apa hal, save templates asal korang dulu.

Jadi apa yang akan kita lakukan ialah tambahkan sedikit kod HTML pada kolum pos korang. Di sini aku hanya ubah margin pada pos kolum aku sebab ianya berada di tengah-tengah blog aku. Jadi bila aku buat border pada sidebar aku yang kiri, ianya mencacatkan blog aku. hehehehe...

Korang boleh aplikasikan ilmu godek ini kat mana-mana tempat yang korang rasakan perlu ubah. Ok jom mengodek...

Klik Template>Edit HTML dan cari kod ini

#main-wrapper {

Kemudian korang tambahkan kod berikut betul-betul di bawah seperti kod di atas.

margin-right: 10px;

Nanti kod HTML korang akan jadi seperti di bawah:-

#main-wrapper {
margin-right: 10px;
width: 444px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Selepas itu korang mesti tukar width 'main wrapper'(bold) korang kepada 434px.
Jika korang sudah tukar width tersebut korang sebelum ini, korang mesti tolak 10px dari width main wrapper tadi.

Jika korang mempunyai 3 kolum dan mahu ubah sebelah kiri margin pos korang pula, hanya ubahkan kod ini

margin-right: 10px;

kepada

margin-left: 10px;

Ok selesai. Pastikan preview dulu blog korang sebelum save untuk pastikan semuanya berjalan lancar.

Buat Border

2009-02-11T07:00:00.000-08:00

Ok kali ini aku akan terangkan cara-cara membuat border(dalam BM mcm tak kena) dalam blog korang.
Korang boleh tengok gambar di bawah:-

Klik Template>Edit HTML
Ingat jangan lupa save templates asal korang.

Korang boleh pilih mana tempat yang korang nak bubuh border ni..

Header Section(#header-wrapper)
Main Posts Section(#main-wrapper)
Sidebar(#sidebar-wrapper)
Footer Section(#footer-wrapper)

Ok katakan korang nak bubuh border kat Main Posts Section, korang cari kod yang aku bagi kat atas tu.

#main-wrapper

Lepas tu korang tambahkan kod ini betul-betul bawah ko di atas,

border: 3px solid #000000;

Jadilah kod korang macam ni

##main-wrapper {
border: 3px solid #000000;

Maka siaplah border korang.
Kalau korang nak tukar warna border tu, klik sini dan pilihlah warna pilihan kalbu.
p/s:hanya masukkan hex kod saja

Dan kalau korang nak ubah width border tu, ubahkan 3px tadi mengikut pilihan korang.

Tambah 3 Kolum Pada Footer

2009-02-10T16:35:00.000-08:00

Kalau korang nak buat 3 kolum footer seperti gambar di bawah, just follow my lead.

Ada 3 langkah

Langkah 1:

Backup templates asal korang Template>Edit HTML dan klik 'download full templates'

Langkah 2:

Kalau korang ada tambah-tambah widgets dekat footer korang sebelum ini, dipersilakan buang dulu.

Langkah 3:

Tambah kod HTML pada templates korang Template>Edit HTML

Mula-mula cari kod ini

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Kemudian korang tukar kod(bold) dengan kod di bawah


<div id='footer-column-container'>

       <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

  <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
       </div>

       <div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
  <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
       </div>

       <div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

  <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
       </div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

Ok korang boleh save dan tengok layout korang sekarang.

Open Link in New Tab

2009-02-10T12:59:00.000-08:00

Sory la sebab aku tak dapat nak terjemahkan tajuk ke dalam BM

Ok ini paling simple ilmu godek untuk hari ini.

Katakan korang nak masukkan link website google dalam pos korang dan apabila pelawat korang klik link tersebut dengan automatik akan dibuka pada new window/tab.

Ok ini adalah sebagai contoh.

1) Korang buat pos baru kemudian tulis google.com

2) Highlight tulisan google.com tu kemudian klik kat (insert link)

3) Kemudian masukkan link www.google.com pada ruang yang tertera pada gambar seperti di bawah.

4) Klik OK

5) Kemudian akan tertera kod seperti ini

<a href="http://www.google.com">google.com</a>

6) Dan apa yang korang perlu lakukan di sini ialah tambahkan kod ini target="_blank" di dalam kod di atas supaya ianya akan menjadi seperti kod di bawah:-

<a href="http://www.google.com"target="_blank">google.com</a>

Dah pun siap. Enjoy...selamat mengodek

p/s : Perbezaan antara yg biasa dgn open in new tab

open link in new tab = contoh

yang biasa punya = contoh

Masukkan XML Blogger Templates

2009-02-10T12:03:00.000-08:00

Kalo korang bosan dgn blogger punya templates yang biasa-biasa tu, korang boleh pilih mana-mana templates yang korang berkenan kat link yang disediakan di bawah.

http://btemplates.com/
http://blogger-templates.blogspot.com/
http://blogspottemplates.blogspot.com/

p/s: korang boleh googling sendiri jek

Ok kita mulakan godek kita sekarang:-

1) Download templates pilihan korang, kalau template tu dalam zip file, pastikan extract file tersebut.
2) Kemudian klik Edit HTML
3) Pastikan korang backup template asal korang dengan klik "download full template" link dan save.
4) Tengok gambar di bawah di mana korang akan upload templates baru korang.

5) Masukkan lokasi templates korang kemudian upload.
6) Templates baru korang dah pun masuk dan boleh preview dulu sebelum save.

Enjoy...

Kenapa blog mesti unik?

2009-02-09T01:00:00.000-08:00

Kenapa?

Ada beberapa sebab kenapa mesti unik dan suka aku katakan bahawa keunikan memberikan impak yang tersendiri kepada setiap orang. Boleh dikatakan semua orang sukakan keunikan. Betul tak?

Cuba korang perhatikan gambar di bawah

Apa yang korang fikirkan..

Ok sekarang kita pergi ke soalan yang tadi, kenapa blog mesti unik?

Memberikan kesan serta merta kepada pelawat
Jika blog korang lain dari yang lain, maka kepada pelawat yang pertama kali datang ke blog korang akan merasakan Wahhh!!! hebatnya blog ni..

Mereka rasakan seperti teruja apabila melihat keunikan blog yang belum pernah dilihat sebelumnya. Oleh itu ini adalah main point kenapa blog mesti unik.

Jenamakan blog kita
Ini adalah point yang cukup kukuh untuk mendapat bualan dari mulut pelawat. Selain itu, ini akan membantu dalam promosi blog korang apabila blog korang menjadi buah mulut pelawat. Selain itu ini akan dapat membezakan antara blog korang dengan orang lain.

Sebab korang suka godek
Hahahhah.. ini ikut otak aku sendiri je. Ok setakat ni je aku rasa yang dapat aku huraikan jawapan tadi.

Selamat mengodek...

Buat Isi Kandungan (Table of Content)

2009-02-09T00:39:00.000-08:00

Betul ke maksud TOC tu isi kandungan? Aku belasah je..

Tanpa membuang masa aku teruskan cara-caranya.Ini memerlukan 2 langkah saja

Langkah 1

Klik Template>Edit HTML>Expand new widget

p/s: Jangan lupa save dulu template asal korang.

Ok cari kod seperti

<b:include data='post' name='post'/>

Padam kod tersebut dan tukar kepada kod yang di bawah ini:-


<b:if cond='data:blog.homepageUrl !=
                data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
         <a expr:href='data:post.url'>
   <div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;"> 
         <data:post.title/></div></a>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>
 <b:else/>
     <b:include data='post' name='post'/>
 </b:if>

Dan save template korang.

Langkah 2

Ok sekarang korang pergi Layout>Add New Gadget>HTML/JavaScript.

Copy adn paste kod dibawah ke dalam HTML/JavaScript tadi.


<a href="http://NAMABLOG.blogspot.com/search?max-results=200">Show all post &raquo;&raquo;</a>

Jangan lupa ubah nama blog korang kat dalam kod tu.
Pastikan tajuk korang tulis Table of content atau apa-apa yang korang suka.

Ok klik save dan tengok keberkesanannya..
Enjoy

Buat 2 Kolum(lebar)

2009-02-09T00:09:00.000-08:00

Kalau korang nak wat layout blog korang lebih kurang macam gambar kat bawah, inilah cara-caranya..

Mula-mula sekali korang kena ubah width semua layout.(header, outer wrapper, main wrapper, sidebar dan footer)

1) Seperti biasa cari kod header seperti di bawah


#header-wrapper {
  width:610px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Ubahkan width kepada 950px(bold)

2) cari kod Outer-Wrapper seperti di bawah


#outer-wrapper {
  width: 610px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

Ubahkan width kepada 950px(bold)

3) Sekarang nak setelkan pulak kolum pos(main wrapper)

Macam biasa cari kod


#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Ubahkan kepada 600(bold)

4) Seperti biasa cari kod sidebar seperti di bawah

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Ubahkan width kepada 350px(bold)

5) Terakhir sekali Footer

Cari kod ini


#footer {
  width:610px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Ubah width kepada 950(bold)

Ok siap.. save template korang.

Enjoy...

Akhirnya....

2009-02-08T16:21:00.000-08:00

Akhirnya aku dah dapat buat tutorial nak bagi blogspot aku nampak menarik. Bukan main pening jugak kepala aku melayan kod HTML ni.

Tapi aku puas hati sebab dapat buat apa yang ditunjukkan oleh para-para hackers blogspot di luar sana.

Aku mula-mula malas jugak nak melayan kod-kod ni tapi last-last syok pulak bila try-try jadi.(walaupon banyak kali try)

Dan aku juga telah menjawakan tutorial tersebut untuk memudahkan aku dan tak kira siapa yang berminat mengodek blog. Aku rasa mungkin baru sikit tutorial yang aku dah buat tapi lepas ni aku akan poskan kat sini bila ada tutorial baru aku dapat setelkan.

So aku pon dah penat setelah 1 malam aku mengadap benda ni, aku tido dulu..
Hhuarrghhhhh...

Buat Skrol di Page Element

2009-02-08T15:15:00.000-08:00

Korang boleh tengok contoh kat sebelah kanan blog aku.. hohoho

Mula-mula korang pergi Layout>page element>Add a gadget>pilih JavaScript/HTML>masukan kod yang kat bawah ni.


<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">

<ul>

<li><a href="http://URL-KORANG-1">TAJUK-1</a></li> 

<li><a href="http://URL-KORANG-2">TAJUK-2</a></li> 


<li><a href="http://URL-KORANG-3">TAJUK-3</a></li> 
</ul>

</div>

Pepehal korang kena tukar URL dan tajuk korang sendiri.

Save dan siap.

p/s: pastikan sidebar korang lagi lebar(width) dari kod yang kat atas tu..ubah je nombor width tu ikut suka korang

Sembuyikan (Newer Post - Home - Older Post)

2009-02-08T15:02:00.000-08:00

Link Newer Post - Home - Older Post yang berada di bawah setiap pos blog korang kadang-kadang menyebabkan korang kurang selesa. Jadi kat sini aku de sedikit tips nak buang menatang tu.

Mula-mula sekali korang pergi Layout>Edit HTML kemudian klik Expand Widget Templates

lepas tu korang cari kod ini


#blog-pager-newer-link {
  float: $startSide;
 }
 
#blog-pager-older-link {
  float: $endSide;
 }

#blog-pager { 
  text-align: center;
 }

.feed-links {
  clear: both;
  line-height: 2.5em;
}

dan gantikan semua kod tadi dengan yang ini


#blog-pager-newer-link {
float: left;
display: none;
}

#blog-pager-older-link {
float: right;
display: none;
}

#blog-pager {
text-align: center;
display: none;
}

Save template korang.

Buat butang navigation/tab

2009-02-08T13:27:00.000-08:00

Ini adalah contoh butang yang akan terpapar di blog korang. Ini memudahkan pelawat melawati blog dan ianya nampak tersusun.

Jangan lupa save kod HTML korang pada notepad atas langkah berjaga-jaga.

2 perkara yang perlu lakukan:-

1) Ubah kod HTML blog
2) Buat HTML/Javascript widget baru pada blog korang.

Langkah 1
Pergi ke 'Edit Template HTML' dan cari kod ini </b:skin>
Kemudian copy kod seperti di bawah


a.navigation {
background: #000000;
color: #ffffff;
margin: 1px;
padding: 5px 35px 5px 5px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #5d5d54;
text-decoration: none;
}

Dan paste sebelum kod ini </b:skin> tadi pada template blog korang. (betul-betul sebelum </b:skin> )

p/s: Korang boleh ubah warna background dan text mengikut warna korang di sini.

Langkah 2
Buat HTML/Javascript widget baru
klik Layout>Add a Gadget>HTML/Javascript
Kemudian copy dan paste kod di bawah ke dalam HTML/Javascript.(biarkan ruang title kosong)


<a class="navigation" href=http://link-url-anda.blogspot.com">Utama</a>
<a class="navigation" href=http://link-url-anda.blogspot.com">Tutorial</a>
<a class="navigation" href=http://link-url-anda.blogspot.com">Stuff Percuma</a>

p/s: jangan lupa tukarkan link blogspot korang dengan tulisan yang kat butang tu..

Sembunyikan Blogger Nav-Bar

2009-02-08T13:26:00.001-08:00

Jangan lupa save kod HTML korang pada notepad atas langkah berjaga-jaga.

Klik Template>Edit HTML
Cari kod ini </b:skin>
Kemudian paste kod di bawah sebelum </b:skin>

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Preview blog korang dulu sebelum save.. hohoho
Siap dah..

p/s : Bawah adalah contoh gambar Nav-Bar

Buat 3 Kolum

2009-02-08T13:25:00.001-08:00

Peringatan save dulu kod korang yang asal dan perlu ingat selepas ubah setiap kod preview dahulu utk memudahkan latihan berjalan dengan lancar.

Dalam latihan ini, aku akan bahagikan layout blog kepada 3 kolum iaitu:-
a) 2 kolum(2 sidebar) = 250pixel setiap satu
b) 1 kolum utk blog pos = 400pixel

p/s: Mula-mula sekali korang kena ubah width semua layout.(header, outer wrapper, main wrapper, sidebar dan footer)

Macam biasa pergi ke Layout>Edit HTMl
1) Cari kod header seperti di bawah


#header-wrapper {
 width:610px;
 margin:0 auto 10px;
 border:1px solid $bordercolor;
 }

Ubahkan width kepada 950px(bold)

2) cari kod Outer-Wrapper seperti di bawah


#outer-wrapper {
 width: 610px;
 margin:0 auto;
 padding:10px;
 text-align:$startSide;
 font: $bodyfont;
 }

Ubahkan width kepada 950px(bold)

3) Sekarang nak setelkan pulak kolum pos(main wrapper)

Macam biasa cari kod


#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Ubahkan kepada 400(bold)

4) Seperti biasa cari kod sidebar seperti di bawah

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Ubahkan width kepada 250px(bold)

Kemudian korang kena tambahkan 1 lagi sidebar dengan tambahkan kod seperti di bawah

#new-sidebar-wrapper {
 width: 250px;
 float: $startSide;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Jadi korang copy dan paste kan saja selepas kod side bar yang pertama tadi

Nanti kod korang akan jadi seperti ini

#sidebar-wrapper {
 width: 230px;
 float: $endSide;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
#new-sidebar-wrapper {
 width: 200px;
 float: $startSide;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Ok sekarang masa untuk menjelmakan sidebar yang kedua tadi. Sini korang kena pahamkan betul-betul.

Cari kod seperti di bawah:-


<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<!-- sidebar kiri -->
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<!-- sidebar kanan -->
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

Ok kalo korang nak sidebar yang kedua tadi berada sebelah kiri korang masukkan kod ini


<div id='new-sidebar-wrapper'>
<b:section class='sidebar' id='new-sidebar' preferred='yes'/>
</div>

Di tulisan kiri(bold) seperti kod yang tertera di atas dan kalo korang nak masukkan sebelah kanan buat sebaliknya.

p/s: jangan masukkan sekali dua-dua, nanti blog korang jadi bengong.

5) Terakhir sekali Footer

Cari kod ini


#footer {
 width:610px;
 clear:both;
 margin:0 auto;
 padding-top:15px;
 line-height: 1.6em;
 text-transform:uppercase;
 letter-spacing:.1em;
 text-align: center;
}

Ubah width kepada 950(bold)

Save template dan siap la 3 kolum.. tgk kat layout korang..

Pengenalan

2009-02-08T13:24:00.000-08:00

Kenapa aku pilih blogspot?
Sebab senang aku nak masukkan adsense. Hahaha!

Aku rasa tak perlu aku terangkan bagaimana nak register semua ni sebab benda-benda tu sudah banyak diterangkan. Korang googling je, mesti jumpa.

Ok first of all, korang mesti kena tahu basic HTML(aku pun tak tahu sangat).
So apa yang diperlukan di dalam latihan ni adalah Notepad(tengok gambar).

Kenapa notepad? Sebab dia ni akan membantu korang dalam latihan ini(try & error).

Kemudian korang kena tahu blogspot punya layout.
Korang boleh rujuk gambar di bawah.

Ok kat sini, aku akan terangkan serba sedikit pasal layout ni.

Mula-mula kita start dari header, kat sini nanti akan tertulis korang punya tajuk blog dan huraian pendek mengenai blog korang.

Main wrapper ni pulak tempat pos-pos yang korang tulis dalam blog korang.

Side bar ni tempat koleksi pos, pengenalan diri korang, adsense dan macam-macam lagi korang boleh tarok kat situ.

Footer ialah kaki blog. Hahahaha..

Senang cakap macam orang..
header = kepala orang
Main wrapper = badan
Sidebar = tangan
Footer = kaki
Outer wrapper = baju

2008-02-08T14:43:00.000-08:00

Nama aku Zahrul a.k.a bedot

Baru berjinak-jinak dengan ilmu godek ~~HMTL~~ HTML dan cuba kumpulkan maklumat-maklumat godek ni untuk reference aku gak.

Aku tak tahu kenapa aku boleh syok godek-godek ni. Yang penting aku enjoy mengodek blog ni.

Aku cuba aplikasikan mana-mana tutorial dan bila menjadi aku akan poskan kat blog ni untuk tatapan bersama.

Semoga aku dapat godek dgn lebih mendalam lagi

Request

2008-01-08T00:11:00.000-08:00

Dalam ruangan ini adalah untuk kengkawan request sebarang godek berkenaan blogspot. Apa yang perlu korang buat ialah komenkan request korang di bawah.

Aku akan cuba godek mana-mana yang aku dapat dan poskan dalam blog ini.

p/s: Jangan SPAM sudeyyy...

Aku dan Blogspot

Salam kemaafan

Selamat Berpuasa

Buat Sticky Post

Buat Newsletter

Aku yang busy

No Labels

Posted By Below Post Title

Tukar Penampilan Links dalam Blog

ProCon Latte

Labels di bawah Tajuk Entri

Selamat Menyambut Hari Raya Aidiladha

Aku sayang emak aku....

Display Related Posts with Thumbnails

Membuat mesej alu-aluan

Pengumuman

Membuat efek Marquee pada Site Title

Gathering Hari Raya

Paparkan Yahoo Messenger Status Dalam Blog

Selamat Hari Raya

Akhirnya.....

Navigation Tab Sempoi

Warna-warni blog

Led Zeppelin - Kashmir

Tukar cursor/pointer dalam blog

Masukkan Image Slide Show dalam Header

Random Rotating Post gadget

Aku sibuk dengan kawan baruku...

Membuat Table Dalam Pos

Masukkan Gambar Dalam Scrollbar

Masukkan Yahoo Smiley Emoticons Dalam Komen

Masukkan Search Box Dalam Header

Masukkan Adsense Dalam Pos Entri

Popular Post Widget

Membuat Zoom Efek Pada Gambar

Image Hover Effect

Header Terbaru Blog Aku

Tukar Font Dalam Blog

Masukkan Video Dalam Blog

Masukkan Pos Terbaru (Recent Posts) Widget

Buat Warna Background dalam Pos

Recent Comments Widget

Buat Link Exchange

Ubah Background Template

Membuat Teks dan Banner (Marquee)

Membuat Menu Tab View

Masukkan Social Bookmark Pada Setiap Pos

Tambah Page Element di atas Pos

Bermasalah dengan Bx-Errors

Disable Right Click Widget

Highlight Author Comments

Tukar "Older post" dan "Newer post"

Tag Cloud Widget

Tambah Elemen di bawah Header

Sidebar Navigation Widget

Membuat Tag/Label Cloud

Page Navigation Widget

Membuat drop down menu

Masukkan gambar sebelah tajuk pos

11 Keyboard Shortcut

Masukkan Yahoo Emoticons dalam Blog

Masukkan Signature dalam Pos

Tukar Warna Sidebar

Membuat Header Yang Menarik

Buat Favicon

Tidak Boleh Klik Gambar

Open Picture In New Tab

Webpage Content Toolbar Widget

Floating "Top of Page" Icon Widget

Masukkan Kategori dalam Blog

Buat Pos Berkaitan (Related Post Widgets )

Masukkan "Search' widget

D.I.Y Templates

Ubah Margin Blog

Buat Border

Tambah 3 Kolum Pada Footer

Open Link in New Tab

Masukkan XML Blogger Templates

Kenapa blog mesti unik?

Buat Isi Kandungan (Table of Content)