How to Change Normal Posts To Full Width Posts in blogger


Hello Everyone I'm writing this tutorial after getting request from one of our subscriber He wants to disable sidebar on Posts Page and Wants to Maximize the width of posts to 100% So that It looks good and easy to read for readers. This is Pure CSS Trick We just achieve this by tweaking few things in blogger blogs template



As Most of the Blogger Users Use Custom Blogger Template in their Blogs so it is hard to find which ID or Class they refer in their Template But you can find it Easily. We are sharing some most used names in order to save your time. But Template created by third party Software like Artisteer etc are hard to find their classes or ID. But If you don't get your your element ID or Class You can Ask us in Comments We Will Help You. 

Some FAQ About Country Specific URLs :

How to disable Sidebar in Posts Page in blogger?

We Can Achieve this By Using Blogger Conditional Tag. It is very Easy. See the Below Conditional Tag means. If Blog Page is Equal to Posts Then Write The Code in Between where you want to achieve your imagination.
<b:if cond='data:blog.pageType == &quot;item&quot;'>

// Your Code Between

</b:if>

Why To Use Full Width Posts Page?

1. There are many Reasons Which we will discuss Below But Main Reasons are: if you are writing a tutorial then if your posts pages width are not that wide and you are thinking of disabling the sidebar and use full width. Secondly if you are adding images posts then you need full width image to make the post look attractive and good for reader so you need this tutorial.

Disabling Sidebar Effects on my Blog Ranking ?

No Just we are disabling Sidebar in the posts page your sidebar will be enabled or visible on Homepage. No need to get afraid. and your posts page will Have related posts to Interact with visitors.

Let Start! How To Add  Disable Text Selection in Blogs or sites:

Steps To Add Widget:

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

Template

STEP 2: In The Left Side Bar You will find Template Section as highlighted in the image above Click on Template.

STEP 3: Click On Edit HTML.

STEP 4:  After Clicking on Edit HTML Search for
</head>

STEP 5:  Copy This Below Code Before Closing </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- Using Blogger Conditional Tag -->

<style>

<!-- Adding Styles -->

#main-wrapper .post {

padding: 0px 1px!important;

}

#your_id, #main-post-wrapper, #main-section, #main-wrapper { width:99% !important;} <!-- Use Width According to your Desire -->

.post { width:99%!important; } <!-- Use Width According to your Desire -->

<!-- Disabling Sidebar -->

#your_id, aside, #rsidebar, #sidebar-wrapper, #sidebar-wrapper .left, #sidebar-wrapper .right, #midsidebar-wrapper .post-header-line-1, .post-footer{

display:none !important;

}

</style>

</b:if>

Customization:

  • The Orange Highlighted Text is Responsible for Your Main Wrapper Id Which is used to wrap your posts or container in which all your posts are present if you have your unique ID Add it here replacing orange text. For Example :
<div id="main-wrapper"></div>
Here main-wrapper is the ID in which all your posts are present which are wrap by <article></article>
  • The Yellow Highlighted Text is Responsible for the width of Your Main Section and Posts Which is wrapping your posts if you want to increase or decrease your width then you can do it easily by changing the value with your desire number by replacing values in Green Color
  • The Green Highlighted Text is Responsible for Your Custom Sidebar Id If your ID is Different then default ID's which we created. if it is not then Leave it as it is.
STEP 6:  All Done Save Your Template and Verify it in your site Whether it is working correctly or not . If it is not working correctly then you did some mistake while following tutorial.

That's It Thanks For Following our Tutorial " 5 Steps How to Create a Full Width Posts (hide sidebar) blogger! '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

No comments:

Post a Comment