Feb 15, 2013

How to hide Left Sidebar and css Based Box or widgets to make Home page look different

Read all carefully and apply with cool mind. Before doing any thing on your HTML code ,

you must download the template for any accidental loss.

Go to template>expand widget>

Then Search this code

<b:if cond='data:blog.pageType == "index"'>

or

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Sometimes first code in which we see "index" word works for few blog homepage, but sometimes the .homepagUrl work for homepage.It is to be choosen as where it is needed for working of the code.

The code will look like this.

<b:if cond='data:blog.pageType == "index"'>

PUT THE YELLO HIGHLIGHTED CODE HERE

<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

<style>
.blog-pager, .footer, .post-footer, .feed-links, .ex,
#sidebar-left-1 { display:none !important;}.main-inner .columns
{width: 70%;padding-left:0 !important;padding-right:0 !important;}
</style>

You are done.

----- For hiding the widget or css style id or class on post page we do the following.

Go to template>expand widget>

Search this code by doing this Ctrl+F

<b:if cond='data:blog.pageType == "item"'>

or

<b:if cond='data:blog.pageType == "item"'>

The code will look like this. There may be more "item" code. Choose first one and do just like this.

<b:if cond='data:blog.pageType == "item"'></code>

PUT THE YELLO HIGHLIGHTED CODE HERE

<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

If you don't want to adjust the width of main container , then remove this code from the total yellow set code.

.main-inner .columns {width: 70%;padding-left:0 !important;padding-right:0 !important;}

And left the rest yellow code as it is. In the highlighted yellow code any id or class can be edited as per user choice. You are done.

----- Here I am giving most important trick. If any of the above hack is not working then add this set of code near the code for which you want to do the styling.

<b:if cond='data:blog.pageType == "item"'>

PUT THE YELLO HIGHLIGHTED CODE HERE

</b:if>

This is the very important one. Read all carefully and apply with cool mind. Before doing any thing on your HTML code , you must download the template for any accidental loss.

No comments:

Post a Comment