Making A Scroll Function In A Page Element

In this bright day, it would be happy for me to respond one of the questions from the reader of Kang Rohman’s blog. The question is about “How to make a scroll function in a page element, like a scroll function of Blogging Tutorial For Beginner element at the bottom of this blog?”. I can say that the answer is very simple because we don’t have to make a lot of HTML code to make it. We only need a few HTML codes. If you are still curious to make it? Just read the tutorial below to understand what I mean…ok?
To make such kind of page, you only need to make the following code:
<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
What you want  place here!
</div>
Sample :

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee"> 
<ul>
<li><a href="http://blogwidgetbox.blogspot.com/2010/12/making-scroll-function-in-page-element.html" target="_blank">making-scroll-function</a> </li> 

<li><a href="http://blogwidgetbox.blogspot.com/2010/12/making-scroll-function-in-page-element.html" target="_blank">making-scroll-function</a> </li> 

<li><a href="http://blogwidgetbox.blogspot.com/2010/12/making-scroll-function-in-page-element.html" target="_blank">making-scroll-function</a> </li> 

<li><a href="http://blogwidgetbox.blogspot.com/2010/12/making-scroll-function-in-page-element.html" target="_blank">making-scroll-function</a> </li> 

<li><a href="http://blogwidgetbox.blogspot.com/2010/12/making-scroll-function-in-page-element.html" target="_blank">making-scroll-function</a> </li> 

<li><a href="http://blogwidgetbox.blogspot.com/2010/12/making-scroll-function-in-page-element.html" target="_blank">making-scroll-function</a> </li> 

<li><a href="http://blogwidgetbox.blogspot.com/2010/12/making-scroll-function-in-page-element.html" target="_blank">making-scroll-function</a> </li> 

<li><a href="http://blogwidgetbox.blogspot.com/2010/12/making-scroll-function-in-page-element.html" target="_blank">making-scroll-function</a> </li> 

<li><a href="http://blogwidgetbox.blogspot.com/2010/12/making-scroll-function-in-page-element.html" target="_blank">making-scroll-function</a> </li> 

<li><a href="http://blogwidgetbox.blogspot.com/2010/12/making-scroll-function-in-page-element.html" target="_blank">making-scroll-function</a> </li> 

<li><a href="http://blogwidgetbox.blogspot.com/2010/12/making-scroll-function-in-page-element.html" target="_blank">making-scroll-function</a> </li> 

<li><a href="http://blogwidgetbox.blogspot.com/2010/12/making-scroll-function-in-page-element.html" target="_blank">making-scroll-function</a> </li> 

<li><a href="http://blogwidgetbox.blogspot.com/2010/12/making-scroll-function-in-page-element.html" target="_blank">making-scroll-function</a> </li> 

<li><a href="http://blogwidgetbox.blogspot.com/2010/12/making-scroll-function-in-page-element.html" target="_blank">making-scroll-function</a> </li> 

<li><a href="http://blogwidgetbox.blogspot.com/2010/12/making-scroll-function-in-page-element.html" target="_blank">making-scroll-function</a> </li>  

</ul>
</div>

  And here is the result:
 

• Making a blog at blogspot
• Blog Setting
• How to backing up template
• How to backing up widgets
• How to changing template
• Make a Post Summary (Read more)
• Blog Comment send to @mail
• Adding search engine to blog
• Making a drop down menu
• Add google talk to blog (1)
• Making a News Paper Style Drop Caps
• Adding Recent Post & Recent Comments
• Adding Yahoo!Massenger icon
• Adding Google talk (2)
• Adding yahoo! Massenger Emoticons (1)
• Fix error "Widget IDs should be unique"
• Making a Table of Content
• Adding shoutbox
• Adding user online tracker
• Adding Statistic & tracker
• Adding digg button to post page
• Upload image to image hosting
• Making a Logo and image button
• Adding Favicon to URL address
• Adding a Clock to blog
• Removing the number of label

 
Let me tell you about them so that you really understand. In the code above, Style code has a big role, why? Because we can make and create anything we want with Style. Below are the orders we use to make the scroll function.
overflow:auto; » this code is used to make a scrolling page if the content of the page has reached the defined highest and widest limit.
width:300px; » it is used to define the width of the scrolling page. In this case, 300 pixel. This value is matched with the width of scrolling page you want and also matched with the width of sidebar. But remember that you ought to use 100% to match with the width of the sidebar. (width: 100%)
height:200px; »  it is used to create the height of the scrolling page. You can change the height as you want, such as 250% or others.
padding:10px; » it is used to make the distance between the writing or content of the scrolling page and the wall of the scrolling page or you use this code in order not to make the writing or content of the scrolling page touch the page of wall. You can change this code as you like, such as; padding; 5px.
Border:1px solid #eee » it is used to make the box of the scrolling page, if you don’t want to use it, just erase it.
Beside the codes above, you can also add any kinds of variation as you want, for example; picture background, different fonts or any other variation.
The contents of the scrolling above aren’t only for links, like Kang rohman’s links but also for ordinary writing, images, ads or others.
Are you still confused to put the code above? Take it easy my readers, as usual, go to blogger dashboard » layouts »page element » Add a gadget » select JavaScript/HTML » put in the code » save and finish
Have a nice experiment my readers!