PinkCherry
Welcome!
Touch the image!



Home Stuff Rules

Linkies Biases Request

Hello friends.Thanks for visit my blog. My name is Cindy Monica, I'm 14 years old. I love kpop so much!



Friend(s)
Your IP is: So, DONT OPEN MY PAGE SOURCE. Can You? I see your IP.

Secret Box!
P I N K
Hello...
This is PinkCherry secret box..
Open it! And you will see
a suprise!^^

Talk! Talk!

No Anonim and Secret. What is your name?
Put your link or email.
No harsh word.
If you want to exchange link, tell me on chatbox.
And be nice :)

Credits!
Template by: Cindy Monica
Original Article by: Cindyz's Blog
Older Post | Newer Post
Cara Membuat Blogskin Sendiri (Part 1)




Cara Membuat Blogskin Sendiri Dengan Mudah (Untuk Blogger) - Bagi yang ingin membuat blogskin sendiri yang sesuai dengan karakter kalian, sesuai keingginan kalian. Kalian bisa ikut tutorial ini. Nah, sebelum kita mulai cari dulu tempat untuk meletakkan kode-kode tersebut. Kalian bisa meletakannya di Ms. Word, Notepad atau tempat yang lain-lainnya. Disini, saran saya bagi kalian yang ingin menaruh dan mengedit kode-kode tersebut sambil melihat previewnya kalian bisa Klik Disini! .

Tampilannya bakal seperti ini!


Keterangan :
- Background Biru : Disitu untuk kalian menempatkan kode-kode blogskin kalian
- Background Putih : Disitu kalian bisa preview hasil kode kalian..




Nah, Sekarang mari kita mulai membuat Blogskin sendiri!!

1. Copy Kode dibawah ini! Lalu Pastekan ketempat kalian menempatkan kode-Kode tersebut.

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

- URL HEADER : Tempatkan URL HEADER kalian
- NAMA BLOG : Ganti jadi nama blog yang kalian inginkan. Contoh : My SIMPLEland


2. Copy kode dibawah, dan paste dibawah kode diatas 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 kalian
- BIRU : Kode Warna. Kalian Bisa cari di HTML Color Codes


3. Cari kode </style> , pastekan kode dibawah ini di atas kode </style> tersebut.

.mainblog {
background:#ffffff;
color:#666666;
padding:14px;
width:500px;
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;
}

- FUCHSIA : Warna font dalam post dan sidebar.
- MERAH : lebar main blog. Besar-besar pun boleh. Terserah kalian saja.
- OREN : lebar sidebar blog kalian
- HIJAU : Warna untuk post title.
- UNGU : Ukuran font  post title kalian
- KUNING : ukuran font tanggal post kalian.


4. Setelah itu mari kita lanjut, cari kode <body> dan paste kan kode ini di bawahnya.

<table style="line-height: 17px;" width="880"  border="0" align="center" cellspacing="5">
<tbody><tr>

- MERAH : Lebar keseluruhan blog kalian..  Itu boleh kalian tukar sesuai dengan keinginan kalian.


5. Copy kode bawah ini, pastekan dibawah kode 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 : Itu kalian boleh tukar sesuai dengan keinginan kalian. Misalnya Komentar atau Qittie. Nanti bakal tertampil di blog seperti ini : 0 Komentar atau 2 Qittie.
- MERAH : kalian bisa tukar sesuka hati kalian



6. Sekarang kita akan membuat sidebar, copy kode ini, dan paste kan dibawah kode tadi

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

- Ingat, sidebar yang kalian buat harus selalu di akhiri dengan </td> sebagai penutup masing-masing sidebar. kalau tidak nanti sidebar kalian akan sambung menyambung tanpa ada batas atau terkadang sidebar kalian tertimpa-timpa gitu.

7. Mau tambah sidebar lagi? Copy di kode dibawah ini ^^ dan pastekan di bawah kode step ke 6.

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

Ingat, selalu tutup kode sidebar dengan </td>


8. Terakhir, copy kode ini, dan pastekan di paling bawahhhhh sekalii...

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


Selesai, Eip, Kalian baru selesai membuat blogskin yang dasar..
Coba di lihat? masih ada yang kurang bukan?
Kalian mau buat page : About Me? Stuff? Exchange Link? Dan lainnya? Klik Next^^^


Labels:



0 Comments:

Post a Comment


Written by me @ 2:35:00 PM ♥ 0 Comment(s)