How To Make Own Blogskins

Halo, teman-teman! Kali ini, aku mau share cara membuat blogskins! Tapi, jangan disangka blogku ini pake blogskins, yaa! Blogku pake denim, hehe... Tau blogskins kan? Ah, itu lho, yang kode-kodenya lebih sedikit dari template blogger, terus tampilannya bagus-bagus.. Kalian bisa ke situs blogskins, yaa! Klik di sini.

Tapi, kan lebih asyik kita buat blogskins sendiri, ya? Hm, caranya sih memang agak rumit. Tapi, ikutin pelan-pelan, yaakk!

Cara membuat blogskins ada dua. Yaitu basecode dan membuat dengan kode sendiri. Basecode itu apa sih? Coba di-translate. Base = dasar, code = kode. Jadi, dasar kode. Maksudnya? Misalnya, ada satu blogskins, dan blogskins tersebut aku pakai untuk membuat blogskins. Nah, blogskins yang aku buat itu namanya basecode. Jadi, pake kode skins orang.

Untuk cara basecode, gampang banget. Kamu tinggal pilih skins di situs blogskins dan download kodenya. Bisa klik di sini. Terus, kalian bisa live preview di sini. Kalo udah, kode blogskins di notepad tadi si copy dan di paste di html edit. Terus, ubah-ubah aja. Mulai dari tampilannya, scrollbar lah, warna, backrgound, dan lain-lain. Pastikan itu semua banyak yang kamu edit. Terutama warnanya.

Untuk kode sendiri, Tiara special credit sama Kak Novita. Simak baik-baik, yaa!

Sebelum membuat blogskins sendiri, sebaiknya kalian meng-copy dan paste di ms word atau di notepad dulu kode blog kalian. Agar tidak terjadi kesalahan saat menge-save template jika ingin dipakai langsung blogskins hasil kalian sendiri.

Untuk tutorial ini, kalian lebih baik live preview dengan situs yang link nya udah aku kasih di atas yaa!

Copy & Paste kode di bawah ini terserah di mana, pokoknya boleh ms word/live preview tadi

<html>
<head>
<center><img src="URL HEADER" /></center>
<title>Judul Blog</title>

Copy kode ini di bawah kode di atas. Usahakan spasi satu baris.

<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 blog
Hijau : font dan font size
Kuning : kode warna. want to see? click this!

Cari kode </style>, kalo udah ketemu copy kode di bawah ini di atas kode </style> tersebut.

.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: Georgia; Font-style: Italic;
padding:3px;
border-bottom:2px solid #ffa1c2;
}
.date {
font-style:italic;
font-size:10px;
margin-bottom:2em;
}

Ungu: Warna dan ukuran font di sidebar blogskin kalian.
Merah: Width (lebar) blog kalian.
Kuning: Width (lebar) untuk sidebar.
Hijau: Warna untuk post title (judul posting/entri)
*kalo yang tulisan "date" itu, berarti kode-kode dibawahnya berhubungan dengan tanggal di posting/entri kalian*

Untuk jenis font, font style, warna font, dll itu bisa kalian edit sendiri. Soalnya ribet kalo mau aku warnain satu-satu dan tulis keterangannya satu-satu. Kalian pasti tau kok;) Misalnya, warna dan keterangan yang udah aku tulis di atas itu kan ada, kalo ungu warna dan ukuran font sidebar berarti kode-kode yang di dekat warna ungu adalah kode-kode untuk sidebar:)

5. Cari kode <body>. Sudah ketemu? Kalo sudah, copy kode di bawah ini, lalu paste di bawah kode <body> 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>

Biru: kode ini adalah nama banyaknya komentar. Contoh, misalnya di posting/entri kalian ada 2 komentar, kan biasanya tulisannya "2 Comments". Nah, kalo kode biru itu kalian ganti dengan tulisan Friend(s), maka tulisan nama di komentar posting kalian adalah "2 Friend(s)"

Merah: Nama posting terbaru (newer) atau posting lama (older). Terserah mau diganti apapun, contoh "Past", dll.

6. Copy kode di bawah ini, lalu paste di bawah kode-kode tadi. (Ini adalah kode untuk gadget/elemen sidebar blogskin kalian)

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

Ungu: kode html gadget/elemen sidebar kalian, misalnya di baris pertama sidebar, kalian mau menaruh chatbox, maka letakkan kode chatbox kalian pada kode berwarna ungu tersebut.

Hijau: Judul gadget/elemen sidebar kalian, kalo di kode ungu nya kalian taruh html chatbox, maka judulnya bisa chatbox, tagboard, shout here, dll terserah kalian.

Note:

Kalo kalian mau menaruh beberapa gadget/elemen di sidebar kalian, maka copy lagi kode yang sama seperti kode di nomor-6, lalu paste dibawahnya. Misal, kalian ingin menaruh gadget/elemen chatbox, ask.fm, dan credits, maka kalian copy kode di nomor-6 sebanyak 3 kali, namun judul dan kode html nya beda ya, harus di sesuaikan dengan kode gadget/elemen yang kalian mau:)

7. Copy kode di bawah ini, lalu paste dibawah kode-kode yang sudah kalian edit tadi.

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

Semoga bermanfaat... ^^

Search This Blog

mutiaraizzati.

How To Make Own Blogskins

Comments

Post a Comment

Popular posts from this blog

Perpisahan

Movie About Insecurity : Imperfect

Ramadhan Tiba!