Minggu, 08 September 2013

Add Simple Scroll Box On Blog Post



When writing tutorial post, you might have to type long css or html codes. Sometimes they are too long and take much space of your posting. To get them organized you can use scroll box.

Here's how to make simple scroll box.

When writing  post, directly   switch to  HTML mode. Copy and paste these codes :
<div style='padding: 5px; overflow: auto; width: 400px; height:50px;border:1px solid #000000'> 
---- YOUR TEXT ----

then close it   by

 </div> 
 See how to put the codes in action as shown below :

<div style='padding: 5px; overflow: auto; width: 400px; height:50px;border:1px solid #000000'> 
One of enjoyable things when playing around with blogspot blog is even if I 'm not an expert in coding or css I can easily grab various ways in the way how customize my blog template. Some say wordpress offers more awesome features compared to blogspot. I must confess it is true. However I stil can find more and more fun when playing around with blogspot. That's way for my personal blog I am till using blogspot platform.</div>
Sample output of a simple scroll box 

One of enjoyable things when playing around with blogspot blog is even if I 'm not an expert in coding or css I can easily grab various ways in the way how customize my blog template. Some say wordpress offers more awesome features compared to blogspot. I must confess it is true. However I stil can find more and more fun when playing around with blogspot. That's way for my personal blog I am till using blogspot platform.

Customization:

  • width : 400px   the width of the scroll box. If you like to set the width to be shorter you can do it too. For example instead of simply write  auto you set the value becomes  300px, 350px, .... or any size you want.
  • height : 50px    on the codes above is just a sample. Again you can customize the value as you wish.

Have FUN!

0 komentar:

Posting Komentar