31/10/11

Tutorial cara buat super simple homepage#1


Homepage aku yang simple ni di inspirasikan oleh www.google.com..ada banyak website carian tapi google juga yang paling ngetop..antara sebabnya page google simple,ringan.

Sebelum membuat homepage super simple ni anda harus faham konsep pembuka dan penutup code serta asas memaparkan widget pada laman tertentu...pada mereka yang hendah membuat homepage simple, aku syorkan anda menggunakan classic template..lebih senang dan ringan..

Mula2 pergi ke desbot...desaign..edit html...JANGAN tick pada expand widget template.Cari code <body> kemudian masukkan code..<b:if cond='data:blog.homepageUrl != data:blog.url'>
SELEPAS ATAU DI BAWAH code <body>pasti anda tahukan code tu untuk apa..

Kemudian cari code </body> masukkan masukkan code </b:if> SEBELUM ATAU DI ATAS code </body>..kemudian klik preview..blog anda akan kelihatan sepertiini klik untuk tengok ..blog anda akan jadi kosong.. x ada apa2..
jangan save dulu... cari code footer...

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

cut code footer tersebut dan paste sebelum code </body>..contoh seperti berikut...

</b:if>

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

</body>
  </html>
Kemudian preview jika ok save...

Pada desaign--page element...akan kelihatan pelik...add a gadget hanya tinggal pada bahagian footer...
dalam tutorial ni aku x hilangkan bahagian footer.. untuk memudahkan aku memasukkan widget pada masa akan datang...jadi setiap widget pada bahagian footer aku gunakan code yang sama seperti di atas...

Berikut adalah screen shot pada page element jika anda buat seperti tutorial ini...


Gambar di atas adalah sebelum...



Gambar di atas adalah selepas anda buat seperti tutorial...

dan apabila anda hias..hiasan tu akan wujud pada page element...tengok contoh di bawah...


Pelikkan... hahaha..Cara hias tu aku akan buat nanti... kalau mau buat homepage simple pastikan anda faham tutorial ni..jika bingung tanya saja di ruangan komen...
lalalala....sekian

19 ulasan:

Admin berkata...

terbaik bro! aku tak reti edit blogger...sbb aku x faham structure...lagi satu semua padat2 n tak faham istilah..

thanks for sharing hacker..

Cikgu Jaja™ berkata...

hoho..thanks. jaja cuba dulu.. in fact agak pening2 kelalatan utk memahamkan tutorial..

Polskahackrew berkata...

tutorial ni hanya akan kosongkan homepage..hiasan lepas ni..sy akan cuba bantu cikgu jaja..('',)

Somoon berkata...

Terima kasih dengan tutorial mantap. Fol your blog.

ASEP KUMIS berkata...

very nice.... sangat membantu saya yang masih neubi

Polskahackrew berkata...

@anti zionisthanks sudi singgah bro..('',)

oM Boy berkata...

wowwww very nice sob.keren sangat ni...

Polskahackrew berkata...

@Ageboy
cuba la praktikkan bro..('',)

Unknown berkata...

awal2 dah oke.. skali part footer ~ error plak ~ hoho ;D

Polskahackrew berkata...

@ʆαʆα

kalau mau blajar..disarankan create 1 blog untuk percubaan, guna template lama,yang launched 2006 tu..kalau berminat blajar coding nanti lepas aku blk dari kampung aku tunjuk ajar apa yang aku tau..thanks singgah

Aqmil Lambung berkata...

.blog anda akan jadi kosong.. x ada apa2..
jangan save dulu... cari code footer...

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

code ni akunye ada nombor

Polskahackrew berkata...

@Aqmil Lambung

ha'ah la bro..sebab..footer template yg bro guna tu ada 3 section@add a gadget.. jadi awak kena pindahkan <div id='footer-wrapper'> sebelum code </body> sekali dengan isi kandungannya

Contoh

<div id='footer-wrapper'>

<div style='width: 30%; float: left; margin:0 auto; text-align: left;'>
<b:section class='footer1' id='footer1'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>
</div>

<div style='width: 40%; float: left; margin:0 auto; text-align: left;'>
<b:section class='footer2' id='footer2'>
<b:widget id='BlogList1' locked='false' title='My Blog List' type='BlogList'/>
</b:section>
</div>

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

<b:section class='footer3' id='footer3'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>

</div>

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

</div>
</body>

Aqmil Lambung berkata...

makna nye kena pindahkan ketiga-tiga section tersebut???

Polskahackrew berkata...

@Aqmil Lambung

a'a bro..copy mcm coding tu..dlm coding tu termasuklah coding gadget yang ada dlm section tu..('',)

Aqmil Lambung berkata...

dah jadi bro!!!

Aqmil Lambung berkata...

dah boleh save ke lepas siap tutor ni??

Polskahackrew berkata...

@Aqmil Lambung

wah dah jadik bro.. tapi klu bro x simpan apa2 widget pada footer tu blog jadi kosong..atau pun... paparkan widget tu selain homepage..

rujuk sini



Bro.. sy syorkan buat 1 blog testing dulu bro..('',) klu buat mcm ni nnti pengunjung binggung pulak..hehe

Belajar SEO berkata...

kunjungan malam.. mantaf infonya gan... ijin menyimak gan... salam admin variasi blogger

Polskahackrew berkata...

@Ricky Aldiyansyah
thanks singgah

entri ja

Related Posts Plugin for WordPress, Blogger...