Improve your blog appearance with sidebar

In publishing, sidebar is a term for information placed adjacent to an article in a printed or Web publication, graphically separate but with contextual connection. Or we can use term framed text. Maybe there are better terms : text in colored box, text in frame, separated text...

Intention of this box is to demonstrate what is framed text

Anyway when I wrote this title i was thinking on small portion of text that is visually separated from main part of text. My intention in this article is to give instructions how to add framed text on blog posts or any HTML page. But first I will discuss advantages of using framed text. And yes, if you know better term than framed text or sidebar please leave a comment. You can see demonstration of framed text on the right side.

Tips about using sidebars (framed text)

• use sidebars to highlight part of text
Recommended links to improve your blog

How to add categories in blogger
RSS reader on your blog
Create your own site search using google search


• use sidebars to attract attention of visitors


• use sidebars to separate part of text


• it can be method to reduce bounce rate for your site. You can put inner links to your site in framed site


• links in framed text is better option than common list of links in the end of article because links in the end of article will see only most patient visitor who read whole article. Links in framed text can see and fast click visitors who aren't really interested in article


• read any newspaper and you will see that sidebars are heavily used, there must be good reason for this, people likes when there are more small parts of text than one big text

How to make framed text

There is code for framed text:

<div style="border: 1px solid rgb(0, 0, 0); padding-left: 5px; background: [HEX CODE FOR COLOR];  width: [WIDTH FOR BOX]; height: [HEIGHT FOR BOX]; float: [SIDE FOR BOX]; ">[PUT TEXT HERE]</div>

Let's see elements:

• border - you need border to clearly separate framed text from main text, you can use 1px solid rgb(0, 0, 0)


• padding-left - use padding left to move framed text from border, it is ugly to see framed text too close to border


• background - background color for framed text box in hexadecimal value, check this link to find right color. Example : #F1ECEC for color close to silver


• width - width of box (div), example : 100 px


• height - height of box (div)


• float - sets where a element will appear in another element, you can use : left, right or none.
  Framed text in beginning of article have float property set to right
  
  Some Text Some Text Some Text Some Text Some Text
  Example of framed text with float property set to left
  Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text



• [PUT TEXT HERE] - here you can write text you want to see in framed text box

Sample of code for framed text on beginning of this article:

<div style="border: 1px solid rgb(0, 0, 0); background: #F1ECEC; width: 100px; height: 110px; float: right; padding-left: 5px;"><span style="font-size:78%;"> <span style="font-weight:bold;">Intention of this box is to demonstrate what is framed text</span></span></div>