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]:

Rainbowish Art said...

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

atiqahjaidin said...

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

Ƞurul Ƨyafiqah said...

wah, macam nak try je ~

Unknown said...

Century Gothic << mcm mne ?

atiqahjaidin said...

@♡ myungjong ♡ : Tu nama font :)

Unknown said...

mcm mne tu ?

atiqahjaidin said...

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

Nina said...

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

atiqahjaidin said...

@Fara Wahida : U're welcome :)

●Forever Together● said...

Thanks for the tuto :)

Unknown 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* \(^-^)/

nur najwa said...

Mcm mana nak tukar kedudukan sidebar ehh :) ? thanks

Unknown 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~ :)

Anonymous said...

Tak jadikk :/

Shafa Kahransya R said...

Lepas tu untuk postnya kok ga muncul, Akak?