Haiiiii...
Setelah cukup lama ga ngepost tutobies, kali ini aku mau ngepost
tutorial cara membuat blogskin sendiri. Yaaaa, meskipun ini kodenya
bukan dari aku, soalnya aku ga pernah buat blogskin karena males-_-
waktu itu pernah sih, tapi sederhana cuman skin untuk ripper. Ini
kodenya dari Safira^^
Safira sih udah sering buat blogskin, hehe. Oke, jadi aku cuman
me-repost tutorial dari safira kodenya, kalo kata2nya aku usahain ku
ubah2 biar kalian ga pusing dan mudah nerapinnya.
2. Copy kode di bawah ini, lalu paste di tempat kalian untuk menaruh kode blogskin.
Biru: Judul blogskin kalian.
3. Copy kode di bawah ini, lalu paste di bawah kode yang ada di nomor-2 tadi (usahakan spasi satu baris ya)
Biru: Kode html warna link di blog kalian nanti. Mau lihat kode-kode warna? Ke sini
Hijau: Font untuk blogskin kalian dan ukuran font.
4. Cari kode </style> pada kode-kode yang sudah kalian copypaste tadi. Sudah ketemu? Kalo sudah, copy kode di bawah ini di atas kode </style> itu.
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*
1. Sediakan tempat untuk menaruh kode-kode membuat blogskin di bawah ini, bisa di MS Word/langsung di tempat kode template blog. Atau kalo kalian mau lebih mudah melihat preview kode-kode blogskin nya nanti, kalian bisa pergi ke sini (live preview html codes)Sebelum kalian membuat template blogskin kalian sendiri, aku sarankan untuk mengcopy terlebih dahulu seluruh kode template blog kalian yang lam lalu paste di tempat seperti MS Word. Kenapa? Agar, kalo terjadi kerusakan pada template blogskin yang kalian buat/kalian tidak bisa membuatnya, kan kalian masih bisa pake template kalian yang lama:)
2. Copy kode di bawah ini, lalu paste di tempat kalian untuk menaruh kode blogskin.
<html>Merah: Url header untuk blogskin kalian.
<head>
<center><img src="URL HEADER" /></center>
<title>Judul Blog</title>
Biru: Judul blogskin kalian.
3. Copy kode di bawah ini, lalu paste di bawah kode yang ada di nomor-2 tadi (usahakan spasi satu baris ya)
<style type="text/css">Merah: Url background blog kalian
#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>
Biru: Kode html warna link di blog kalian nanti. Mau lihat kode-kode warna? Ke sini
Hijau: Font untuk blogskin kalian dan ukuran font.
4. Cari kode </style> pada kode-kode yang sudah kalian copypaste tadi. Sudah ketemu? Kalo sudah, copy kode di bawah ini di atas kode </style> itu.
.mainblog {Ungu: Warna dan ukuran font di sidebar blogskin kalian.
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;
}
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>
Selesai sudah langkah-langkah membuat blogskin sendiri, kalo kalian mau
menambah effect-effect lain, re-edit aja:) Kalo ada yang tidak di
mengerti, silahkan tanya di komentar, aku akan jawab semampuku:) Huh,
ribet banget buat tutorial ini#:-s Jadi yang mau repost jgn lupa credit
ya! ;)
Credit:Kak Novita
Credit:Kak Novita
Don't ever dare open my page source, I know who you are ^-^
Thanks aw jadi kepengin buat template sendiri tapi asli buatanku o...Ya... aw mau nanya ini nanti jadi warna apa? Pink atau merah biasanya yng paling populer kan itu ^^
BalasHapusFina : Itu kan basecode sendiri, ya kode warna sendiri :33
BalasHapus