.jpg)
Untuk menciptaan effect blur secara lebih luas dilakukan dengan melakukan perubahan tinggi background image di ke dua ujung scroller.
Langkah untuk membuat Scrolling with Fade Out Effect :
1. Amankan Template terlebih dahulu! Silahkan caranya lihat di sini.
2. Tetap di Edit HTML kemudian cari KODE ]]></b:skin>.
3. Copy paste KODE CSS di bawah ini dan letakkan persis di atasnya.
KODE CSS Scrolling with Fade Out Effect :
.ScFadeout {
width:300px;
position:relative;
margin:25px auto 100px auto;
ext-align:left;
border-right:20px solid #333;
background: #999999 url(http://i45.tinypic.com/20p44h.gif);
border-top:1px solid #33CCFF;
border-left: 1px solid #33CCFF;
border-bottom: 1px solid #33CCFF;
}
.artikel {
text-align:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #0033FF;
padding:0 10px 50px 10px;
background:url(http://i45.tinypic.com/20p44h.gif);
width:300px;
height:250px;
overflow: auto;
}
.topeffect {
position: absolute;
height: 40px;
width:100%;
top:0; left:0;
background:url(http://i46.tinypic.com/j7gfm9.png);
}
.bottomeffect {
position: absolute;
height: 40px;
width:100%;
bottom:0; left:0;
background:url(http://i50.tinypic.com/2iafvxd.png);
}
.artikel h1 {margin:20px 10px 10px; color:#FF0000;}4. KLIK Simpan Template.
5. Gunakan KODE HTML berikut di bagian body di antara tag <body> dan tag </body> atau pada saat posting.
xHTML dan Scrolling with Fade Out Effect :
<div class="ScFadeout">
<div class="topeffect"></div>
<div class="bottomeffect"></div>
<div class="artikel">
<h1>Judul Artikel</h1>
<h3>Teks tambahan !</h3>
Tuliskan Teks di sini !
Tuliskan Teks di sini !
Tuliskan Teks di sini !
Tuliskan Teks di sini !
<img class="art" src="Image.jpg" width="260" style="border:10px solid #666666;"/>
</div>
</div>
Catatan :
1. Atur tinggi Scrolling with Fade Out Effect dengan merubah nilai height pada KODE CSS di syntax :
.artikel {
.
.
height:250px;
}
2. Untuk memperluas ruang effect blur di kedua ujung atas dan bawah scroller, harus dilakukan perubahan ukuran gambar (image) background topeffect dan bottom effect. Tentunya ini harus dilakukan dengan melakukan edit ulang pada background gambarnya untuk selanjutnya di upload di image hosting.
3. Setelah background mage diupload, rubah ukuran tinggi (height:40px) pada KODE CSS di bottomeffect dan top effect sesuai tinggi gambar yang baru.
4. Selamat berkarya dan SUXES untuk anda !!
makasih bang ane dah bisa, heheheee dan sedikit modif ini script ok punya...mahesa (makin hebat saja). ijin untuk menampilkan di posting ane makasih
BalasHapusmakasih sebelumnya bang...,mo minta ijin untuk copy paste...
BalasHapusmuantap blognya...
g mna mas koq gag jdi yg animasi kursor
BalasHapus