Efek Blur Pada halaman Bawah Blog

Cara Membuat efek blur pada halaman bawah blog dengan CSS gradient - Gaya ini bersifat statis (fixed) ketika scroll menggulung layar halaman blog akan terlihat samar tertutup blur gradient ini, efek ini terlihat manis walupun unsur utama hanya mengandalkan properti background berupa css gradient, untuk ketinggian blur ini bisa diatur pada properti height untuk mengkostumisai efek blur ini.

Pada css dibawah ini properti height menggunakan unit (%) untuk mempermudah penyesuaian terhadap ukuran layar yang berbeda, walaupun pada dasarnya bisa diukur dengan jenis unit lainnya seperti pt, px, em dll, kalian bisa merubah jenis unit ini sesuai dengan ukuran yang pas.

Penggunaan warna dasar pada css gradient menggunakan warna dasar hitam, walaupun begitu saya rasa cocok dipergunakan untuk template dengan background-background berwarna cerah, karena pada kode warna gradient menggunakan RGBA yang sudah mengandung opacity sebesar (0.65).

Letakan css dibawah ini dibawah <b:skin><![CDATA[ atau diatas ]]></b:skin> pada template.

CSS

body:before {
  height: 20%;
  width:100%;
  content: '';
  z-index: 9;
  bottom: 0;
  position: fixed;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
}

Save template.

Sederhana namun memberikan efek tampilan yang cukup menarik.