Thursday 5 August 2010

Scroll box Dengan transparency effects

Scroll box dengan berbagai effect sebenarnya hanyalah sebuah gaya yang diciptakan untuk mempercantik blog yang diharapkan mampu menambah daya tarik sehingga orang ataupun pembaca blog akan merasa terkesan dan mungkin akan menumbuhkan sebuah rasa penasaran serta keinginan untuk mengetahui lebih dekat lagi blog yang saat itu sempat jadi persinggahannya ketika menelusuri padang belantara internet. Tidak akan merugikan blogger karena KODE yang dipergunakan tidaklah terlalu banyak sehingga loading blog relatif tidak terpengaruh. Bila kamu sudah membuat scroll box seperti posting sebelum ini, maka tinggal menambahkan beberapa KODE CSS untuk mendapatkan sebuah scroll box dengan efek transparansi. Kalau kamu penasaran bagaimana bentuk jadinya, maka kamu bisa telusuri beberapa posting sebelumnya yang aku postingkan dengan menggunakan teknik ini. Pada intinya, scroll box ini akan terlihat agak transparan dan baru kemudian akan menjadi tampak tajam (obyek dalam scroll box tampak jelas) ketika cursor mulai menyentuhnya.

Cara membuat Scroll box with transparency effects

Letakkan dan simpan KODE CSS berikut di antara tag <head> dan tag </head>

.postingbox { height: 200px; /* ukuran tinggi bisa disesuaikan */ width: 500px; /* sesuaikan lebar dg kebutuhan atau pakailah auto */ background: #66CCFF url();/* gunakan warna yg sesuai blog atau apabila ingin menggunakan background image */ border: 2px solid #333; /*tebal, jenis dan warna */ overflow: scroll; font-size: 12px; /* ukuran font */ font-family: Verdana; /*atau jenis font lain */ font-weight: 700; /* atau bisa juga bold atau bolder */ padding: 20px 6px; /* atas/bawah=20px, kanan/kiri=6px */ opacity:0.4; /* nilai 0 s/d 1.0 , semakin kecil semakin transparan */ -moz-opacity:0.4; filter:alpha(opacity=40); /* nilai 0 s/d 100 */ } .postingbox:hover { /* untuk menciptakan efek hover pada box */ opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity:100); }

Gunakan KODE berikut saat melakukan posting
<div class="postingbox">Letakkan Teks/KODE HTML atau materi posting yang lain di sini<p><img src="image.jpg" /> </p<>/div>
Catatan :
- KODE di atas digunakan apabila posting berupa teks dan gambar. Untuk posting yang hanya berupa teks atau gambar silahkan disesuaikan

Scroll box Dengan transparency effects 9 out of 10 based on 10 ratings. 9 user reviews.

♣||Click To POST_SHOW HIDE_Comments||♣

cElOTEh sObAT BLOGGER :

Ada 0 komentar ke “Scroll box Dengan transparency effects”

:cendolbig :batabig :najis :marah :repost :2thumbup :matabelo :request :babyboy1 :sorry :travel :kimpoi :ultah :rate5 :bola :kbgt :iloveindonesia :nosara :berduka :hoax :dp :cekpm :thumbup :kr :nohope :ngacir :salahkamar :cool :mewek :babyboy :babygirl :95