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