So, for this tutorial we have two goals.
First: To create a full page width Page.
Second: To create a full page width Post.
Second: To create a full page width Post.
First that we need to do is to hide the SIDEBAR of our website when viewed in a particular page or post only. So, if we viewed other posts, the sidebar is still there. If you viewed the homepage, the sidebar will still appear there.
STEPS:
1. First, we need to find and take note all the words that the creator of the template used when it comes to sidebar.
2. Go to your Blogger Theme > Edit HTML.
3. Now search for the word "sidebar" inside your template's HTML code. List all the word or hyphenated words with sidebar. Example: sidebar, sidebar1, sidebar2, sidebar-wrapper, sidebar-right, sidebar-left, sidebar-right-1, etc.
4. When you listed all the words with sidebar, add the number sign (#) in each and every word you listed and enclosed it with the opening <style> and closing </style> tags. You can just copy the code below and replace the words with your own. But do not remove the number sign.
<style>
#sidebar-wrapper, #sidebar1, #sidebar, #sidebar2 { display:none !important;} #main-wrapper { width:99%!important;} .post { width:99%!important; }
</style>
#sidebar-wrapper, #sidebar1, #sidebar, #sidebar2 { display:none !important;} #main-wrapper { width:99%!important;} .post { width:99%!important; }
</style>
5. Now Edit the page or post that you wanted to become full-width page when viewed.
6. From Compose switch to HTML. Copy and paste the code that you edited above the whole code of the page. See image below (you can enlarge the image to see it clearly)
7. When done, save your post. View it to see whether it is now a whole-page post now or not.
If you wanted your About, Contact, Disclaimer, Privacy Policy pages to be whole-page width also, just perform the same steps.
Note: Be careful when listing all the words with sidebar in it. Make sure you listed all the words, if not the sidebar will still appear.
If you have something to share or ask regarding this tutorial, please do not hesitate to leave a comment below. Thank you!
0 Comments
Post a Comment