Scrolling Fade Out Effect

berita dari kawan-kawan kemarin membicarakan bagaimana membuat scroll yang berbeda dari biasanya. Mungkin ini suatu hal yang biasa, namun kreasi itu perlu dianggap suatu hal yang penting. Artinya ketika anda berkreasi dengan kode CSS, HTML, dan xHTML merupakan suatu yang memeberikan kepuasan tersendiri. Itulah yang namanya belajar, gak bakalan putus sampai hari ini saja, ia akan berlajut sampai kita mati. Iya gak Gan? Lihat dulu demonya di bdawah ini....

Ok...langsung saja kita bahas tentang Scroll Fade Out Effect. Sebelumnya ane mengucapkan terima kasih pada Gubhug Reyot yang telah memberikan banyak pada ane, termasuk pada posting tentang scroll fade out effect. Semoga ilmu yang diberikan diganjar kebaikan dunia akhirat...amin.

Fade Out Effect kurang lebih sama dengan scroll biasa, bedanya hanya pada warna background dan effect yang diberikan. Fungsi scroll ini untuk menampilkan posting tersendiri dalam kotak posting anda, jadi menurut ane gak mengganggu kotak posting anda. Fade Outnya bisa anda lihat bagian atas dan bawah kotak ketika scoll anda gerakkan, maka seluruh isi artikel yang bergeser ke atas dan ke bawah terlihat blur dan menghilang. Scroll ini bila ingin ditampilkan kapan-kapan bisa anda panggil dengan menggunakan kode xHTML-nya, dan dengan ini akan memberi kemudahan kepada anda dalam menampilkan posting lebih gaya dan atraktif. Anda tertarik...silahkan ikuti langkahnya di bawah ini.

Log ini dulu ke blog sobat

Klik Rancangan lalu cari kode ]]></b:skin>

Copy kode berikut di atasnya

.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;}

Langkah selanjutnya ketika anda memposting klik Edit HTML bagian kanan atas (sebelah kiri Compose), lalu masukkan kode berikut di dalamnya.

<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 !
<center><img class="art" src="Image.jpg" width="260" style="border:10px solid #666666;"/></center>
</div>
</div>

kode <center> dan kode penutup </center> hanya tambahan bila anda ingin menempatkan foto di bagian tengah, kalau ingin di pinggir maka hapus saja kodenya.

Keterangan:

.ScFadeout {
width:550px;  /* ini besar kolom tampilan, kalau ingin memperbesar atau memperkecil, maka bila dirubah  kode width pada .artikel {  harus disamakan */
position:relative;
margin:25px auto 100px auto;
ext-align:left;
border-right:20px solid #33CCFF; /* warna border kanan/ alas scroll */
background: #999999 url(http://i45.tinypic.com/20p44h.gif); /* warna background */
border-top:1px solid #33CCFF; /* warna border atas */
border-left: 1px solid #33CCFF;  /* warna border kiri */
border-bottom: 1px solid #33CCFF;  /* warna border bawah */
}
.artikel {
text-align:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color: #0033FF; /* warna font berita/ artikel */
padding:0 10px 50px 10px;
background:url(http://i45.tinypic.com/20p44h.gif);

width:550px; /* besar kisaran berita/ artikel "samakan dengan width pada .ScFadeout {  */

height:250px; 
overflow: auto; /* tinggi artikel, bila anda meninggikan maka secara otomatis tinggi kolom juga akan berubah menyesuaikan...mantab khan heheheee:) */
}

_____Bagian bawah gak usah di rubah gan...biar gak bingung_____

.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;}

OK gan selamat mencoba dan sukses selalu. Pesan ane jangan pernah berhenti belajar dan berkreasi, karena dari situ kita mewarnai dan memaknai kehidupan ini....yyyuuhhhhuuuu...

Sumber: Gubhug Reyot

keep spirits and do the best