Diary About Stuff Link
A U R E L I E
Tutorial #4 : Membuat Blogskin sendiri

Tuesday, November 19 @ 5:30 AM | 1 Comment [s]

  Selamat malam semua ^^V Hari nie aku rasa bosan sangat sebab tak tau nak buat apa . Untuk mengisi malam yang kosong tanpa idea ini, apa kata aku bagi korang tutorial cara-cara nak buat blogskin sendiri . Ehem2, boleh lah daftar jadi blogskin maker yang baru lepas nie kan ? OK ! begini caranya....

1. korang kena sediakan blog preview ataupun boleh jer guna website   nie, http://htmledit.squarefree.com/ takut tetiba tak jadi kan, tak lah rosak blog korang yang cumil luti tu . Website tadi tu semua kod yang korang nak test, korang letak jer dalam kotak biru tu ok?

2. Ok first, pergi dekat Dashboard-->Template---> Edit HTML

3. lepas tu copy kod kat bawah nie,
<html>
<head>
<center><img src="URL Header" /></center>
<title>Nama Blog</title>
4. jadi, yang URL Header tu korang boleh tukar jadi URL image header korang. Buat satu header yang saiznya 900x300 (yang nie saiz standard selalu aku buat), upload dekat http://imgur.com/, lepas tu ambil kod URL dia. Bagi yang Nama Blog pula, tu letak lah apa pun nama blog korang .

5. nampak tak kod <html> yang atas sekali tu? nampak kan? ok sila copy kod di bawah dan paste di bawah kod <html> tu 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 FOLLOW" /></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 DASHBOARD" /></a></div></div>
 sekarang nie, YOURBLOGID tue tukar jadi blog ID korang . yang warna biru tue, korang boleh tukar dengan URL korang sendiri . takut korang jumpa dekat mana-mana ikon follow dengan dashboard yang lagi kiut dari aku punya tu kan, tukar lah .

6. Dah siap dahh? bagus, pandai anak monyet . Haha~ ok gurau jerr...jangan marah2, nanti kedut banyak . EHh, ok2 , dah siap merapu raban nie. Banyak nie kod kena kopipes, rilek dulu . Sekarang, kod di bawah nie pulak korang paste kan di bawah semua kod tadi .
<style type="text/css">
#navbar-iframe {display: none;}body {
background: url(URL Background);
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>
yang aku highlight warna kuning, jangan kosek@ kacau . Tu kod nak buang navigation bar yang buruk (ehh taklah buruk sangat) . YAng warna merah menyala tu, tu korang tukar untuk warna link . Yang warna hijau tu pula, untuk warna link hover . nak cari kod warna semua tu, klik NIE .

7. Ok sekarang sila tekan CTRL+F dan search kod </style> . Korang copy kod di bawah nie, paste di DI ATAS kod </style> tadi .
.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;
}
K yang aku highlight tu, warna aqua tu warna post title, yang warna merah tu width bagi setiap bahagian blog (body post+sidebar), dan last sekali warna hijau tu radius curve blog korang.

8. OK now cari code <body> pulak , jumpa? paste kod nie dekat bawah kod <body> tadi .
<table style="line-height: 17px;" width="850"  border="0" align="center" cellspacing="5">
<tbody><tr><br><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> 
 warna oren- lebar blog
warna merah-jarak bagi setiap column

9. Ok sekarang kita sambung kod tadi...paste kod nie pulak di bawah kod tadi .
<td valign="top" width="250px">
<div class="sidebar">
<div class="h1">TITLE SIDEBAR</div>
ISI SIDEBAR</div>
<br>
warna merah tu width sidebar korang ok? TITLE SIDEBAR dan ISI SIDEBAR tu tukar ikut kreativiti masing-masing. Kalau nak sidebar banyak2, paste kod tu banyak2 kat bawah, biar sambung2. Bila dah cukup banyak ( ikut korang lah berapa pun kan?) letak kod </td> untuk tutup . 

10. Last skali , copy lah kod ini di bawah semua kod ciptaan korang tadi ....
 </table></body></head></html>
perhatian yer...kemungkinan besar kalau ada kod lain di bawah kod ini, template korang akan rosak . SO jangan nak gedik2 tambah apa2 kat bawah yer . Untuk tutorial lain, sila request . Aku ada berlambak dalam draft nie. Malas nak hupdate jer dalam keadaan internet yang nazak macam nie .

Labels:



Blogger supriya sivabalan said on November 19, 2013 at 10:18 PM  

Thank you for thisssss! I've been wanting a free and clean code for a long time now because I wanted to tweak everything myself. Thanks ya~ And feel free to drop by my blog!

Post a Comment


Older Post | Newer Post

Guestbook
I supposed to have more free time *sigh*

STRICTLY AD IS NOT ALLOWED.

SPAMMER is PROHIBITED.

only leave nice words please .



History
  • Aku menjurus kepada apa?
  • Not A Storyteller
  • It's really ok if....
  • Last post :'( hiatus begins
  • Homework problem
  • Out of Nowhere
  • SCHOOL attack !
  • Awkward post
  • Tutorial #3 : Menambah gambar Instagram (blogskin)...
  • Holiday Giveaway by Nurin Aireen

  • Tabung Kemanusiaan
    tekan jangan tak tekan ! sumbangan bakti kepada pemilik belog :)


    Credit

    Template by : Aurealia
    Thanks to : Wanaseoby
    Images : Tumblr

    Best View at GOOGLE CHROME!