McJellyz Tutorialz.
★ Tutorial : Create own template in Classic Template - part 1.
Sebelum buat tutorial ni, korang mungkin perlu Save Code Template lama #copy paste lah kat mana-mana. Sebab takut ada bena go wrong, nanti susah pulak korang nak guna template lama kan T^T Bikin tension je. Hokay, lets start.
First things first, Dashboard > Template. Nanti korang nampak kotak yang digunakan untuk template codes korang tu kan? Delete all of le codes hokay. Mwahahahahaha. Pastikan kosong tau. Kalau ada code yang tertinggal nanti rosak pulak template you allz tu :> Now, start with le title of you blog, okay? Copy and paste code yang saya bagi ni ke dalam kotak code korang tu~
<html><head><title>Your blog title's name.</title>
Gantikan Your blog title's name. dengan nama yang korang nak okay. Here's something you've got to know! lepas code <title>, korang boleh isi apa-apa code yang korang nak benda tu floating kat blog korang. Contohnya, follow & dashboard button. Ok? Lepaih tu, korang add code ne pulak.
<style type="text/css">
#navbar-iframe {
display: none;
}
body {background:url(URLGMBR);font-family: trebuchet ms;background-attachment:fixed;}a:link, a:visited {color:#E5AEB5;text-decoration:none;}a:hover {
border-bottom:1px solid #000000;
}
</style>
Ne benda basic yang korang kena ada dalam kotak codes korang tu. Yang saya warnakan pink tu adalah untuk hilangkan navigation bar. Kalau korang nak ada jugak navbar korang, buang je code tu. Ubah URLGMBR tu kepada URL gambar untuk dijadikan background. Warna kuning tu untuk warna link-link dalam blog korang. Nak tukar pun boleh. Yang purple tu pulak untuk link hover. Boleh diubah juga.
Sekarang, korang akan nampak blog korang kosong dan ber-background je kan? #Contoh di Pic 1.1 Jadi meh letak 'header' jom hihi. Letak code ne lepas </style>,
Pic 1.1
Sekarang, korang akan nampak blog korang kosong dan ber-background je kan? #Contoh di Pic 1.1 Jadi meh letak 'header' jom hihi. Letak code ne lepas </style>,
<body oncontextmenu='return false;'><br>
<center><img border="0" src="URLHEADER" /></center>
Yang hijau tu untuk disable right click. Kalau taknak, boleh buang. Yang purple senget tu, gantikan dengan URL gambar header korang. See, senang je kan? Takpayah berwidget bagai. Haha. Lepas korang dah siap buat tu, nanti dah nampak dah 'header' korang heh heh. Sekarang kita letak untuk posts pulak. Ini code untuk satu column sahaja. Part 2 saya ajar yang dua column.
Amaran : Benda ne susah sikit.
Ctrl+F, cari </style> lepastu paste code ne sebelum </style>.
.page {
background:#ffffff;
color:#848484;
padding:8px;
width:600px;
font-size:11px;
border-radius:10px;
text-align:left;
}
.title {
color:#7d95a8;
font-size:15px;
padding:3px;
border-bottom:1px solid #eee;
}
.comment {
font-style:italic;
font-size:10px;
margin-bottom:2em;
}
Read this : Warna pink senget adalah untuk warna tulisan blog korang tu. Purple senget untuk width blog body korang. Oren senget adalah additional stuffs. Kalau taknak , boleh diubah atau di-delete. Tak menjejaskan apa-apa. Warna biru senget pula untuk warna post title korang. Ok, we're not done yet! Paste code yang saya beri di bawah ne selepas code </center> #code header korang tu.
<center><div class="page"><blogger><div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div><div class="comment"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div><$blogitembody$></blogger><br><center><OlderPosts><a href=<$OlderPosts$>>OLD</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>NEW</a></NewerPosts></center></div></div></center>
W a r n a - w a r n i T^T Haha. Ok ok. Yang hijau untuk bahagian ne adalah post title korang. Yang biru tu tarikh post korang. Yang purple gelap tu masa post korang. Yang purple cair tu comments. Yang biru lagi satu tu, isi-isi post korang. Sekarang dah hampir lengkap dah blog korang >,< Hanya perlu letak code ni di bawah sekali okay :D
</body></head></html>
Lepastu dah siap dah :)
Ohhh lupa. Untuk blockquote, korang add code ne sebelum </style>,
blockquote {border:1px solid #eee;
padding:8px;
}
Yang oren tu boleh diubah jika anda mahu okay. Lepas tu, korang PREVIEW. Bila dah puas hati, korang SAVE TEMPLATE. Siap dah. Hehe. Sedutan untuk part 2 ;
- Template 2 column.
- Cara-cara buat pages.
Nantikan. Hehe. Sekarang untuk freebies pulak. Jikalau korang malas sangat nak ikut tutorial ni, korang boleh ambil code template yang saya dah buat ini.
Jangan buang credits ok, penat saya buat tu haha. That's all, babai & good luck! :)
- Tutorial List
- Personal Blog
p/s ; This blog is for tutorials only.
p/s(ii) ; I'm more active on my personal blog.
- Personal Blog
p/s ; This blog is for tutorials only.
p/s(ii) ; I'm more active on my personal blog.