P0L5K4H4CkR3W | Blogger Blog Tutorial | Tutorial blogspot | Blogger tutorial for blogspot | Simple coding tutorial | Blog tutorial untuk blogspot | Panduan untuk Blogger
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
Langgan:
Catat Ulasan (Atom)
19 ulasan:
terbaik bro! aku tak reti edit blogger...sbb aku x faham structure...lagi satu semua padat2 n tak faham istilah..
thanks for sharing hacker..
hoho..thanks. jaja cuba dulu.. in fact agak pening2 kelalatan utk memahamkan tutorial..
tutorial ni hanya akan kosongkan homepage..hiasan lepas ni..sy akan cuba bantu cikgu jaja..('',)
Terima kasih dengan tutorial mantap. Fol your blog.
very nice.... sangat membantu saya yang masih neubi
@anti zionisthanks sudi singgah bro..('',)
wowwww very nice sob.keren sangat ni...
@Ageboy
cuba la praktikkan bro..('',)
awal2 dah oke.. skali part footer ~ error plak ~ hoho ;D
@ʆαʆα
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
.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
@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>
makna nye kena pindahkan ketiga-tiga section tersebut???
@Aqmil Lambung
a'a bro..copy mcm coding tu..dlm coding tu termasuklah coding gadget yang ada dlm section tu..('',)
dah jadi bro!!!
dah boleh save ke lepas siap tutor ni??
@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
kunjungan malam.. mantaf infonya gan... ijin menyimak gan... salam admin variasi blogger
@Ricky Aldiyansyah
thanks singgah
Catat Ulasan