Tutorial : Make Your Own Blogskin
Written by : hamizashuhada on Sunday, 16 December 2012 | 02:55 | 21 comments
Miezza nak ajar korang buat blogskin sendiri.Suka tak?Tapi ni basecode dari kak mira . Miezza pernah buat blogskin guna basecode akak ni.Thanks and credit to her lah :)
Okay , first korang pergi //sini// . Kod yang Miezza nak bagi ni korang copy-paste dalam kotak biru kat web tu tau :)  Nanti secara automatiknya akan keluar rupa skin korang kat kotak putih bawahnya .Skin ni satu page je tau!
Okay jom start !


<html>
<head>
<center><img src="URL HEADER" /></center>
<title>TITLE BLOG</title>

Pink : URL header korang.
Merah : Title Blog korang .


<style type="text/css">
#navbar-iframe {display: none;}
body {
background: url(URL BACKGROUND);
font-family: Century Gothic, Tahoma, Calibri;
background-attachment:fixed;
cursor: url(http://i.imgur.com/ZOrzC.png), auto;
}
::-webkit-scrollbar {
height:12px;
width: 8px;
background: #FFF;
}
::-webkit-scrollbar-thumb {
background-color: #FF0000;
}

::-moz-selection {
background: #000;
color:#FFF;
}
::selection {
background: #000;
color:#FFF;
}
a:link, a:visited {
color:#DF0101;
text-decoration:none;
}
a:hover {
color: #a4a4a4;
}
.content {
background:#ffffff;
font-size: 11px;
padding:14px;
width:600px;
border-radius:10px;
text-align:justify;
}
.main-title {
text-align: right;
color:#DF0101;
font-size:14px;
padding:3px;
border-bottom:1px solid #A4A4A4;
letter-spacing: 0.1cm;

}
</style>

Kuning : URL background
Biru : Code scrollbar korang , boleh tukar warna , size :)
Purple : Code highlight korang.Bak buang pun boleh..
Hijau : Code cursor korang .
Kelabu : Code main title korang.Boleh ubah-ubah untuk cantikkan main title korang :)

Ni code untuk blockquote / underline / italic / bold. Paste sebelum </style>

i {
text-style: italic;
color: #000000;
}
u {
text-underline: underline;
border-bottom: 2px solid #ff0000;

}
b {
font-weight: bold;
color: #FA5858;
}
blockquote {
background-color: #E6E6E6;
border-left: 18px solid #FF0000;
padding: 2px;

}
Merah : Boleh tukar ikut citarasa korang
Oren : Code underline . Boleh ubah ikut suka hati korang : D Solid tu boleh tukar dotted / dashed / solid
Purple : Code blockquote korang.Boleh ubah ikut kekreatifan korang : D

Paste code ni dibawah </style>


<body oncontextmenu='return false;'><br>
<table style="line-height: 17px;" width="600"  border="0" align="center" cellspacing="5">
<tbody><tr>
<td valign="top" style="width:600px; padding:10px; border-radius:10px; background:#ffffff; font-size:11px;">
<div id="content">
<blogger><div class="main-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
 <div class="sec-title"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div><$blogitembody$></blogger><br><center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>
</div>
</td>


Purple : Code comment , older/newer post.
Kuning : Code comment korang. Contoh : talk here 


</table></body></head></html>
Kod diatas ni paste kat bawah sekali , kalau ada code lepas dia , template korang mungkin akan rosak :)

                          Buat Navigation and Pages :)

 Korang ctrl+F dan cari code  </style> . Paste code dibawah ni  sebelum code </style> tu.

.navigator {
position:fixed;
top:205px;
left:321px;
font-size:10px
;
text-align:center;
}
.navi {
padding-left:5px;
padding-right:5px;
color:#FF0000;
background:#FF0000;

line-height: 13px;
display: block;
text-transform: lowercase;
-webkit-transition:0.5s;
transition:0.5s;
margin-bottom:5px;
cursor: crosshair;
padding:5px 0px 0px 30px;
border-top-left-radius: 15px;
border-bottom-left-radius: 20px;
}
.navi:hover, .navi_active {
background:#FF0000;
color:#FFF;

-webkit-transition:0.5s;
transition:0.5s;
 }

Hijau : Boleh ubah ikut suka hati.Kena pandai edit lah eh?

Paste code ni selepas </style>

<center><div class="navigator">
<a class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('me').innerHTML">About</a>
<a class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('love').innerHTML">Links?</a>
<a class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('you').innerHTML">Entries</a>
<span class="navi" onclick="window.open('http://www.blogger.com/follow-blog.g?blogID=BLOG ID'); return false;">Follow</span>
</div>
<br>

Biru : Untuk nama link yang akan disiarkan tu.
Oren : Blog ID korang.

Paste code ni lepas code diatas :)

<div id="me" style="display:none;">
<div class="main-title">Meet the Owner!</div><br>
<center><img src="URL GAMBAR"/></center><br>
Letak biodata korang.<br>
<div class="main-title">My wishlist</div><br>
<form name=myform>
    <input type="checkbox" name="mybox" value="satu" checked />wishlist <br />
    <input type="checkbox" name="mybox" value="satu" checked />wishlist <br />
<input type="checkbox" name="mybox" value="satu" disabaled />wishlist <br />
<input type="checkbox" name="mybox" value="satu" checked />wishlist <br />
    </form>
</div>
<div id="love" style="display:none;">
<div class="main-title">Tagboard</div><br>
put your cbox/shoutbox here. Tagboard width must below: 550.<br>
<div class="main-title">Affies&Links</div><br>
<a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a><br>
<div class="main-title">Credits</div><br
---credits section korang---
</div>
<div id="you" style="display:none;">
<blogger><div class="main-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="sec-title"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<$blogitembody$></blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>


Turqoise : Boleh ubah ikut citarasa korang.

Kalau korang rasa susah sangat nak buat , boleh ambil freebies Miezza ni.Hehe , Miezza try buat skin ni , tapi simple je lah :)

                                                              Download Preview 

Okay , tu je . Korang boleh ubah mana yang patut.Jangan lupa tukar blog ID tu ye?Thank you kbaiii


Labels: , ,

Blogger ☺ CikNurin Irdina ♡♥ said...

nurin guna eh code dia?

 
Blogger nurhamiza shuhada said...

@ CikNurin Irdina Okay :) good luck !

 
Blogger nurul nabila said...

saya guna :)

 
Blogger Miss Short said...

hai, kita guna code dia ye? :)

 
Blogger Yun Sing said...

terima kasih ya :) buat tutorial.. cuba buat blogskin :3

 
Blogger XiiSweetChiki Boo said...

kita guna code ni , ye

 
Blogger AinaA said...

Can I use it ?

 
Blogger nurhamiza shuhada said...

@all okay , good luck !

 
Blogger Nur Mira Dayana said...

mira nak mohon share kat blog mira boleh???

 
Blogger Farahdalilah said...

kenapa sy x dpt nak copy code tu? :(

 
Blogger Farhana said...

Hai thanks , saya cuba buat blogskin guna cara ni , copy code ye thanks :)

 
Blogger Reina Takashi said...

AKAK SAYA NAK GUNA UNTUK BUAT BLOGSKIN...THANKS

 
Blogger Jin Eun said...

akak , tk jumpa pun yg hijau utk cursor tuu ,

 
Blogger Minn Edina said...

thanks.. dah jadi blogskin sye walau tak seberapa..hehe

 
Anonymous Anonymous said...

saya guna untuk blog skin eh :)

 
Blogger Song Ha Eun said...

Kak..saya guna blogskin ni ye..tapi macam mana nak tukar ID ye..?Newbie..hehe

 
Blogger sofie adie said...

holla!
pinjam tuto ye?
terima kasih!
:)

 
Blogger Faeyzaallasa said...

Annyeonghaseyo .. saya guna code awak ye. thank you .

 
Blogger Ukhti Cahaya said...

minta izin guna ya ^_^

 
Blogger Jaf said...

saya guna code awak ye..
tapi,background tak bisa digantikah?
saya sudah cobe,dan background tak terganti pun

 
Blogger najwa amilin said...

Annyeong ! saya guna code awak boleh ? :)

 

Post a Comment