Tutorial : Make Your Own Template (Blogskin)

Tumblr_lye3qzc9i21qlq8bco1_r1_500_large

Assalamualaikum and annyeonghaseyo. Hai. Tuto kali ni di-request oleh Yana. Memandangkan sekarang ni dah ramai yang guna blogskin, so apakata kita cuba buat template sendiri. Hehe. Jom Start.

1. Bagi yang belum ubah template designer ke template classic tu. Korg pegi kat >SINI<
2. Mula-mula, korang copy code bawah ni dan paste dekat bahagian atas sekali

<html>
<head>
<center><img src="URL HEADER"></img></center>
<title> Title Blog </title>
<style type="text/css">
     [CSS CODES]
</style>
<body>
     [CONTENT (SCRIPT)]
</body></html></head>
merah: URL header
oren: tajuk blog korang


3. Now kita start dengan bahagian CSS dulu

untuk body
body{
background: url(URL BACKGROUND);
font: 12px Century Gothic;
cursor: crosshair;
}
biru: URL background
hijau: jenis font


untuk content 
#content{
width: 800px;
background:#ffffff;
color: #000000;
font: 11px Century Gothic;
top: 200px;
left: 100px;
position: absolute;
}
ungu: Lebar post body
hijau: warna font


untuk link & hover
a:link, a:visited {
color:#C8DEE5;
text-decoration:none;
cursor: crosshair;
}
a:hover {
cursor: crosshair;
color: #B1E2F2;
}
merah: warna link


untuk blockquote & hover
blockquote {
background: #D0C8C8;
color: #ffffff;
padding: 3px;
-webkit-transition: 1.0s;
}
 blockquote:hover {
background: transparent;
padding: 3px;
color: #000000;
-webkit-transition: 1.0s;
}

untuk post title & date
.post-title {
color:#000000;
font-size:16px;
padding:3px;
border-bottom: 1px solid #000000;
text-align: left;
-webkit-transition: 0.7s;
}
 .date {
color: #000000;
font-size:10px;
margin-bottom:2em;
text-transform:uppercase;
}
biru: warna font
hijau: saiz font
oren: ketebalan border
pink: solid/ dotted/ dashed
merah: warna border

4. Okay, yang itu code basic untuk korang letak di bahagian CSS. Dan, sekarang untuk bahagian SCRIPT pulak. Letak dekat bahagian [CONTENT (SCRIPT)] ye.

<div id="content" style="display: none;">
<blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="date"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<$blogitembody$><br><br>
</blogger>
</div>

5. Okay dah siap.Code tieqa share ni, jenis simple je.  So, yang lain tu korang ubah la ikut creativity korang sendiri ye. Oh lagi satu, mesti ada yang keliru macam mana rupa coding ni bila dah disatukan. So, here contohnya.



<html>
<head>
<center><img src="URL HEADER"></img></center>
<title>Title Blog</title>
<style type="text/css">
body{
background: url(URL BACKGROUND);
font: 12px Century Gothic;
cursor: crosshair;
}
#content{
width: 800px;
background:#ffffff;
color: #000000;
font: 11px Century Gothic;
top: 200px;
left: 100px;
position: absolute;
}
a:link, a:visited {
color:#C8DEE5;
text-decoration:none;
cursor: crosshair;
}
a:hover {
cursor: crosshair;
color: #B1E2F2;
}
</style>
<body>
     <div id="content" style="display: none;">
<blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="date"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<$blogitembody$><br><br>
</blogger>
</div>
</body></html></head>


Selamat mencuba ^^

credit: AskarrPink

17 comment [s]:

Ainin Suffiah said...

awak , tmplate ni mmg xde body ek ? maksud ainin kotak yg bahagian entri and sidebar .

Nurul Atiqah said...

@Ainin Suffiah: ouh ye? erm xtau pulak jd mcm tu..sorry :(

Nurul Syafiqah said...

wah, macam nak try je ~

♡ myungjong ♡ said...

Century Gothic << mcm mne ?

Nurul AtiQah said...

@♡ myungjong ♡ : Tu nama font :)

♡ myungjong ♡ said...

mcm mne tu ?

Nurul AtiQah said...

@♡ myungjong ♡ : Ermm contohnya. kamu letak font 'Arial' 'calibri'..mcm tu la.

Fara Wahida said...

akak, terima kasih for the tuto. fara dah lame cari tuto ni.thankz sangat-2.

Nurul AtiQah said...

@Fara Wahida : U're welcome :)

●Forever Together● said...

Thanks for the tuto :)

Yoyo Dini said...

Akak,tahnaks sangat buat code ini!And,akak nak isi kode gune freebies akak bleh?

Mika Sekar Adelia said...

Thanks a lot! Sudah lama cari tuto iniiiii!!! *happy* \(^-^)/

Najwa Nabilla said...

Mcm mana nak tukar kedudukan sidebar ehh :) ? thanks

nur anati said...

Akak leh buat tuto mcm ni tapi ade body x ?

Lolly Lilly said...

Gomawo tiqah, tuto2 awk sgt2 brguna~
thanks sgt2 taw~ byk yg sy blaja~ :)

MaszNielzya said...

Tak jadikk :/

Shafa Afa said...

Lepas tu untuk postnya kok ga muncul, Akak?