A L L A H' S

ABOUT ENTRY CHAT TWITER FACEBOOK ASK.FM TUTORIAL

Create own template in Classic Template - part 1 with freebies.

Jan 1, 2012 • 1.1.12 • 5 comments

Raraa tak tahu macamna nak buat tuto yang di request Asma Ans sebab Raraa guna blogskins memang dah siap code. Tapi dia nak tahu juga so Raraa cari juga tuto ni akhirnya jumpa. Credit Nazihah

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 . Tension je. Okay, lets start.

First things , Dashboard > Template. Nanti korang nampak kotak yang digunakan untuk template codes korang tu kan? Delete all of THE codes okay. Pastikan kosong tau. Kalau ada code yang tertinggal nanti rosak pulak template korang tu . Now, start with the title of you blog, okay? Copy and paste code yang raraa 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? Lepas 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 raraa 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 Rarjah di atas Jadi meh letak 'header' jom. 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 adalah untuk warna tulisan blog korang tu. Purple untuk width blog body korang. Oren adalah additional stuffs. Kalau taknak , boleh diubah atau di-delete. Tak menjejaskan apa-apa. Warna biru pula untuk warna post title korang. Ok, we're not done yet! Paste code yang raraa 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 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 merah tu comments. Yang pink 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>

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 Nazihah dah buat ini.

<html><head><title>Summer Breeze.</title>
<style type="text/css">
#navbar-iframe {
display: none;
}
body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKYcWQmrAVeCENgK51pVzm6YjWC8VV3wsxX7d-V_2Uob1q5eGBU9GPHrk01TyR0y_1FhU8Vp8R_tsXxwbCBfCpEizUJ3DOWXB4-86HmRE4O7wsTuYL9dY6iU84kFuaivwJdc_k9R4lIC8/s1600/sfwbb7.jpg);
font-family: georgia;
background-attachment:fixed;
}
a:link, a:visited {
color:#7d95a8;
text-decoration:none;
}
a:hover {
border-bottom:1px solid #a4a4a4;
}
.page {
background:#ffffff;
color:#848484;
padding:8px;
width:600px;
font-size:11px;
border-radius:10px;
text-align:left;
box-shadow:0px 0px 10px #7d95a8;
}
.title {
color:#7d95a8;
font-size:15px;
padding:3px;
border-bottom:1px solid #eee;
width:500px;
}
.comment {
font-style:italic;
font-size:10px;
margin-top:.5em;
margin-bottom:2em;
}
blockquote {
border:1px solid #eee;
padding:8px;
}
</style>
<body oncontextmenu='return false;'><br>
<center><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ATCWXmWbQIoYGISmyezKbdwzg2PgQULk37w1UODsXRuBwPmT0dN0kj393JIMBj2co0h7oD3clT82D_kQTNSKnYZVsyU86sOqZtcOWg5pxRB-H8oIX1aVIvbvyO3YXt3NgPFUwHyKxWM/s1600/Summer+Breeze.png" /></center>
<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><br>
<center>Template designed by <a href="http://www.b-blueberry.co.cc/">Nazihah Anuar</a>. Background from <a href="http://fivepointsapart.blogspot.com/">FPA</a></div>
</div></center>
</body>
</head>
</html>

PAST • FUTURE

MY WORDS;

17. Servant of Allah. Allah understand me more than I understand myself.YA ALLAH BERIKANLAH SARIRUZAHIRA 9A DALAM SPM 2013. Struggling to be a better mukminah. إن شاء الله ♥ - Don't focus on your problems. You won't find a solution. Focus on Allah. He is the solution. - Never give up. Great things take time. Put trust in Him and make doa'.
https://twitter.com/_ked__ http://instagram.com/anaservantallah |http://mujahidahraraa.tumblr.com http://ask.fm/raraahoney https://www.facebook.com/raraaxii

OTHERS;

FOLLOW DASHBOARD