Cara memasang fungsi scroll pada blogspot

Menggunakan fungsi scroll sebenarnya sudah dibahas pada posting sebelumnya yaitu pada posting cara Membuat posting dengan variasi background, tapi tidak ada salahnya kita bahas kembali karena fungsi scroll ini sangat fleksible bisa kita pasang dimanapun baik di posting, pada widgets , berdiri sendiri maupun di gabung dengan fungsi lain.

Dibawah ini adalah kode script untuk fungsi scroll dan contoh pengunaan, copypaste kode dibawah ini, bisa dipasang pada widget maupun sebagai varisasi pada posting.


<div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; background: black url(http://lh4.ggpht.com/_wC8_9aR_6uE/SpqssB0hGEI/AAAAAAAABOI/7DSe25HalOg/Superb%20Fairy-wren3.jpg) no-repeat scroll 0 0 ; background-position: center ;border: 1px solid red; height: 400px; margin: 10px 0px; overflow: auto; padding: 10px; text-align: center; width: auto;">



ISI POSTING ( KODE HTML / NON HTML ), Bisa dipasang berbagai kode script : komentar, posting, guestbook, daftar link, dll




</div>


Cara membuat tampilan diatas sebenarnya cukup mudah dan sederhana, silakan copy paste pasang pada posting atau widgets yang kamu inginkan.

Keterangan :
  • -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px,  Fungsi border lengkung pada ujung kotak, ganti kode 0px sesuai kebutuhan makin besar angka kelengkungan makin besar ( secara berurutan ujung kiri bawah, kanan bawah, kiri atas dan kanan atas )
  • background black url(http://lh4.ggpht.com/_wC8_9aR_6uE/SpqssB0hGEI/AAAAAAAABOI/7DSe25HalOg/Superb%20Fairy-wren3.jpg) no-repeat scroll 0 0 , kode untuk warna background ( ganti kode black dengan kode warna sesuai kebutuhan, untuk menghilangkan warna ganti dengan kode transparent ), kode url(http://alamat image.com) isi dengan alamat image yang dibutuhkan, kode no-repeat ( image tidak berulang , ganti dengan repeat = berulang, repeat-x = berulang arah horizontal, repeat-y = berulang arah vertikal )
  • background-position: center , lokasi image ( left - center - right ) silakan diganti sesuai kebutuhan.
  • border: 1px solid red , border tepi 1px = besar garis, makin besar angka makin tebal garis, solid = jenis garis = garis lurus, dot = garis putus putus, red = kode warna ganti sesuai kebutuhan
  • height: 400px , tinggi kotak scroll yang diinginkan ( ganti sesuai kebutuhan )
  • text-align: center , posisi teks dalam kotak scroll ( left - center - right ) silakan diganti sesuai kebutuhan.
  • width: auto  , lebar kotak scroll yang dibutuhkan, auto = otomatis mengikuti lebar widgets, silakan diganti kode auto bila ingin mengatur secara manual dengan 200px = angka 200 disesuaikan dengan lebar widget secara manual sesuai kebutuhan.
  • Lakukan pratinjau.
  • simpan dan publish.

Tips :
Semoga bermanfaat...
Selamat mencoba...!!!

Sukses selalu buat kamu semua...!!
Labels: