Cara Membuat Post Dalam Kotak Terpisah

Lanjut lagi... tutorials kali ini cara membuat area post/posting dalam kotak terpisah atau postingan yang terpisah - pisah seperti blog ini, bisa anda lihat di sini sebagai contoh.

Dengan memisahkan posting yang satu dengan lainnya ini akan terlihat rapi dan menarik serta mudah bagi pengunjung untuk membedakan dari posting ke posting.
Cara membuat post dalam kotak terpisah ini ada tiga jenis tampilan, jadi anda bisa praktekan satu persatu mana yang cocok dengan tampilan blog anda.

Sekarang ikuti langkah mudah di bawah ini :

• Log in blogger dasbor anda >> Tata Letak >> Edit HTML beri centang Expand Widget Template


• Dan cari kode di bawah ini, intinya cari .post { karena tidak semua template sama


.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}


• Bila sudah ketemu hapus dan ganti dengan kode di bawah ini pilih salah satu jangan semuanya di paste, gak tau apa yang terjadi bila semua kode terpasang




---



# Kode 1 #
Kode ini yang pertama dulu bayak di gunakan penguna blogger.

.post {
background:#0000ff
border:1px solid #0000ff;
margin:0 0 0.5em;
padding:0.5em;
font-family:"Trebuchet MS";
}



---



# Kode 2 #
Kode kedua ini telah di perbaharui sedikit.

.post {
background:#fff url(http://
i38.tinypic.com/2lt5wsl.jpg) repeat-x top;
border:1px solid #0000ff;
margin:0 0 0.5em;
padding:0.5em;
font-family:"Trebuchet MS";
}



---



# Kode 3 #
Kode ini juga hasil pembaharuan.

.post {
padding:10px;
Border-top: 3px solid #0000ff;
Border-bottom: 3px solid #0000ff;
Border-left: 3px solid #0000ff;
Border-right: 3px solid #0000ff;
Margin-bottom: 15px;
font-family:"Trebuchet MS";
}


• Bila sudah anda pilih dan paste jangan lupa klik simpan dan lihat hasil nya

KETERANGAN :

Untuk kode warna#0000ff ini warnanya BIRU jadi ganti sesuai warna blog anda.

Padding :Jarak antara text post dengan garis pinggir.
Border-top : warna garis pinggir atas.
Border-bottom : warna garis pinggir bawah.
Border-left : warna garis pinggir kiri.
Border-right : warna garis pinggir kanan.
Margin-bottom : jarak antara post yang satu dengan yang lainnya.

Anda bisa merubah angka ukuran di atas berdasarkan keterangan tesebut.
Selamat mencoba...!

Category: Tips and tricks, Tutorials blog