Stefani Gifta Ganda's Blog: Membuat Blogskin Sendiri

Kamis, 18 Juni 2015

Membuat Blogskin Sendiri

Alya request lagi, nih! Sekarang cara membuat blogskin. Bagi yang penasaran, yuk langsung aja!

SUMBER KODE : blog 'kakak yang cute' , blog 'kuning yang cute'

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", yang keluar "1 reader" bukan "1 comments". Sudah paham?)
Biru tua: judul untuk post lama
Ungu muda: judul untuk post baru

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 7

<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 5 komentar.

amirakhrn11 Juni 2017 21.42
Gifta, Maaf nggak mahir coding sih, maksudnya kode no 9 tuh apa yash?
BalasHapus
Balasan
meme2 November 2019 08.15
terimakasih gifta
BalasHapus
Balasan

Tambahkan komentar