Wordpress the magic behind a blog
| Labels: Blogging | 0 comments |
Blend Theme
Premiumseries

Microsoft Word 2007 have a new nice feature to publish your article to your blogs within word.
Now you can write your article in word 2007 and format it as you already familiar with word and then publish your post to the blog site.
it supports:
Recently i have been into blogging and i started to play around with blogger templates to achieve the look i want. i found this is somehow tricky for some people after i saw a lot of posts around.
Today i will write about adding additional side bar to your blog and make them on the outer sides of the page.
first lets look at what we need in the template:
This is the CSS part that we will need to change in it
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#outer-wrapper : is the main holding container that hold all the elements inside our blog
its width is 660px and float to left
#main-wrapper: hold the blog posts, its width is 410px
#sidebar-wrapper: hold the side element which we need to add another one of it,its width is 220px
so 410+220 =630 + 20px (for padding) =650px
to add another side bar we have to get it space to live in.
here it is we have to modify #outer-wrapper to width :860
then lets add another CSS element
#sidebar-wrapper-left {
width: 220px;
float: left;
word-wrap:
break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
now we can add the new side bar Div in the body section :
<-div id='sidebar-wrapper-left'>
<-b:section class='sidebar' id='sidebar' preferred='yes'>