Cara Memisahkan Postingan Di Blogspot

Bagaimana cara memisahkan postingan Blogger agar lebih kelihatan cantik dan mempesona?

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. ayo dilihat yang teliti.

1.Masuk ke blogger anda -> dan ke Template dan Edit HTML

2.Cari .posts (  atau .posts{ di ctrl+f aja biar cepet nyarinnya

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
  
  Post By: Juanda
  Sumber: jalu-pangna

Share on Facebook Share on Twitter Share on Google Plus

About Juanda

Seorang blogger muda yang gemar bermain game dan juga ngeblog sembari menghasilkan uang.