Scroll box with transparency effect

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, silahkan lihat di bawah ini!

D E M O

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

Kode CSS :

.GRboksposting{
        width:410px; /* lebar boks luar dg background image*/
        height:400px; /* tinggi boks luar */
        padding:0; /* padding boks luar */
        border-radius:5px; /* sudut lengkung rounded corners/border-radius */
        border:2px solid #888; /* border */
        margin:20px 0; /* margin atas-bawah=20px, kanan-kiri=0 */
        background:url(https://lh4.googleusercontent.com/-KwLIFcTlcVg/T2kBa2f7XhI/AAAAAAAAAdo/pGlGx3KDWiI/h300/GRcantik-bgTransparentBox.jpg) top center no-repeat; /* gunakan background image sesuai dengan ukuran boks luar */
        background-size:410px auto; /* setting lebar background agar sama dengan lebar boks luar */
}
.GRtransparentbox{ 
        max-height:355px; /* ukuran tinggi bisa disesuaikan dengan height pada .GRboksposting */ 
        margin:5px; /* jarak antara boks dalam dan boks luar */
        background:rgba(0,0,0,0.7); /* background rgba untuk transparency effect */
        border:2px solid #333; /* tebal, jenis dan warna border*/
        overflow:scroll; /* IE */
        overflow:auto;
        font-size:11px; /* ukuran font */
        color:#eee; /* warna font */
        font-family:Verdana; /* jenis font */
        font-weight:500; /* atau bisa juga bold atau bolder */
        padding:15px 10px; /* atas/bawah=15px, kanan/kiri=10px */
}

xHTML :

<>
<>
Tuliskan teks/konten di sini!
</div>
</div>

Cara membuat scroll box dg transparency effect :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup Template sebagai langkah preventif sebelum melakukan berbagai perubahan kode html melali penambahan ataupun pengurangan kode css, javascript dan xHTML.
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
7. Klik "Simpan Template (Save Template)".
8. Gunakan xHTML saat posting. Anda juga bisa gunakan melalui "Add a Gadget (Tambah Gadget)".

Catatan/Keterangan :

1. Gunakan background-image selebar boks luar (.GRboksposting).
2. background-size:410px auto; » 410px = width boks luar
3. Panduan backup template, cara mencari kode dan berbagai cara menyimpan kode di template dapat dibuka di Special Tutorials pada menu sebelah kiri.
4. Untuk merubah background image, ganti :
   https://lh4.googleusercontent.com/-KwLIFcTlcVg/T2kBa2f7XhI/AAAAAAAAAdo/pGlGx3KDWiI/h300/GRcantik-bgTransparentBox.jpg
5. Sesuaikan boks luar dengan lebar halaman posting.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Rebo   WAGE,Maret,20,2012

» Happy Blogging - gubhugreyot «