Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Elemen Halaman Mempunyai Fungsi Scroll

Menanggapi salah satu pertanyaan dari pembaca blog ini tentang “bagaimana cara membuat elemen halaman yang mempunyai fungsi scroll seperti milik kang Rohman tentang Blog Tutorial untuk pemula yang ada di bagian bawah blog ini?” Jawabannya boleh di bilang sederhana, sebab untuk membuat halaman seperti itu tidaklah harus membuat kode html yang sangat banyak, melainkan hanya sedikit kode untuk membuatnya. Penasaran seperti apa kodenya, ini dia yang di maksud.

Untuk membuat halaman seperti itu, anda hanya membuat kode seperti ini :

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

isi halaman
</div>
 
 

Contoh :

 

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
<a href="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html"> Panduan membuat blog</a>
<br />
<a href="http://kolom-tutorial.blogspot.com/2007/04/cara-setting-blog.html">Cara setting blog</a>
<br /> 
<a href="http://kolom-tutorial.blogspot.com/2007/04/memilih-template.html">Memilih template</a> 
 <br /> 
<a href="http://kolom-tutorial.blogspot.com/2007/04/mengatur-hurup-dan-warna.html">Mengatur huruf dan warna</a> 
<br /> 
<a href="http://kolom-tutorial.blogspot.com/2007/04/cara-memposting-artikel.html">Cara memposting artikel</a> 
<br /> 
<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-read-more-1.html">buat Read more pada template klasik</a> 
<br /> 
<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-text-area.html">Cara membuat Text Area</a> 
 <br /> 
<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-menu-dropdown.html">Cara membuat menu dropDown</a> 
<br /> 
<a href="http://kolom-tutorial.blogspot.com/2007/04/upload-gambar-dan-foto-profile.html">cara Upload foto</a>

<br /> 

<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-1.html">Cara membuat Link(1)</a>

<br />

<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-2.html">Cara membuat Link(2)</a>

<br />

<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-marquee.html">Cara membuat marquee (text berjalan)</a>

<br />

<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-refresh.html">Cara membuat efek Refresh</a>

<br />

<a href="http://kolom-tutorial.blogspot.com/2007/04/kode-html-tampil-di-posting.html">Kode HTML tampil pada postingan</a>

<br />

<a href="http://kolom-tutorial.blogspot.com/2007/05/masalah-posting-artikel.html">Masalah posting artikel</a>

<br />

<a href="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html">Simbol Yahoo! Emoticons</a>

<br />

<a href="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html">Simbol Blogger Emoticons</a>

<br />

<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-jam-blog-di-sidebar.html">Cara Pasang jam </a>

<br />

<a href="http://kolom-tutorial.blogspot.com/2007/05/membuat-banner-animasi.html">Cara membuat banner animasi</a>

<br />

<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-buku-tamu-di-sidebar.html">Cara membuat buku tamu</a>

<br />

<a href="http://kolom-tutorial.blogspot.com/2007/05/tutorial-html.html">HTML Tutorial</a>

<br />

<a href="http://kolom-tutorial.blogspot.com/2007/04/download-gratis.html">Free Download</a>

<br />

<a href="http://kolom-tutorial.blogspot.com/2007/05/membuat-foto-animasi.html">Foto animasi</a>

<br />

<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-statistik-tarcker.html">Cara pasang Statistik & Tracker</a>

<br />

<a href="http://kolom-tutorial.blogspot.com/2007/05/ie-firefox-dalam-satu-komputer.html">Perlunya IE dan FireFox</a>

</div>
 
 

 

Maka hasilnya akan seperti ini  :

 

 

 

Sedikit saya terangkan agar sedikit jelas.

 

Didalam kode tersebut, yang berperan besar adalah kode yang ada dalam style. Dengan style itulah kita bisa membuat apa yang kita inginkan. Berikut adalah perintah-perintah yang di pakai :

 

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.

 

 

Selain kode-kode tersebut, tentu saja anda bisa menambahkan berbagai variasi sesuai dengan keinginan, misalkan backgroundnya berbentuk gambar, fontnya yang berbeda atau apa saja sesuai dengan keinginan anda.

 

Isi dari halaman tersebut tentu saja bukan hanya berisi link seperti yang kang Rohman contohkan, anda bisa mengisinya dengan yang anda inginkan. Misalkan tulisan biasa, gambar, iklan atau apa saja.

 

Saya masih bingung di mana nyimpen kode di atasss? hiksss…. seperti biasanya, anda tinggal masuk ke halaman dashbord » Tata letak » Elemen Halaman » Tambah Gadget » Pilih untuk JavaScript/HTML » Masukan kodenya » Simpan » selesai.

 

 

Selamat bereksperimen !

6 September 2008 - Posted by | blog tutorial, blogspot tutorial, modifikasi blog

32 Komentar »

  1. Siip! Langsung di praktekkan makasih kang atas infonya

    Komentar oleh Agung | 6 September 2008 | Balas

  2. wew.. keren nih tipsnya.. biarpun panjang, tetep tak coba dulu.. ga rugi deh saya bookmark blog ini.. mantaff..

    Komentar oleh mymoen | 6 September 2008 | Balas

  3. mantap kang tutornya, keliatan lebih ringkas 🙂

    Komentar oleh OOM | 6 September 2008 | Balas

  4. makasih kang..,

    oh iya kang.

    gimana ya caranya pasang iklan dibawah postingan kayak punya kangrohman. kok aq ngga bisa ya kang 😦

    Komentar oleh afrid fransisco | 7 September 2008 | Balas

  5. oh, udah. ternyata udah di tulis disini.
    hi hi..,

    malu aq, 🙂

    Komentar oleh afrid fransisco | 7 September 2008 | Balas

  6. bahasanya bikin enak kalo baca tutorial dsini om.. siip abis… makanya gw gak bosen maen kesini… selain rame.. juga PW… he..he..

    http://www.masenchipz.com (sorry make nyantumin URL.. soalnya setiap mo posting di “openID” selalu error kang)

    Komentar oleh Cipto Adhi Setiawan | 7 September 2008 | Balas

  7. sip.. trik suhu emang selalu oke neh

    Komentar oleh JALOE | 7 September 2008 | Balas

  8. wah ini dia yang saya cari … terimakasih oom … btw ukurannya bisa diatur itu yah???

    Komentar oleh ardyanstyle.com | 7 September 2008 | Balas

  9. Mas Makasih infonya Mas.. Alhamdulilah nih Sebelumnya Saya Udah buat tutorialnya Mas… Tapi Agak Beda dengan mas yaitu: [Artikel bersangkutan dengan Roll] di http://dunia-blogger.blogspot.com/2008/09/related-post-with-roll-artikel.html Dan Sekalian deh :d makasih Buat O-Om yang dah mampir jadi Semangant buat Blog mudah mudahan Kang-Rohman juga Mampir danberkomentar =)) he he Sukses Selalu buat Mas… Sasa selaluikutin perkembangan blog mas 🙂

    Komentar oleh Ade Sanusi | 7 September 2008 | Balas

  10. Saran kang Rohman amat bijaksana. Qta bicarakan habis Lebaran.

    Komentar oleh DS. Utomo | 7 September 2008 | Balas

  11. Wah Komentar dulu ah baru baca

    Komentar oleh Blogger Pemula | 7 September 2008 | Balas

  12. @Agung : silahkan di coba.

    @mymoen : di coba deh, kali aja cocok.

    @OOM : thanks om.

    @Afrid : pernah saya tulis pada posting sebelumnya.

    @Cipto adi ; makacih dech.

    @Jaloe : hatur nuhun kang jaloe.

    @ardyanstyle : ukurannya bisa di atur, tinggal ubahin nilai width sama height nya aja.

    @Ade Sanusi : sip, bagus banget tuh tutorialnya.

    Komentar oleh Rohman | 7 September 2008 | Balas

  13. Mas, saya udash banyak makai tips-tips yang anda publikasi, hasil ok banget mas… untuk tip yang satu ini entar akan saya coba juga ya…
    Mas, saya juga mencoba mengubah tampian blog saya, yang sebelumnya saya gunakan templet ronuders2, setelah saya utak atik skrip html nya, maka hasilnya cukup lumayanlah untuk saya yang pemula. yahhh… berkat pelajaran mas juga.. makasih….
    tolong ya mas link balik ke saya… http://tungkal-ku.blogspot.com

    Komentar oleh MadSyukri | 7 September 2008 | Balas

  14. mantap kang…
    ta coba dulu ya..???

    Komentar oleh BKPPD POHUWATO | 7 September 2008 | Balas

  15. thanks 4 all…
    but aku masih bingung…
    aku pengennya kayak Kang Rohman punya..
    tiap judul ada pembatas garisnya…trus..
    isinya rata kiri kanan..
    kasih masukan dong….
    thanks

    Komentar oleh BKPPD POHUWATO | 7 September 2008 | Balas

  16. iya nih kang rohman kerenn abiss… eh kang mau tanya gimana sih cara buat sidebar dan main wrap gak nyambung2 backgroundya.. tolong posting ya kangg… butuh banget nihhh… makasih bgt jika kang rohman menanggapi komentar saya ini 🙂

    Komentar oleh Anasku | 7 September 2008 | Balas

  17. wah ilmu baru lagi nih!

    Komentar oleh bisnisonline | 7 September 2008 | Balas

  18. wah sip kang jadi ringkas deh dan yang dibuthkan hanya kerja kera denk..makasih kang udah berkunjung ke blog muridnya 😀

    Komentar oleh PenCuri Kode | 7 September 2008 | Balas

  19. Jadi memaksimalkan space di blog kita ya kang….
    Thanks for the info

    Komentar oleh Irawan_ary | 7 September 2008 | Balas

  20. da tips baru niee… langsung mnuju TKP ahhhh. thx bgt ya Kang tas Ilmu2nya yg sgt buuuuuuuuuuuuuuuuuuaaaaaanyak..

    Komentar oleh Arif Luqman Nadhirin | 7 September 2008 | Balas

  21. wah semakin hari semakin bnyak aja ilmu yang saya dapatkan dari sini…

    thanks banget ya kang

    Komentar oleh koko | 8 September 2008 | Balas

  22. wah….., ilmu baru dari sang master nie…, layak unuk dicoba…

    Komentar oleh unattended | 8 September 2008 | Balas

  23. woh gitu toh caranya…
    memang benar-benar master ini bos.

    Komentar oleh vacation tourism | 8 September 2008 | Balas

  24. bang kenapa di jadikan scrol ya, kumpulan tips dan trik nya tentang blog

    bagusan kayak dulu memajang keseluruhan tutorial nya kan enak tuh langsung bisa di lihat

    Komentar oleh Rais | 8 September 2008 | Balas

  25. kalo di tambah garis putus-putus gimana kang??

    Komentar oleh ristian | 8 September 2008 | Balas

  26. kang,saya mau tanya. kan di bawah postingan suka ada kata posting lama,posting baru, nah saya pengen ganti pake halaman.jadi halaman 1,2,3 dan seterusnya. gimana?

    Komentar oleh nyarinama | 8 September 2008 | Balas

  27. keren..

    Komentar oleh jurnalanas.web.id | 8 September 2008 | Balas

  28. menambah wawasan perHTML-an saya niih kang. heheheheh terimakasih kang

    Komentar oleh subagya | 8 September 2008 | Balas

  29. kang, saya pinjem beberapa coding template magazine-nya di blog saya ya…, ada review sekilas juga, hehe…

    Komentar oleh Project | 9 September 2008 | Balas

  30. sorry ya kang….sebenarnya aku dah ksh link spesial ke blog akang, kmrn aku ganti template jd msh direnovasi….

    Komentar oleh Muhammad Ayub | 9 September 2008 | Balas

  31. sekali lagi sorry

    Komentar oleh Muhammad Ayub | 9 September 2008 | Balas

  32. minta yah datanya..thanks

    Komentar oleh Ardian | 24 Desember 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: