Halaman Mempunyai Fungsi Scroll

Posted by handy on 20 January 2011


untuk membuat halaman yang mempunyai fungsi scroll yang ditempatkan pada gadget agar tidak memakan banyak tempat pada blog dan kita juga bisa mengatur halaman-halaman pada blog sesuai urutan yang kita inginkan, yang bisa dilihat pada contoh blog ini yang.
untuk membuat halaman seperti itu tidaklah harus membuat kode-kode 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">
<ol>
<li><a href="http://hmubaraq.blogspot.com/2010/12/cara-daftar-domain-dan-hosting-gartis.html">Cara Daftar Domain</a></li>
<li><a href="http://hmubaraq.blogspot.com /2010/12/cara-setting-domain-cocc-pada-blogspot.html">Cara setting domain</a></li>
<li><a href=" http://hmubaraq.blogspot.com /2010/12/cara-mengupload-file-di-hosting.html">Cara mengupload file hosting</a> </li>
<li><a href=" http://hmubaraq.blogspot.com /2010/12/cara-membuat-blockquote.htm">Cara membuat blockquote</a></li>
<li><a href=" http://hmubaraq.blogspot.com /2010/12/memasang-fasilitas-chat-di-blog.html">Cara memasanag fasilitas chat</a></li>
<li><a href=" http://hmubaraq.blogspot.com /2010/12/menyisipkan-video-youtube-di-postingan.html">menyisipkan video youtube di postingan</a></li>
<li><a href=" http://hmubaraq.blogspot.com /2011/01/cara-membuat-artikel-terkait.html">Cara membuat Artikel Taerkait</a></li>
</ol>
</div>


Maka hasilnya akan seperti ini  : 
  1. Cara Daftar Domain
  2. Cara setting domain
  3. Cara Mengupload file hosting
  4. Cara membuat blockquote
  5. Cara membuat fasilitas chat
  6. menyisipkan video yaoutube di postingan
  7. Cara membuat artikel terkait
Dst …… tinggal tambahkan aja kode :



<li><a href=" http://hmubaraq.blogspot.com /2011/01/cara-membuat-artikel-terkait.html">Cara membuat Artikel Taerkait</a></li>


Agar sedikit jelas.
Yang berperan besar dalam kode-kode diatas adalah yang ada dalam style.
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. Artikel Terkait

{ 0 comments... read them below or add one }

Post a Comment