Bagaimana cara menampilkan setiap postingan dalam kotak terpisah cantik dan keren di blog

Salah satu bagian utama desain  web adalah membuat desain sejelas mungkin dalam hal pemanfa'atan. Sebagai contoh, pembaca harus dapat dengan mudah mengidentifikasi bahwa ini adalah sidebar dan ini adalah kolom utama di mana semua posting ditampilkan.

Umumnya semua postingan Blog berada dalam kotak besar tunggal dengan hanya Border di bagian bawah setiap postingan di homepage. Border yang digunakan untuk membuat pembaca mengetahui bahwa posting berikutnya adalah posting terpisah. 

Hal itu sebenarnya sangat normal dan mendasar untuk memisahkan tulisan. Postingan Hari ini kita akan membuat tulisan lebih jelas bagi pembaca dengan menampilkan masing-masing dalam style kotak terpisah. Hal yang paling utama adalah Anda akan belajar bagaimana melakukannya sehingga dapat lebih menyesuaikan.  

Sebagian besar dari sobat blogger/para master mungkin tahu bagaimana melakukan hal ini, tetapi mungkin ada beberapa pemula menunggu untuk mempelajari beberapa trik dasar. Silahkan lihat demo...

View Demo

(LIHAT GAMBAR DIATAS)

LANGKAH-LANGKAHNYA SEBAGAI BERIKUT :

• Masuk ke akun blogger anda -> Klik Drop down menu 
• Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML

 

• Cari tag / kode .post { atau .post{ Gunakan CTRL+F untuk memudahkan pencarian

Ini adalah kode selektor CSS yang biasanya digunakan di sebagian besar template blogger. Jika anda tidak menemukan kode dibawah cari kode yang mirip seperti kode ini, karena struktur template masing-masing sedikit berbeda. Silahkan lihat screenshoot kode berikut:

Silahkan ganti kode tersebut dengan kode berikut dibawah ini:

    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;

Kode anda akan terlihat seperti kode pada screenshoot berikut:

Simpan template dan silahkan di cek blog anda..

STYLE BLOK HOVER PADA POSTINGAN BLOG 

Silahkan tambahkan kode blok efek hover berikut ini: 

.post:hover {
    -webkit-border-radius: 20px 0 20px 0;
    border-radius: 20px 0 20px 0;
    background: #fff;
}

Sehingga akhir kode yang anda tambahkan seperti screen shoot berikut:

Ada beberapa tag/kode dasar yang bisa anda rubah pada kode yang sudah ada. Bahkan anda dapat menambahkannya sendiri style (gaya) terpisah sesuai dengan kreasi anda masing-masing.

• Aturlah nilai margin 10px 10px 40px 7px jika postingan yang anda buat tidak selaras
•  Kode #CCCCCC untuk mengubah warna border
•  Kode #FEFFE6 untuk mengubah background kotak postingan
•  Kode #fff untuk mengubah background warna hover

Semoga bermanfa'at and keep blogging...

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 17.24