Page Having Scroll Function

Posted by Bloqx Husni on Friday, January 21, 2011

to create a page that has a scrolling function that is placed on the gadget to not take up much space on the blog and we can also arrange the pages on the blog in the order that we want, which can be seen in the example this blog.
to create such a page does not have to make the code very much, but just a little code to make it. Curious what kind of code, here it is on purpose.
To create a page like that, you just make the code like this:

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

contents page

</div>

Example :

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
<ol>
<li><a href="http://hmubaraq.blogspot.com/2010/12/ How-to-Register-Domain.html"> How to Register Domain</a></li>
<li><a http://boyadoe-ji.blogspot.com/2010/12/ How-to-domain-settings.html"> How to domain settings</a></li>
<li><a href="http://hmubaraq.blogspot.com/2010/12/ How-to-Upload-file-hosting.html"> How to Upload file hosting</a> </li>
<li><a href="http://hmubaraq.blogspot.com/2010/12/ How-to-create-a-blockquote.htm"> How to create a blockquote</a></li>
</ol>
</div>

Then it will be like this:

1. How to Register Domain
2. How to domain settings
3. How to Upload file hosting
4. How to create a blockquote

Etc ... ... just add the code wrote:
<li><a href="http://hmubaraq.blogspot.com/2010/12/ How-to-create-a-blockquote.html"> How to create a blockquote</a></li>


To be a little obvious.

Which plays a major role in the above code is that there is in style.
Here are the commands in use:

overflow: auto; »this code for the rollers to create scrolling or page if the content of these pages has exceeded the height or width limits that have been specified.

width: 300px; »is the width of the field in want, in this case by 300 pixels, this value must be adjusted with the desire or be adjusted with the existing width of the sidebar. however, always related to the sidebar then you should use a value of 100% (width: 100%).
height: 200px; »is the height of the desired field, this value can change as you wish, eg 250px or so other values.

padding: 10px; »is the maker code distance for the existing posts in these pages do not hit the wall page, this value is, of course, can change as you wish. eg padding: 5px;

border: 1px solid # eee »for that field appears there was the box, if you do not want any visible box, then stay in clear only.
RELATED POST

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

Post a Comment