Kamis, 07 November 2013

Browse Manual » Wiring » » » » » » Membuat tampilan halaman secara scrool

Membuat tampilan halaman secara scrool

Membuat tampilan halaman secara scroll memang banyak sekali manfaatnya,  bisa memperingkas tampilan 

. Untuk membuatnya seperti di bawah ini


<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">

Isi halaman yang akan ditampilkan secara scroll

</div>

Cara membuatnya
1. Login to Blogger 

2. Klik dasbord
3,Klik tambah gadget
4. Pilih html/JavaScript
5.Copy Paste kode di bawah ini

<span style="font-weight:bold;">TUTORIAL BLOG
<div style="overflow:auto; height:250px; width:310px;padding:10px;border:1px solid #eee"">
<ul><li><a href=http://blogspot.com/2010/12/belajar-membuat-blog.html>Belajar membuat blog</a></li>
<li><a href=http://blogspot.com/2010/12/cara-setting-blog-di-blogspot.html>Cara setting blog di blogspot</a></li>
<li><a href=http://blogspot.com/2010/12/membuat-kata-sambutan-atau-pembuka-blog.html>Cara Membuat kata sambutan diblog pembuka</a></li>
<li><a href=http://blogspot.com/2010/12/membuat-login-widget.html>Membuat login widget di blogt</a></li>
<li><a href=http://blogspot.com/2010/12/membuat-kata-penutup-blog.html>Membuat Kata 
Untuk mempersingkat bagian ini saya hapus
</ul></div></span>


TUTORIAL BLOG

  • Belajar membuat blog
  • Cara setting blog di blogspot
  • Cara Membuat kata sambutan diblog pembuka
  • Membuat login widget di blogt
  • Membuat Kata Penutup di Blogt
  • Cara membuat kotak dialog setelah blog
  • Cara memasang kirim email ke admin
  • Cara membuat kotak konfirmasi
  • Cara navigasi di atas blog
  • Cara membuat menu home
  • Cara membuat menu search
  • Cara membagi postingan menjadi 2 kolom
  • Cara membagi postingan menjadi 3 kolom
  • Cara membuat menu multi kolom pada blog
  • Cara membuat link klik di sini
  • Cara membuat link berubah warna dan membesar
  • Cara membuat link menjadi kerlap kerlip
  • Cara mengganti template klasic ke template baru
  • Mengganti template baru ke template klasic
  • Cara membuat red more pada template baru part1
  • Cara membuat readmore template baru part2
  • Cara memberi bacground warna pada postingan
  • Cara memberi bacground pada postingan
  • Cara blog tidak bisa di copy paste
  • Cara mengetahui jumlah pengunjung di blog
  • Cara menghilangkan navbar
  • Cara membuat hidden show
  • Cara menghilangkan judul blog pada header
  • Cara membuat blog di dalam blog
  • Cara membuat lagu di blog
  • Cara mengetahui harga blog
  • cara membuat kolom teks area untuk kode
  • Cara menghilangkan tulisan home beranda
  • Cara menghilangkan tulisan posting-lama
  • Cara menghilangkan tulisan langgan-entri
  • Cara menghilangkan gambar kunci dan obeng
  • Cara menghilangkan gambar kunci dan obeng pada blog baru
  • Cara menghilangkan nafbar pada template
  • Cara mengganti nama alamat blog
  • Blog masuk sandbox
  • Promosikan blogmu gratis di blogupp
  • Cara pasang rank widget
  • Cara-memsang-widget-traffick-live
  • Cara membuat banner gratis
  • Cara memperkecil ukuran gambar iklan admob
  • Cara membuat iklan melayang
  • Cara membuat banner foto gratis
  • Cara membuat slide iklan
  • Membuat tab browser bergerak
  • Membuat efek berjatuhan di blog
  • Tulisan berubah bentuk
  • Efek bunga sakura di blog
  • Efek pelangi di blog
  • Efek hujan salju di blog
  • Efek kupu-kupu di blog
  • Efek daun kering berguguran di blog
  • Efek kembang api di blog
  • Cara membuat teks berjalan
  • Cara membuat tampilan-halaman secara scrool
  • Cara membuat link di sorot ada tulisannya
  • Cara membuat blog iklan gratis

Keterangan :
1  overflow:auto; » kode ini agar tercipta scrolling
2  width:300px; » adalah lebar bidang yang di inginkan,  nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
3  height:200px; » adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan
4  padding:10px; » adalah kode pembuat jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman
5  border:1px solid #eee » agar bidang tersebut terlihat ada kotaknya,


Tidak ada komentar:

Posting Komentar