Membuat Widget Efek Hitam Putih

Widget Dengan Efek Hitam Putih - Saya akan membagikan trik bagaimana cara membuat sebuah widget dengan efek hitam putih, dan ketika mouse di arahkan ke area widget tersebut maka akan menampilkan warna aslinya. Untuk contoh bisa diliat widget Recent Post Blog ini.

1. Masuk ke Template  »  Edit HTML

Untuk Pemasangan Letakan kode tersebut diatas kode ]]</b:skin>

#HTML1:before,#HTML1:after{background:#f7f7f7;border:0px solid #aaa;border-top:none;bottom:-3px;content:"";height:0px;left:0px;position:absolute;right:0px}
#HTML1:after{bottom:-5px;box-shadow:0 0 0px #aaa;left:4px;right:4px}
#HTML1{filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter: gray;-webkit-filter: grayscale(1);}
#HTML1:hover {filter: none;-webkit-filter: grayscale(0);}

2. Simpan Template

Agar Efek bisa terlihat  ganti kode HTML1 dengan ID Widget anda!
Contoh melihat ID widget:
Anda tidak perlu mencentang Expand Template agar lebih mudah mencarinya

<b:widget id='HTML1' locked='false' title='Terbaru' type='HTML'/>
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>

Kode yang berwarna Hijau tersebut merupakan ID Widget. Silahkan anda tentukan sendiri.
Selamat Mencoba dan Semoga Bermanfaat.

Judul: Membuat Widget Efek Hitam Putih; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts