Friday, November 8, 2013

Test post

If you look in my "Contact Us" page you can see a full width of the page or without sidebar. actually I hide the sidebar and create the width of the post become full. so how to remove sidebar and create a full width of the page, you just add a few script to make it. You can remove the footer, sidebar, comments box or other but you must to understand about your template because if you are a blogger you should know layout about your blog. But I sure you know about the layout of your blog, so in here we will learn together we will be smart together, we will be success together. Ok follow steps bellow.
actually you just add display: none to hide the sidebar, footer or another. this simple, first you should know what you want to remove. You just need know the name of CSS classes or IDs you want to hide.

example
you just need to inspect element in your web browser (click left key on the mouse and select inspect element) and search what you want to remove.

How to hide sidebar



And this is example some the Style IDs and classes :

#header > this is style of the header
#sidebar-wrapper > this is style of the sidebar
.post > this is style of the post body

And you can see more IDs and classes on your template, and every templates maybe have different IDs and classes.

Create a full width of the page

1. Go to Blogger > Template > Edit HTML
2. Backup your template
3. And then search ]]></b:skin>
4. And just below it paste this code

<style type='text/css'>
<b:if cond='data:blog.url == &quot;Your Page URL&quot;'>
#sidebar-wrapper{display:none;}
.post {
width: 930px!important;
}
</b:if>
</style>


Replace the yellow highlight with your URL of page or post that you want to remove the sidebar, and blue highlight is the post width, you can replace 930px with your width of the post you want.

Example: if I want to remove sidebar on the "Contact Us" page I will add this below code:


<style type='text/css'>
<b:if cond='data:blog.url == &quot;http://oqzigen.blogspot.com/p/contact-us.html&quot;'>
#sidebar-wrapper{display:none;}
.post {
width: 930px!important;
}
</b:if>
</style>

5. And save your template.

If you don't understand you can ask about it to me in the comment box, I will try to answer your questions. And if you want to remove the sidebar or other in different page or post you just add above code again. I hope this helps.
And If you want to remove the sidebar and footer at once see this


<style type='text/css'>
<b:if cond='data:blog.url == &quot;http://oqzigen.blogspot.com/p/contact-us.html&quot;'>
#sidebar-wrapper, #footer{display:none;}
.post {
width: 930px!important;
}
</b:if>
</style>

you just need add the IDs or classes with separators "," (see the green highlight).