Kotak Postingan Terpisah

type='html'>Perhatikan blog ini, terlihat kolom postingan blog saya terpisah antara satu postingan dengan postingan yang lain.

Kolom postingan terpisah seperti ini juga terlihat lebih enak dipandang dan lebih memudahkan pengunjung blog dalam membedakan isi artikel yang kita tulis, daripada kolom postingan yang menyatu atau dalam 1 kotak saja.

Jika sobat ingin blog sobat tampilannya seperti ini, berarti sobat benar telah membaca artikel ini..

Untuk pemasangan kolom yang seperti ini, sobat hanya memerlukan sedikit tambahan kode HTML saja yang nantinya akan disisipkan ke blog sobat.

Berikut langkah - langkahnya :

1. Silahkan login dahulu ke Blogger dengan ID sobat tentunya.
   
   
2. Klik Tata Letak.
   
   
3. Klik tab Edit HTML.
   
   
4. Setelah itu cari kode yang seperti ini
   
   

   .post {

   
   
   
5. Kemudian tambahkan kode berikut ini tepat setelah kode tersebut
   
   

   Padding:15px; /* Jarak text post dengan garis pinggir */ Border-top: 2px solid #000000; /* warna garis pinggir atas */ Border-bottom: 2px solid #000000; /* warna garis pinggir bawah */ Border-left: 2px solid #000000; /* warna garis pinggir kiri */ Border-right: 2px solid #000000; /* warna garis pinggir kanan */ Margin-bottom: 30px; /* jarak antara post yang satu dengan yang lainnya */

   
   
   
6. Save Template.

Sekarang coba sobat lihat hasilnya, jika sobat benar meletakkan kode HTML nya Insya Allah pasti akan berhasil dan sama seperti punya saya. Tapi masih dalam bentuk kotak kaku alias lancip pada ujung - ujungnya. Nanti jika sempat akan saya tulis postingan tentang membuat garis melengkung pada sudut kolom.

Selamat mencoba !!

Kotak Sidebar Terpisah

type='html'>Sebenarnya saya sudah pernah membahas tentang Kotak Postingan Terpisah yang pada dasarnya agak - agak mirip dengan cara membuat sidebar terpisah - pisah ini. Tadi barusan juga ada pertanyaan dari sobat dalam kotak shoutmix dengan pertanyaan yang hampir sama, yaitu bagaimana cara membuat sidebar terpisah. Karena setiap template mempunyai karakter yang berbeda - beda, makanya saya tulis postingan ini untuk template yang umum digunakan atau template dasar.

1. Buka blogger dengan ID sobat.
   
   
2. Klik Tata Letak --> Edit HTML.
   
   
3. Contreng Expand Template Widget.
   
   
4. Lalu cari kode yang seperti ini :
   
   
   .sidebar .widget, .main .widget {
   margin:0 0 1.5em;
   padding:0 0 1.5em;
   }
   
   
   
5. Pisahkan saja sehingga menjadi seperti ini :
   
   
   .sidebar .widget {
   margin:0 0 1.5em;
   padding:0 0 1.5em;
   }
   
   
   
   
   .main .widget {
   margin:0 0 1.5em;
   padding:0 0 1.5em;
   }
   
   
   
6. Untuk sidebar terpisah sobat rubah menjadi seperti berikut :
   
   
   .sidebar .widget {
   background:#FFFFFF;
   border:1px solid #CCCCCC;
   margin:0 0 1.5em;
   padding:0.5em;
   }

Buat bagian main. widget atau kolom postingan tinggal sobat kreasikan sendiri, untuk background #FFFFFF adalah warna background putih dan border:1px solid #CCCCCC untuk border warna abu - abu. Kode warna bisa sobat lihat disini. Sedangkan untuk padding adalah jarak antara postingan dengan border, bisa juga sobat merubahnya menjadi padding:15px; agar lebih terlihat rapi antara postingan dengan border tidak terlalu rapat. Untuk kotak sidebar agar membentuk garis melengkung pada sudutnya sobat bisa tambahkan kode sehingga menjadi seperti berikut ini :

.sidebar .widget {
background:#FFFFFF;
border:1px solid #CCCCCC;
margin:0 0 1.5em;
padding:15px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
}

Sipp, buat sobat sebelum mengedit template nya sebaiknya cuci tangan dulu ya biar mousenya ga kotor.. Oke deh selamat mencoba !