>

Page Elements Having Function Scroll

^_, Tuesday, November 25, 2008

Responding to a question from readers of this blog about "how to create a page elements that have functions such as the scroll kang Rohman property on Blog Tutorial for beginners who are at the bottom of this blog?" The answer may be in a simple, as to make the page as it is not html code must make the very most, only a little code to make it. Curious as to what code, this was the intention.

To create such a page, you only make the code like this:

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

contents page

</ p>

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

<a href="http://trick-bloging.blogspot.com/2008/11/how-to-make-chat-box-shout-box.html"> Shout Box</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/how-to-make-commments-box-box-comments.html"> comment shou box</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/make-comments-box-intensedebate.html"> comments-box-intensedebate</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/create-blogger-comments-box-below.html"> comments-box-below</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/changing-box-comments-haloscan-become.html"> comments-haloscan</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/highlight-author-comment.html"> highlight-author-comment</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/showing-place-emoticon-in-box-comments.html"> showing-place-emoticon-in-box-comments</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/how-to-create-menu-dtree.html"> how-to-create-menu-dtree</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/create-menu-horizontal.html"> create-menu-horizontal</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/place-shoutbox-1.html"> place-shoutbox-1</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/place-shoutbox.html"> place-shoutbox</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/how-to-make-more-read-read-more-on.html"> how-to-make-more-read</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/read-more-create-versions-2.html"> read-more-create-versions-2</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/how-do-i-remove-paper-read-more-if-we.html"> how-do-i-remove-paper-read-more-if-we</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/way-up-blogger-templates.html"> way-up-blogger-templates</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/things-that-must-be-observed-in.html"> things-that-must-be-observed-in</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/how-to-create-template-on-blogger.html"> how-to-create-template-on-blogger</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/place-translator-widget.html"> place-translator-widget</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/how-to-create-search-engine.html"> how-to-create-search-engine</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/howing-how-status-off-online-yahoo.html"> howing-how-status-off-online-yahoo</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/how-to-make-love-box-and-marquee.html"> how-to-make-love-box-and-marquee</a>
<br/>
<a href="http://trick-bloging.blogspot.com/2008/11/how-to-create-form-email-subscriber.html"> how-to-create-form-email-subscriber</a>
</div>


But the result will be like this:



I explain that a little less clear.



In the code, which is the role of the code that is in style. With the style that we can create what we want. Here are the commands in the life:



overflow: auto; »code to create a scrolling page penggulung or if the contents of the page is high or exceeds the width of the set.

width: 300px; »is the width of the field in want, in this case is 300 pixels, the value of this course in the match with the desire or adjust the width of the sidebar. but, always according to the sidebar should use the value of 100% (width: 100%).

height: 200px; »is high in the field want, this value can change in accordance with the desire, for instance, so the value of 250px or the other.

padding: 10px; »is the creator of the distance to the code that is written in these pages do not hit a wall of a page, of course, this value can change in accordance with the desire. The padding: 5px;

border: 1px solid # Eee »so that there is a visible field box, if you do not want any visible field, then living in clear only.


In addition to the code, of course, you can add various variations in accordance with the desire, for instance backgroundnya shaped image, fontnya different or anything to your liking.


Contents of the page is of course not only contains a link that we Rohman contohkan, you can fill them with yours. For ordinary writing, pictures, ads or whatever.


I am still confused where nyimpen code in atasss? hiksss .... as usual, you live into dashbord page »layout» Page Element »Add Gadget» Select to JavaScript / HTML »Enter the code» Save »finished.





Welcome to experiment!



at 10:26 AM
Labels:

Comments :

0 comments to “Page Elements Having Function Scroll”

Post a Comment

Subscribe to: Post Comments (Atom)