Tutorial : Cara Membuat Blogskins / Skins

{Tutorial} Cara membuat blogskins
Halo! Aku mau ngasih tutorial cara membuat blogskins,nih! Tadi, di cbox Faisha yang request .
Yasudah dari pada aku pegel ketik'ketik, kita langsung ke topic.
Note:
Sebelum kalian membuat blogskins, aku sarankan untuk mengcopy semua code template blog kalian di Microsoft word. Agar nanti ketika terjadi kerusakan pada template yang kalian buat, kalian masih bisa memakai template kalian yang lama.


Oh,iya! Kalau kalian mau mengedit template secara langsung, kalian bisa mengunjungi website ini .
Kalau kalian sudah siap, sekarang kita mainkan code-codenya!

Step 1: Copy code dibawah ini lalu pastekan di tempat kalian membuat blogskins.

<html><head>
<center><img src="URL HEADER" /></center>
<title>JUDUL BLOG</title>

Merah: Url header untuk blogskins kalian.
Biru: Judul blogskin yang akan kalian buat.

Step 2: Copy lalu pastekan code ini di bawah code tadi.

<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 untuk blogskins kalian.
Oranye: Jenis font dan ukuran font untuk blogskins kalian.
Hijau: Code warna untuk link hover kalian. Kalau kalian mau lihat code warna, click here

Step 3: Cari code </Style>.
Kemudian copy kode dibawah ini diatas code </style>.


.mainblog {
background:#ffffff;
color:#666666;
padding:14px;
width:900px;
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: century gothic;
padding:3px;
border-bottom:1px solid #ccc;
}
.date {
font-style:italic;
font-size:10px;
margin-bottom:2em;
}
Oranye: Lebar blog kalian.
Merah: Lebar sidebar blog kalian.
Aqua: Warna post title blog (Judul etnri).

Step 4: Cari code <body>
Copy pastekan code dibawah ini dibawah code <body>.


<table style="font-size:11px; background:#fff;border: 1px solid #ffffff;margin-top:-1px;border:1px solid #f0f0f0; border-radius:10px; " width="910" align="center" border="0" cellspacing="10"> 
<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>


Hijau: Warna border untuk tab.
Kuning: Gantikan dengan kata-kata kesukaanmu seperti 'friends' . Yang penting gunakan imajinasi-mu!
Biru: Gantikan dengan kata-kata kesukaanmu seperti 'Future atau Past'. Yang penting gunakan imajinasi-mu!

Step 5: Copy pastekan code sidebar ini dibawah code-code tadi.

<td valign="top" width="250px">
<div class="sidebarblog">
<div class="title">Judul Sidebar</div>
ISI SIDEBAR</div>
<br>

Hijau: Judul sidebar kalian.
Biru: Isi sidebar kalian. Bisa itu berupa tulisan,kata-kata,atau widget.

Kalau mau menambahkan beberapa sidebar lagi. Copy code berikut di bawah semua code.

<div class="sidebarblog">
<div class="title">Judul Sidebar</div>
ISI SIDEBAR</div>
<br>
Lalu pasang code beikut dibawah code-code tadi.
</table></body></head></html>


Okay, segitu dulu yah! Kalau belum mengerti bisa nanya ke comment box. Kalau mau re-post dont forget to credit. 
Credit : Kak Siti

10 komentar:

  1. Wow... aku boleh readmore kan kak? membantu bikin skins nih!

    BalasHapus
  2. Kak Valleria ataupun Kak Annisa di blog ini aku heran bagaimana cara menemukan letak code template!
    Tapi ini cukup membantu untukku! Terima kasih! Salam hangat dari Bintang!

    BalasHapus
  3. @Bintang Neli cari digoogle
    @Alya boleh kok

    BalasHapus
  4. Maaf lama aku membalasnya! Oke! Salam hangat dari Bintang!

    BalasHapus
  5. kalau skins yang pakai menu bar gimana?

    BalasHapus
  6. izin repost ya kak. credit lengkap kok :D

    BalasHapus
  7. izin repost lenkap creditnya...

    BalasHapus
  8. Kak Izin reposttt :) Banyak yang nanyain diblog daku :)

    BalasHapus

Hello ~

Leave comment here
Request ? tell in chat box
Nice words please :)