Cara Menampilkan Setiap Postingan Dalam Kotak Terpisah di Halaman Utama Blogspot

Halo Temans KangBisson yang berbahagia, semoga sehat-sehat selalu iya... Pemisahan postingan artikel antara postingan yang satu dengan postingan lainnya memang harus kita lakukan agar pengunjung blog bisa dengan mudah memilih postingan mana yang akan dilihat/ dibaca terlebih dahulu

Pada masing-masing template yang ada di blogspot sudah dirancang sedemikian rupa, template-template tersebut bisa kita pilih sesuai dengan keinginan kita. Pada setiap template sudah barang tentu memiliki tampilan default yang berbeda beda, hal itu ditujukan agar kita bisa memilih template yang cocok untuk kita gunakan, salahsatunya adalah tampilan halaman utama blog itu sendiri

Jika Anda memilih thema/ template sederhana, tanda pembatas default pada setiap postingannya adalah sebuah garis dibagian bawah akhir postingan, tampilan seperti ini memang agak terasa kurang greget namun tentu saja kita bisa mengubahnya agar terlihat lebih menarik

Nah, sekarang mari kita coba untuk memisahkan setiap postingan yang ada di halaman utama (Beranda) blog kita dengan memberikan sebuah kotak atau dengan kata lain kita akan menjadikan setiap postingan kita berada di dalam kotak-kotak terpisah agar lebih terlihat rapih dan memudahkan pengunjung untuk memilih postingan yang akan mereka lihat / baca terlebih dulu

Sebelum kita menggunakan kotak untuk memisahkan masing-masing artikel postingan, sebaiknya anda sudah memasang fitur Auto Read More agar  dihalaman utama blog kita itu hanya ditampilkan beberapa potongan kalimat saja dan tidak terlalu panjang (lihat gambar diatas). Untuk membuat fitur Auto Read More, silahkan sobat kunjungi dulu artikel sebelumnya di link berikut: Cara Membuat Auto Read More di Blogspot

Berikut langkah-langkah Cara Menampilkan Setiap Postingan Dalam Kotak Terpisah di Halaman Utama Blogspot

1. Masuk ke akun blogspot sobat klik Theme/ Template >> Edit HTML

2. Copy kode dibawah, kemudian tempatkan diatas kode ]]></b:skin>

.post-outer {

margin: 10px 0px 40px ;

padding: 15px;

border: 1px solid #CCCCCC;

border-radius: 0 20px 0 20px;

background: #FFFFFF;

box-shadow: 1px 1px 3px 3px rgba(204, 204, 204, 0.5);

transition: all 0.5s ease-in-out;

-webkit-border-radius: 0 20px 0 20px;

-webkit-box-shadow: 1px 1px 3px 3px rgba(204, 204, 204, 0.5);

-webkit-transition: all 0.5s ease-in-out;     

-moz-transition: all 0.5s ease-in-out;     

-ms-transition: all 0.5s ease-in-out;     

-o-transition: all 0.5s ease-in-out;

}

3. Selesai !!! Mudah bukan ???

Silahkan lihat hasilnya

Catatan : Tutorial diatas adalah hasil edit dari sumber yang saya baca, namun dari tutorial yang saya baca tersebut itu tidak berhasil dipasang di blog saya, mungkin dikarenakan beda template yang dipakai, alhasil ... kode diatas lah yang berhasil saya terapkan


Jika cara diatas tidak cocok dengan blog Anda, silahkan coba cara lain atau coba memakai cara dari sumber yang saya baca seperti dibawah :

Silahkan ganti kode diatas dengan kode berikut :

.post {

margin: 10px 10px 40px 7px;   

padding: 15px;   

border: 1px solid #CCCCCC;   

-webkit-border-radius: 0 20px 0 20px;   

border-radius: 0 20px 0 20px;   

background: #FEFFE6;   

-webkit-box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);   

box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);   

-webkit-transition: all 0.5s ease-in-out;   

-moz-transition: all 0.5s ease-in-out;   

-ms-transition: all 0.5s ease-in-out;   

-o-transition: all 0.5s ease-in-out;   

transition: all 0.5s ease-in-out;

}

Selesai, simpan template dan coba cek hasilnya



Untuk membuat efek hover, silahkan tambahkan kode dibawah

.post:hover {   

-webkit-border-radius: 20px 0 20px 0;   

border-radius: 20px 0 20px 0;   

background: #fff;

}

Sehingga akhir kode yang anda tambahkan menjedi seperti screenshot berikut

Simpan template, dan silahkan cek blog anda

Demikianlah tutorial blogging blogspot kali ini tentang Cara Menampilkan Setiap Postingan Dalam Kotak Terpisah di Halaman Utama Blogspot, semoga bermanfaat


Happy Blogging

Referensi: sanygames-online.blogspot.com