28 April 2013

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

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

Posted at 17.24 | in tips dan triks 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

Anda menyukai postingan di atas? Silahkan di share..!

Post Author

Jalupangna

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.