me gustas: Edit Classic Template
Entry About Follow Dashboard




Contact Me

credits
Maret 21, 2012 | 1 Cloud(s)
Edit Classic Template


Assalamu 'alaikum!

Heii~ Senangnya, dapat request pertama! Dari Blues-High alias Diva! Thanks untuk Kak Lettha untuk tutorialnya \m/

Dashboard > Design > Edit HTML

Scroll down page itu dan klik Revert to Old Template. Sekarang, kotak kode-kode di kotak Edit HTML sudah terdelete.

1. Taruh code dibawah ini dipaling atas kotak Edit HTML itu.
<html>
<head>
<center><img src="URL Header" /></center>
<title>//Nama Blog</title>


-Merah itu URL Header kamu. Harus direct link ya!
-Hijau itu title blog kamu.


2. Taruh kode bawah ini dibawah kode step 1 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>



Oren itu coding for delete navbar
- Kuning URL background kamu
Merah warna link
Hijau warna link hover



3. Tekan F3 dan search kode </style>, terus paste kode bawah ini diatas </style> itu.


.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;
}



Merah warna font dalam blog
Oren width setiap bagian blog, sidebar and main blog
Hijau radius kelengkungan layer blog, *kalau mau kotak kaku, delete coding itu*
- Biru warna font post title

- Pink size post title


4. Tekan F3 lagi terus cari kode <body> dan pastekan kode ini dibawahnya:
<table style="line-height: 17px;" width="850"  border="0" align="center" cellspacing="5">
<tbody><tr>



Merah itu spasi (jarak) antar rows column.
Oren itu kelebaran seluruh tables, meliputi main and sidebar.



5. Sekarang, paste lagi kode ini dibawah kode step 4 tadi  
<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>



Oren bagian post title
Biru bagian date, comments
Green perkataan komentar
Magenta perkataan older post and newer post
Purple itu width main.



6. Waktunya bikin sidebar!
Dibawah step 5, paste kode dibawah ini:

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

Merah itu width sidebar
Blue judul/title sidebar
Green isi sidebar

Kalo mau nambah sidebar-sidebar yang lebih banyak, banyak dan lebih banyak lagi tinggal tambahin kode ini dibawah kode sidebar tadi:
<div class="sidebar">
<div class="h1">TITLE SIDEBAR</div>
ISI SIDEBAR</div>
<br>

So, jadinya kayak gini:
<td valign="top" width="250px">
<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>


<div class="sidebar">
<div class="h1">TITLE SIDEBAR</div>
ISI SIDEBAR</div>
<br>
</td>
Sampe banyak banget boleh loh xD tapi inget jangan sampe lupa nie code: </td>.  Okeh?


Selese deh! Tinggal kamu tambah code ini dipaliiiing bawah kotak Edit HTML:


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



Wassalamu 'alaikum!

Label: ,

1 Komentar:

Blogger Maylafaizza Audiva Kyranni mengatakan...

Thanks Nisa :D


Posting Komentar