Create Extra Columns in your Blogger Layout - Magazine Style!

.


STEP #1 Log in to Blogger, go to Layout -> Edit HTML Now find this code:


]]></b:skin>
And immediately BEFORE/ABOVE it, paste this code:

#magazine-left {
  width: 45%;
  float: left;
}
#magazine-right {
  width: 45%;
  float: right;
}

and,Now find this code:

</b:section> tag and before the closing </div>


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='magazine-left' showaddelement='yes' > 
<b:widget id='Text51' locked='false' title='Test Title 1' type='Text'/> 
</b:section> 

<b:section class='sidebar' id='magazine-right' showaddelement='yes' > 
<b:widget id='Text52' locked='false' title='Test Title 2' type='Text'/> 
</b:section> 

<div style="clear: both;"></div>
</b:if>

Now Click Save Template 

Adding widgets and styling your home page

Now that you have added the required code for your magazine style front page, you may want to remove the dummy text widgets and replace them with your widgets of choice.

Simply go to Layout>Page elements in your Blogger dashboard, where you will see your new widgets appear below the Blog Posts section like this:



Click on the edit link for the existing "Test Title 1/2" widgets, and choose to remove these if you prefer. Then add new page elements of your choice to customize the appearance of your blog's home page.

You may also prefer to limit how many posts are displayed on your blog's home page so that your new widgets will feature higher up on your blog's home page.

To change the number of posts which are displayed, go to Settings>Formatting and choose the number of posts to display using the first option on this page:



In many magazine style blogs, only one post is displayed on the home page, but if your posts are short, it should be acceptable to post more than one without affecting the overall look and style of your design.

0 comments:

Post a Comment