» » » Membuat Widget Efek Hitam Putih (XHTML)

Membuat Widget Efek Hitam Putih (XHTML)

18.30
0 komentar

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 
<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.
Share:

Posting Komentar

Catatan: (memasukan item pada komentar)
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

Link aktif akan dimatikan secara otomatis.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.
Back to Top