Little Thing..

Tutorial : Buat Blogskin Sendiri

Sunday, 1 July 2012 • Sunday, July 01, 2012 • 0 comments

okayy , korang mesti nak tau cara buat blogskin sendiri kan ? okayy , Follow step by step kayy ?! c0z sy tak nak nnt pening pulak !

okayy , korang kene buat ni dulu ,, pegi dashboard >> design >> edit Html >> revert to classic template yg kat bawah tuh ae ?! kayy dah ? follow step di bawah ...

First , copy code bawah ni ...
<html>
<head>
<center><img scr="Url Header" ><center>
<title>Nama Blog</title>

Merah : Url Header
Kuning : Nama Blog Korang

erm , korang nak tau url header nak amek kat mane ?senang je kayy ? header yg korang dah buat guna Photoshope / Photoscape tuh korang upload ker Photobucket ,kalau korang belum ada account , sign up lah kayy ?! then upload !

Second ,tekan F3 then cari <html>
dah jumpa? kayy pastekan code ni bawah code <html> tadi ..

<div style="display:scroll; position:absolute; top:0px; right:2px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=YOURBLOGID" target="_blank" rel="nofollow" title="Follow" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL GAMBAR I" /></a><br /><div style="display:scroll; position:absolute; top:0px; right:185px;"><a class="linkopacity" href="http://blogger.com/home" rel="nofollow" title="Dashboard" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL GAMBAR II" /></a></div></div>

Hijau : Blog ID korang
Purple : Url Button Follow
Pink : Url Button Dashboard

tak tau blog ID kat mane ? first , korang pegi kat home then korang cari macam gamba kat bawah tuh kayy ? copy , then paste kan kat atas tuh !

Third , paste code dibawah ni kat bawah semua code tadi ..

<style type="text/css">
#navbar-iframe {display: none;}body {
background: url(URL Bg);
background-attachment:fixed;
font-family: arial;
font-size: 11px;
}
a:link, a:visited {
color:#000000;
text-decoration:none;
}
a:hover {
border-bottom:1px solid #87689;
}
</style>
<body>
<br>

- Oren : itu coding for delete Navbar
- Blue : URL background(cm biasa,photobucket..)
- Red : colour of link
- Green : colour of link hover

korang mesti nak cari kat mana code color tuh kan ? okayy klik link tuh n tukar code warna tuh dengan code pilihan anda kayy ?! -----> Html Color Code

Fourth , tekan F3 lagi then cari code </style> then paste code kat bawah ni diatasnya ..

.main {
background:#ffffff;
color:#666666;
padding:14px;
width:500px;
border-radius:10px;
text-align:justify;
}
.sidebar {
background: #ffffff;
color: #666666;
padding: 8px;
width: 240px;
border-radius: 10px;
text-align: justify;
}
.h1 {
color:#FF9FCC;
font-size:18px;
padding:3px;
border-bottom:1px solid #c0c0c0;
}
.h2 {
font-style:italic;
font-size:10px;
margin-bottom:2em;
}

-Blue : warna font dalam blog
- Oren : width setiap bagian blog, sidebar and main blog
- Red : radius kelengkungan layer blog,
- Purple : warna font post title

Fifth , dah ? okayy , tekan F3 cari code <body> n pastekan code bawah ni kat bawah nya ..

<table style="line-height: 17px;" width="850" border="0" align="center" cellspacing="5">
<tbody><tr>
Merah : Lebar Blog Anda

Seterusnya ,pastekan code ni kat bawah semua code tadi kayy ?

<td valign="top" width:550px;">

<div class="main">
<blogger><div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h2"><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>

okayy , code warna Hijau tuh , suka hati korang lah nak tukar perkataan comment tuh jadi apa kayy ? yg Code warna Pink pon sama tau ?! contoh korang nak tukar lollipops ker ! hehe :) suka hati kayy ?!
Then ,masa untuk letak sidebar kayy ?copy code bawah ni kat bwah code sebelumnya ,

<td valign="top" width="250px">
<div class="sidebar">
<div class="h1">TITLE SIDEBAR</div>
ISI SIDEBAR</div>
<br>

Merah : Lebar sidebar korang
Biru : Tajuk sidebar korang
Pink : Isi sidebar korang
kalau korang nak buat banyak-ii pon boleyh :)

<div class="sidebar">
<div class="h1">TITLE SIDEBAR</div>
ISI SIDEBAR</div>
<br>

<div class="sidebar">
<div class="h1">TITLE SIDEBAR</div>
ISI SIDEBAR</div>
<br>
</td>
okayy , senang citer copy je semua code atas ni kat bawah code yang same di atas tadi ..

Dan , yang terakhir sekali ... kat bawah sekali korang paste code ni pulak ..

</table></body></head></html>

then . korang pandai-ii lah edit sendiri apa yang korang nak letak n ubahsuai kayy?! last sekali , klik save tau ! kalau tak jadi bagitau Ina tau ?! kayy ?! tengs ~

PAST • FUTURE