Cumulus swf - flash

Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Scrolling with Fade Out Effect

Scrolling with Fade Out Effect menciptakan effect blur pada sisi atas dan sisi bawah scroller ketika dilakukan penggeseran. Effrect ini tercipta karena penggunaan background image transparan di kedua ujung scroller dengan background berbentuk file png.

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 !!

3 komentar:

  1. makasih bang ane dah bisa, heheheee dan sedikit modif ini script ok punya...mahesa (makin hebat saja). ijin untuk menampilkan di posting ane makasih

    BalasHapus
  2. makasih sebelumnya bang...,mo minta ijin untuk copy paste...
    muantap blognya...

    BalasHapus
  3. g mna mas koq gag jdi yg animasi kursor

    BalasHapus

 
GR | Edited by | gubhug reyot