Tutorial Jom Buat Blogskin Sendiri Part 1

/ Comments: ( 0 )
Assalamualaikum and hi ^___^
Kebosanan melanda sebab idea nak update blog makin menipiss piss piss. Jadi aku nak buat tutorial buat blogskin sendiri ! Suka tak suka tak? lulz ;p


Tapi jangan risau yer kakak2 dan adik2 sekalian :) Najwa akan membantu kalian bagaimana mahu membina blogskin sendiri. Haa kan dah keluar ayat budak nerd. Wakaka . Codes from Lettha. Saya ubah sikit-2

Step pertama : Log In  Dashboard > Template > Scroll ke bawah sekali > Klik Revert to classic template (klik aje, no worries lah)

Step kedua : Kalau kauorang klik Review Blog, anda akan menyaksikan blog yang amat huduh. Sorry ayat begitu lurus bendul. Jadi, korang delete semua kod di dalam ruangan template anda. (Delete je semua)

Step ketiga : Copy kod yang aku suruh copy kejap lagi SATU PERSATU ! Tak perlu nak tergopoh-gapah sangat lah kan .. takkan lari gunung dikejar

- JOM MULAKAN DENGAN LAFAZ BISMILLAHIRRAHMANIRRAHIM -

Step pertama : Copy kod di bawah dan paste di ruangan template anda.

<html>
<head>
<center><img src="URL HEADER" /></center>
<title>NAMA BLOG</title>
MERAH : URL HEADER anda 
BIRU : NAMA BLOG anda . Contoh lah kan aku buat nama (My Wonderland) Bahan rujukan di bawah



Step kedua : Copy kod di bawah dan paste di bawah kod atas tadi ok?
<style type="text/css">
#navbar-iframe {display: none;}
body {
background: url(URL BACKGROUND);
background-attachment:fixed;
font-family: verdana;
font-size: 11px;
}
a:link, a:visited {
color:#ffa1c2;
-webkit-transition-duration: 0.5s;
text-decoration:none;
}
a:hover {
-webkit-transition-duration: 0.5s;
color: #666;
}
</style>
<body><br>
MERAH : URL BACKGROUND anda
BIRU : KOD WARNA boleh cari di sini


Noww, blog aku dah jadi macam ni

Step ketiga : Cari kod </style> dan pastekan kod bawah nie dekat ATAS nya.
.mainblog {
background:#ffffff;
color:#666666;
padding:14px;
width:500px;
border-radius:10px;
text-align:justify;
}
.sidebarblog {
background: #ffffff;
color: #666666;
padding: 8px;
width: 240px;
border-radius: 10px;
text-align: justify;
}
.title {
color:#FF9FCC;
font-size:18px; font-family: Georgia; Font-style: Italic;
padding:3px;
border-bottom:2px solid #ffa1c2;
}
.date {
font-style:italic;
font-size:10px;
margin-bottom:2em;
}
Fuchsia : Warna font dalam post dan sidebar.  Uolls boleh guna warna hitam atau warna kelabu or something like cokelat pekat.
MERAH : Widht main blog uollss. Bsar besar pun boleh =3
OREN : Widht untuk sidebar uollss
HIJAU : Warna untuk post title. Uolss cari lah sendiri ok.


Step keempat : If dah sudah, cari kod <body> dan paste kod ni di BAWAH nye taw.
<table style="line-height: 17px;" width="880"  border="0" align="center" cellspacing="5">
<tbody><tr>
MERAH : Itulah widht keseluruhan blog anda. Boleh ditukar kalau mahu.

Step kelima : Now, copy kod nie dan paste di BAWAH kod tadi.


<td valign="top" width:550px;">
<div class="mainblog">
<blogger><div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="date"><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>
 Nota : Selalu tutup dengan </td> ok. Boleh tukar warna merah dengan ayat anda. Warna biru pun sama =3

Sekarang, time untuk cipta SIDEBAR ! Copy kod nie dan paste di bawah kod tadi.

<td valign="top" width="250px">
<div class="sidebarblog">
<div class="title">Tajuk Sidebar</div>
ISI SIDEBAR</div>
<br>
Boleh tukar kan mana yang patut. Nak lagi kotak sidebar? Nah letak kod nie di bawah kod tadi. Ulang aje dengan kod yang sama >///<

<div class="sidebarblog">
<div class="title">Tajuk Sidebar</div>
ISI SIDEBAR</div>
<br>
Jom terjah blog yang baru aku edit !
Haa lawakan-lawakan ? lulz -.-

Step keenam : Kalau nak tutup coding sidebar tadi, pastekan kod nie, okey?
</td>
Step terakhir iaitu ketujuh : Paste kan kod bawah ni di bawahhh sekali ! 
 </table></body></head></html>

Okey, dah sudah. Nanti sambung part 2 punya. Nak buat page about me, stuff, exchange link and blah blah blah di tutorial seterusnya .. Good luck !

FREEBIES : Ni yang versi bodo bodo style punya tau. 
<html>
<head>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMR3Pu-Doun4yMPUkiQCYIz471VRJUUe3q7pWhAqCPXOJdsIBzRawanSxHyzzpzd4XuEOwpPwqY2oLAA72HXqerm7jGJvpxXHMQBd5m4ivxPqaxYJaxUSm15SQkj8310ElOOiXKgBLqruO/s1600/12oeJ2.png" /></center>
<title>My Wonderland</title>
<style type="text/css">
#navbar-iframe {display: none;}
body {
cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHem4VfbIKkix_VrFloFiYen5obdLvQQIyQRl9V9nYTlrGeS2s_Oo30xb4KLLuL3oZI2ZuZlbDAikdS09hsM7UzIbREROYiOXvGMRBeOhBKXdbF6RfGUo3Ogx39rKhXFhk3SLgj1bXtA/s1600/04.gif), auto;
background: url(http://i1074.photobucket.com/albums/w419/amaninaonly/th_polkadotpink-1.gif);
background-attachment:fixed;
font-family: verdana;
font-size: 11px;
}
a:link, a:visited {
color:#ffa1c2;
-webkit-transition-duration: 0.5s;
text-decoration:none;
}
a:hover {
cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHem4VfbIKkix_VrFloFiYen5obdLvQQIyQRl9V9nYTlrGeS2s_Oo30xb4KLLuL3oZI2ZuZlbDAikdS09hsM7UzIbREROYiOXvGMRBeOhBKXdbF6RfGUo3Ogx39rKhXFhk3SLgj1bXtA/s1600/04.gif), auto;
-webkit-transition-duration: 0.5s;
color: #000;
}
.mainblog {
background:#ffffff;font-size: 11px;
color:#000;
padding:14px;
width:600px;
border-radius:13px;
text-align:justify;
}
.sidebarblog {
background: #ffffff;font-size: 11px;
color: #000;
padding: 8px;
width: 240px;
border-radius: 10px;
text-align: justify;
}
.title {
letter-spacing: 2px;
color:#FF9FCC;
font-size:18px; font-family: Georgia; Font-style: Italic;
padding:3px;
border-bottom:2px solid #a9a9a9;
}
.title2 {
color:#a9a9a9; letter-spacing: 2px;
font-size:18px; font-family: Georgia; Font-style: Italic;
padding:3px;
border-bottom:2px solid #ffa1c2;
}
.date {
font-style:italic; font-family: trebuchet ms; letter-spacing: 2px;
font-size:10px;
margin-bottom:2em;
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track-piece  {
background-color: #6c5656;
border: 3px solid #fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #fff;
border: 1px solid #fff;
}
blockquote {
-webkit-transition:2s;
color:#111;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Qe7STn2LtiYM3Oo9NWtgxUtzeVape6ZuxHEiAYzno2_aUyrKXgytFTXDLaf-bza7gy70HQzJ_-j9avwoyKSG2dxFiFn2SVd9x5EuMdCQceSi9BqnB4d5wayTeTyKsTI9gd3AVDfzY7c/s1600/sparkles.png);
border-left:9px solid #ffa1c2; border-right:9px solid #eee; border-top: 1px dashed #ffcaca; border-bottom: 1px dashed #ffcaca;
padding:8px;
border-radius:8px;
}
blockquote:hover {
box-shadow:0px 0px 25px #ffa1c2;
color:#000000;
border-right:9px solid #ffa1c2; border-left:9px solid #eee;
padding:8px;
border-radius:10px;
}
</style>
<body><br>
<table style="line-height: 17px;" width="880"  border="0" align="center" cellspacing="5">
<tbody><tr>
<td valign="top" width:550px;">
<div class="mainblog">
<blogger><div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="date"><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>
<td valign="top" width="250px">
<div class="sidebarblog">
<div class="title2">Welcome here</div>
<center> Helo, Assalamualaikum. Sila ketuk pintu sebelum masuk. Eh tak da pintu? Ketuk tingkap LOL ;p</center>
<center><b> Change this with your own </b></center></div>
<br>
<div class="sidebarblog">
<div class="title2">Le'Cbox</div>
<center> Your cbox code, here</center></div>
<br>
<div class="sidebarblog">
<div class="title2">Credit's</div>
<center>Blah blah blah </center></div>
<br>
</td>
</table></body></head></html>



##UPDATE TERKINI : Sebenarnya ada pembetulan dalam coding yang anis lupa nak mention. Siapa yang pernah try, search kod .mainblog { dan .sidebarblog { , pastekan kod nie di bawah tu.
font-size: 11px;
***Sebab? tulisan korang akan jadi besar macam elephant . Maaf ! :)
  
 
Orange Bobblehead Bunny