Wednesday, June 17, 2015

Membuat Blogskin Sendiri

Alya request lagi, nih! Sekarang cara membuat blogskin. Bagi yang penasaran, yuk langsung aja!
note: kalau mau pakai blogskin di blog, Gifta sarankan untuk mengcopy kode lama blog kamu di Ms. Word / Notepad, agar kalau ada kesalahan / kerusakan terjadi, kalian masih bisa pakai template yang lama.
1. Ke sini dulu, lalu hapus semua yang ada di sana sehingga bagian yang biru kosong, bagian putih juga kosong.
2. Copy kode di bawah dan paste di bagian yang biru, ya!
<html>
<head>
<center><img src="URL HEADER" /></center>
<title>Judul Blog</title>
Merah: url header blogskin
Biru tua: judul blog (contoh: kalau punya Gifta Beauty Beauty - Gifta's Blog)

3. Sekarang copy kode di bawah dan paste di bawah kode di nomor 2 (enter satu baris, ya)

<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>
Ungu: url background blogskin
Biru tua: kode warna link setelah, sebelum, dan saat dihover. untuk kode warna lihat DI SINI

4. Cari kode </style>

5. Copy kode di bawah dan paste di atas kode </style> itu
.main-blog {
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;
Sorry ya aku ngga beri warna dan keterangan. Soalnya, capek kalau mau warnain satu-satu.
Untuk yang .mainblog { itu untuk keseluruhan blog ; .sidebarblog { itu untuk sidebarnya ; .title { untuk pengaturan judul postnya ; .date { berhubungan dengan tanggal - tanggal di blogskinnya

6. Cari kode <body>

7. Copy kode di bawah dan paste di bawah kode <body>
<center><td valign="top" width:550px;"><div class="main-blog"><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>
Ungu tua: itu kode tulisan yang akan keluar saat ada 1 /  lebih komentar, singkatnya nama / judul jumlah komentar. (contoh: biasa tulisannya "1 comments" kan? Nah, kalau misalnya kalian ganti yang warna ungu tua itu menjadi "reader(s)", yang keluar "1 readers" bukan "1 comments") Sudah paham?
Biru tua: judul untuk post lama, kalau di blog Gifta gambar tanda panah ke kiri
Ungu muda: judul untuk post baru, kalau di blog Gifta gambar tanda ke kanan

8. Cari kode <html>

9. Copy kode di bawah dan paste di bawah kode <html>
<div style="display:scroll; position:absolute; top:0px; right:2px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=BLOG ID" target="_blank" rel="nofollow" title="Follow" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL GAMBAR TOMBOL FOLLOW" /></a><br /><div style="display:scroll; position:absolute; top:0px; right:185px;"><a class="linkopacity" href="http://blogger.com/home" rel="nofollow" title="Dashboard" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL GAMBAR TOMBOL DASHBOARD" /></a></div></div>
Itu ngga usah kukasih keterangan gak papa ya!

10. Copy kode di bawah dan paste di bawah kode di nomor 9

<td valign="top" width="250px">
<div class="sidebarblog">
<div class="title">JUDUL WIDGET</div><br>
ISI</div>
<br>
Itu ngga usah kukasih keterangan juga, gak papa ya!

11. Copy kode di bawah dan letakkan kode itu di bawah semua kode

</table></body></head></html>
Done! Sudah selesai! Akhirnyaaa.... Kalau mau repost, credit to me, oke?

There are 4 comments.
Please post another comment..

  1. Gifta, Maaf nggak mahir coding sih, maksudnya kode no 9 tuh apa yash?

    ReplyDelete
    Replies
    1. Maksudnya kode yang ada di step 9. Yang di bawah "9. Copy kode di bawah dan paste di bawah kode..."

      Delete
    2. ouuh, makasih gifta...!

      izin coba!

      Delete