cara memisahkan postingan blog dengan kotak keren

ingin sobat pisahkan postingan dengan kotak keren seperti dibawah ini...

lalu gimana caranya ...

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..
  
  
  untuk lebih cantik penampilanya tambahkan juga effect style hover
  
  
  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...