Make Full Width Post Page by Hiding Sidebar in Blogger
Learn how to make Full Width Post Page by Hiding your Blogger template Sidebar. Hide both Default and custom Blogger template's sidebar.
Though I have already shared to make full width Blogger home page and static page but there are some user those who wants to hide sidebar in Blogger post page.
The main function of this trick is that your Blogger home page will display everything like Header, post, sidebar, footer but when you click on any post then sidebar will be invisible on post page.
By
using a conditional tag we can easily do this job. This trick generally apply
for those kinds of Blog who wants to display their Blog post in a full width
page. In addition you can display wide images with full width related post
widget. Some Blog designer adopt this trick for tweaking their Blogger
Template. I hope your Blog visitors will
love it.
Recommended: Make Full Width Page in Blogger Default & Custom Template
Recommended: Make Full Width Page in Blogger Default & Custom Template
Trick For Default Blogger Template User
Both Default and
Custom Blogger template user can able to apply this trick. So first we will go for
default Blogger template user like Simple, Picture Window, Awesome int. So
please follow the instruction.
Step #1: Log in to
your Blogger Account and Go to your Blogger Dashboard
Step #2: Click on Now
click on -> Template -> Edit HTML
Step #3: Now find
the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)
Step #4: Copy the code
from below and Paste the code after/below </b:skin>
<b:if cond='data:blog.pageType == "item"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>
Step #5: Now simply hit the Save
template Button.
Trick For Custom Blogger Template User
Now its turn for Custom Blogger template user. But there are some
problem in this code because all designer are not using same word in coding.
Suppose in case of main-wrapper declaration some designer use main-area,
similarly instead of sidebar-wrapper some designer use right-wrapper. So if the code don't work then you have to
find the exact code that used in coding. So please follow the instruction and
change the code according to your template coding.
Step #1: Log in to
your Blogger Account and Go to your Blogger Dashboard
Step #2: Click on Now
click on -> Template -> Edit HTML
Step #3: Now find the </b:skin> by
pressing Ctrl+F (Windows) or CMD+F (Mac)
Step #4: Copy the code
from below and Paste the code after/below </b:skin>
<b:if cond='data:blog.pageType == "item"'>
<style>
#main-wrapper .post {
padding-left: 1px !important;
padding-right: 1px !important;
}
#main-wrapper { width:99%!important;}
.post { width:99%!important; }
#sidebar-wrapper,#sidebar-wrapper .left,#sidebar-wrapper .right, #midsidebar-wrapper .post-header-line-1, .post-footer{
display:none !important;
}
</style>
</b:if>
Step #5: Now simply hit the Save
template Button.
That's it. Now check
your Blogger site and see everything is showing on homepage but when you enter
into a Post page then your content will stretching to full width. And your
sidebar is not visible. I have told before that this trick will help the user
those who wants to use wide image or organize the post on full width page. If
you have any query about this then feel free to leave a comment below.
54 comments
Tanks for this tuto.
I am bookmarking it for my future use
Best
~ Philip Ariel
In case of my Blog when any visitors clicking on 300 X 250 size advertisement on average Google paying me 1-10 cents or sometime 15 cents(Visitors from USA, UK). Now I have placed 300 X 600 size ads and it is generating 40+ cents per click (Visitors from USA, UK). Suddenly this is generating 35 cents from per click (Indian visitors). So from my point of view, using large ad banner is a wise decision. But it may differ in case of your adsense account. Thanks.
http://www.bloggerspice.com/p/facebook-id-finder.html
#main-wrapper { width:99%!important;}
You can see from below image I have divided my template’s homepage into part.
http://4.bp.blogspot.com/-JfHoREe5LxE/VodnOpCzxoI/AAAAAAAANe0/jRtja3eFCq0/s1600/content%2Bwrapper.png
Main-wrapper and sidebar-wrapper
And Main-wrapper and sidebar-wrapper I have wrapped up together by content-wrapper
Here main-wrapper containing my template’s post snippets in homepage. So you have to find out the code in your template. It may be
content-wrapper
post-wrapper
left-wrapper
Different template developer use different code. After finding the code replace all
#main-wrapper with your template's post wrapper code then it will work.
Thank you.
;)
[IMG]http://i68.tinypic.com/xeg5u1.jpg[/IMG]
And then I noticed that I haven't got content/post/left-wrapper but only these strange codes, so I tought that Artisteer (the program which I used to make the template) uses different codes. Do you recognize any code?
Thanks for your help :D
[IMG]http://i64.tinypic.com/29yha2f.jpg[/IMG]
http://oi68.tinypic.com/mmzxfo.jpg
I think that #main-wrapper is #art-main, I tried to replace the code with it but nothing :t
[IMG]....... [/IMG] -> Not Necessary
If you simply add any Image URL then this will display. And even if you share any video link then it will show easily. I have designed this template like this way.
Once again Thanks to be a part of Blogger Spice.
;)
:t
Hi Mohammad, I'm sorry to write you again for another problem in blog @@,
I wrote a post with full size photos and it looked amazing. The problem came when I returned on hompage and noticed that the photo didn't make smaller and overwrite the sidebar :t What should I do? I don't know if this is normal... Thanks! ^_^
http://www.bloggerspice.com/2015/03/make-blogger-blog-post-image-responsive.html
And if your image size is very large then select the image on post editor and select x-large option. then your post image will be fit according to post body width. Thank you.
^_^
:-bd
Let's see if you can help me also this time...
http://i67.tinypic.com/15eb6fn.jpg
I'm working on a static page and I want to hide the sidebar and the other things and I've done it.
The problem is when I write something and the text doesn't fill all the space where there was the sidebar. :t
What can I do? I'm actually using this code under
http://i68.tinypic.com/w7e7p1.jpg
Hope you can answer me,
Jess
^_^
.art-content-layout {
.art-content-layout .art-content {
.art-content-layout .art-sidebar1 {
.art-postcontent
in the above
.art-content-layout is your content-wrapper where post-wrapper and sidebar containing.
.art-content-layout .art-content is for Blog Post-wrapper and
.art-content-layout .art-sidebar1 is for sidebar content. and finally
.art-postcontent is your Blog post.
For make it work, hide .art-content-layout .art-sidebar1
and make 100% width of .art-postcontent code. I hope it will work. :re
@media only screen and....
the above code use for making a template responsive. It can be found 4/5 times in your Blogger template And you have to add all the original code of your template under each @media only screen and...
for example I have used CSS script
#main-wrapper { width:99%!important;}
.post { width:99%!important; }
#sidebar-wrapper,#sidebar-wrapper .left,#sidebar-wrapper .right, #midsidebar-wrapper .post-header-line-1, .post-footer{
display:none !important;
here post width will be 99%. and sidebar, footer everything will be hidden.
so you have to change it under each responsive code
@media only screen and...
I think this will be bit confusing for you. But before make any changes please take backup of your Blogger template.
< style>
#main-wrapper{width:100%}
#main-wrapper .main-inner{border:none;}
#sidebar-wrapper,.comments{display:none;}
</b:skin>
but this script is depend on your template code. My template's "content-wrapper" named as "main-wrapper" and in your template code maybe different. So according to your template code should change.
you can follow the comments of Jess from above interaction. You will get clear idea. Thank you. :t
Your given code almost worked on my template after changing the word coding that the designer used. It display a full width post page however when I scroll down, there's the sidebar. What do I do?
I just checked your Blog. Your sidebar code written as #sidebar, only. But in my script I have written #sidebar-wrapper, So instead of that write only #sidebar,
replace all #sidebar-wrapper, with #sidebar,,
I hope it will work now. :-d
Thanks for giving us the code. Did a little tweaking on the code and now mine works.
Nice to hear that the script is working on your Custom template. Wish you best of luck in your Blogging career.
:-bd
How did you get this template? who has sold to you? This is completely copyright violation.
:ey
http://watchlivestreamforfree.blogspot.com/2017/05/blog-post.html
Just take my script as example. Try to find your theme's left sidebar script
.left-sidebar{
display:none !important;
}
replace .left-sidebar with your sidebar code.
Now again find the post or main bar code and replace the code #main-wrapper .post
#main-wrapper .post {
padding-left: 1px !important;
padding-right: 1px !important;
}
I hope it will work 100% :up
http://www.tech2help.tk/p/sitemap.html
Thanks .
Just copy the below code and paste it on your specific page for full width page. This will work 100%.
.main-inner .columns {
width: 99%!important;
padding-left: 1px !important;
padding-right: 1px !important;
}
.fauxcolumn-outer.fauxcolumn-right-outer {
display: none;
}
Thank you :)
Definitely, you can hide the sidebar only on the homepage. Just you need to add a different conditional tag in your blogger theme.
Please follow another tutorial regarding the complete guide for adding conditional tags.
https://www.bloggerspice.com/2014/11/Ultimate-Guidelines-for-implementing-Blogger-Conditional-tag.html
Thank you.
This theme already has been featured for showing the full page. But if you want to display manually then you can use the below conditional tag on the sidebar script:
<b:if cond='data:view.isPage'>
<!-- Widget will display only on the static page but hide on all other pages -->
</b:if>
To get complete guide about conditional tag you can visit our another tutorial
https://www.bloggerspice.com/2014/11/Ultimate-Guidelines-for-implementing-Blogger-Conditional-tag.html
Thank you.