Friday 8 August 2014

Widgets

How To Create a Full Width Page and Remove Sidebar Blog

Posted By : Anonymous | Friday 8 August 2014 first to comment!
PUT YOUR PARSED ADSENSE CODE HERE
As we've previously shared a responsive blogger template that is Flat Diary - A Premium Responsive Blogger Template and before this shared stuff we had shared a Sitemap page with CSS Theme  If you're missed our these two post so, don't worry read these post with relaxation after completely learn today's tutorial and Our today's tutorial is how to make full width page and remove sidebar from specific pages in blogger blogs.
Create A Full Width Page In Blogger

Blogger Platform is the developed by Google which is user friendly blog provider based platform It have a lot of function and its template or themes. It have a great interface I means that this blogger interface are very simple and its feature are easy to use it one more thing of it You can add all types of HTML and CSS or JavaScript Widget by the using its layout section. Below I've listed some Advantages of Full Width Page read below.

Advantages of Full Width Page:-
  • Looking More Professional.
  • Reduce Blog Loading time.
  • Great Impression
  • Recommended for Contact US ,About Us Pages.
  • Even User Friendly
  • More Attractive better than other pages.
  • Hidden Sidebar
  • Much More!

But Today all of us will learn about a blogger page and how to make to full width. If you can created some pages like About Us, Contact Us or any other category and you can seen in other some wordpress or other websites than their these pages are setup in full width web page which means that these pages are show only your blog without and sidebar widgets. You may be also remove your blog's header and footer for full width page. During the surfing our blog you can visit our contact us page and you seen there that this page is professional looking this page shows only! without sidebar. If you can create your own full width page then you have to need to follow my easiest steps.


                                                                    Live Demo
Well, After gaining some knowledge about the full width pages now I would like to explain its each one line that make using the below code.

<style type="text/css">
{ margin-bottom: 25px; text-align: center; }
.comments, #blog-pager, .sidebar-wrapper
{ display: none; }
.main-wrapper {width: 100%;}
</style>

So, friends look at the first line in the above code you can see the started tag of CSS you have some knowledge about CSS then I no need to explain the first line. Now jump to second line you can see that the following class like .comments, #blog-pager, .sidebar-wrapper these classes represent the remove the following things like sidebar, comments box and etc. you can know about { display: none; } which means that see the third line this fourth line has remove the third line thing or div classes. look at the fifth line it represented that your page how many width you can customized by your choices. and finish.

How To Create Full Width Page And Remove Sidebar In Blogger Blogs?
Now friends lets start the today's tutorial and learn and gain knowledge about the full width page. To make the full width page and remove sidebar just follow my below steps.

  • Go To Blogger Dashboard>>Pages>>New Page
  • Blank Page>>HTML Tab
  • Paste the below code in there HTML tab section
.<style type="text/css">
{ margin-bottom: 25px; text-align: center; }
.comments, #blog-pager, .sidebar-wrapper
{ display: none; }
.main-wrapper {width: 100%;}
</style>
  • After the paste below code in your page just below it.
  • write your page.
  • then finally publish your page.
  • That's all!
  • CONGRATULATIONS! you're successfully created a full width page in blogger.
Final Words
So friends this is our today's tutorial and I can promised you that one day I'll back again with then helpful and interesting post if you're facing problems or getting error during this process then feel free to ask comments box for your solution and don't forget to like our Facebook page and also share this tutorial with your friends on social networking sites.
Do you Like this story..?

Get Free Email Updates Daily!

Follow us!





0 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
Imtiaz Ahmed

  • Tips And Tricks
  • Template
  • Make Money
  • Widget
  • Sitemap
  • Back To Top