Membuat tampilan halaman secara scroll memang banyak sekali manfaatnya, selain mudah dalam membuatnya juga bisa memperingkas tampilan karena mempunyai fungsi scoll yang sudah pernah saya tulis sebelumnya. Untuk membuatnya tidak diperlukan kode HTML yang rumit, anda hanya menambahkan kode di bawah ini pada halaman yang akan dibuat tampilan secara scroll :
<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
Isi halaman yang akan ditampilkan secara scroll disini
</div>
Untuk membuatnya silahkan anda ikuti langkah2 dibawah ini :
1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah anda).
3.Copy Paste Script yang ada di bawah ini tinggal edit sesuaikan dengan kebutuhan sobat saja :
4. Klik Simpan dan selesai. Hasilnya akan tampak seperti di bawah ini :
- Cara Back Up dan Upload File Java Script ke Free Hosting
- Cara Membuat Animasi Status Loading
- Cara Membuat Buku Tamu dengan Shoutmix.com
- Cara Membuat dan Memahami Isi Blog di Blogspot
- Cara Membuat Icon Address bar ( Favicon ) di Blog
- Cara Membuat Kata Penutup di Blog Ketika Menutup Blog
- Cara Menampilkan Elemen Halaman Hanya Pada Halaman Depan
- Cara Menampilkan Elemen Halaman Hanya Pada Halaman Selanjutnya
- Cara Menulis Kode HTML di Postingan
- Cara Mudah Membuat Tampilan Read More pada Postingan
- Cara Setting Blog di Blogspot
- Memasang Toolbox Bookmark & Share di Bawah Postingan
- Memasang Widget Alexa Rank di Blog
- Memberikan Efek yang Menonjol pada Postingan
- Membuat Banner Animasi Melalui Situs Gratisan
- Membuat Blogger Login Widget
- Membuat Efek Animasi Roaming Saat Blog di Buka
- Membuat Efek Tulisan Berkedip ( Blink )
- Membuat Efek Zoom Pada Image / Gambar
- Membuat Footer Blog 3 Kolom
- Membuat Huruf Besar pada Awal Postingan
- Membuat Image Gambar Terlihat Blur ( Tersamar ) Ketika Disorot Mouse
- Membuat Image Logo Button
- Membuat Kata Sambutan Untuk Pengunjung Blog
- Membuat Kolom Teks Area untuk Kode / Tulisan
- Membuat Label Berjalan ( Marquee ) di Atas Footer
- Membuat Link Berubah Warna dan Membesar Ketika Disorot
- Membuat Link Warna ( Rainbow Link )
- Membuat Menu Auto Hide ( Spoiler )
- Membuat Overline Pada Link / Garis Atas Pada Saat Link Disorot ( Mouse Over )
- Membuat Random Posts dengan Tampilan Slide
- Membuat Random Posts di Bawah Postingan Dengan Tampilan Gambar
- Membuat Read More Terbaru
- Membuat Recent Post Dengan Thumbnails dan Comment Count
- Membuat Related Posts atau Artikel Terkait
- Membuat Sidebar Blog Menjadi 2 Kolom
- Membuat Slide Menu di Blog
- Membuat Slide Show Tab View
- Membuat Snapshoot Link di Web/Blog
- Membuat Tabview Widget
- Membuat Tombol View Pop Up
- Membuat Widget Artikel Terbaru ( Recent Post )
- Membuat Widget Artikel Terpopuler ( Top Post )
- Membuat Widget Komentar Paling Banyak ( Top Comments )
- Membuat Widget Komentar Terbaru ( Recent Comments )
- Membuat Widget Pop Up Windows di Blog
- Membuat Widget Tampak Menghilang dan Muncul Kembali
- Membuat Widget Tampil Dengan Scroll
- Menambah Emotion Pada Buku Tamu Shoutmix.com
- Menampilkan Beberapa Model Status Online Yahoo Messenger
- Menampilkan Posting secara Acak ( Random Post Widget )
- Mencegah Copy Paste Dengan Menggunakan Copyscape
- Mengubah Setting Blog Nofollow menjadi Dofollow
- Menyembunyikan Judul dan Diskripsi pada Blog
- Merubah dan Memodifikasi Tampilan Blockquote
- Modifikasi Tampilan Label Cloud Blogger
- Modifikasi Tampilan Widget MyBlogLog Recent Readers
- Pasang Translate di Blog
- Pengertian dari Nofollow menjadi Dofollow
- Pengertian Padding, Margin dan Border pada CSS
- Setting Navbar Blogspot
- Tips Membuka 2 Target Link Dalam 1 Link
- Tool Buat Cek Posisi Web / Blog di GOOGLE
- Tool Untuk Mengecek Backlink Blog/Web Anda
- Tool Untuk mengecek Kecepatan Loading Blog/Web Anda
- Tool Untuk Mengecek PageRank Blog/Web Anda
Keterangan :
+ overflow:auto; » kode ini agar tercipta scrolling atau penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
+ width:300px; » adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 300 pixel, 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%).
+ height:200px; » adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 250px atau nilai yang lainnya.
+ padding:10px; » adalah kode pembuat jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px;
+ border:1px solid #eee » agar bidang tersebut terlihat ada kotaknya, jika anda tidak menginginkan ada terlihat kotaknya, maka tinggal di hapus saja.
Mudah bukan, selamat mencobanya ...
0 komentar:
Posting Komentar
Jangan lupa komentarnya sobat