Blogger Tips

The Original Post can be found HERE

This tutorial is dedicated to my blogger fellows who don't know how to change the width of blog in Custom
blogger template. You can easily learn about how to change the width of different sections in Blogger. This tutorial is for those blogger who are stick with custom blogger template. If you want to adjust the width of blogger having Default blogger template then Must see this tutorial. Now increase or decrease the width of sidebar for new and awesome blogger widgets to get fit in it.
If you are using default blogger template then go for this post

You will Learn: 
How to change the width of Header wrapper
How to change the width of Main Wrapper
How to change the width of outer wrapper
How to change the width of sidebar
How to change the width of footer
How to change the width of Post section

Lets Begin:

The main subject of this post is related with the word "width" so we have to only mess with the width CSS property for the all codes given below

Note1:  These all "width" property are related with each other and all should be in specific ratio to each other.. For example
If the width of outer wrapper is 800px and the width of main-wrapper and sidebar-wrapper are 550px and  300px respectively then (If you know Mathematics then The below explanation will be easy) By the way don't worry the step below are simple :)

• Main-wrapper (550px) + Sidebar- Wrapper (300px) =  850px  which is greater then Outer wrapper (800px)

In the above case the sidebar may be pushed below by the main wrapper or they may overlap each other.

Conclusion:

• Mean the the width of Main-wrapper (550px) + Sidebar- Wrapper should be less then Outer wrapper

Example:

#header-wrapper {
width:770px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
--------------
#outer-wrapper {
width: 800px;
margin:0 auto;
padding:10px;
}
--------------
#main-wrapper {
width: 550px;
}
---------------
#sidebar-wrapper {
width: 240px;
}
---------------
#footer {
width:770px;
{

How to change the width of Outer wrapper 

How to change the width of Header wrapper 

Header wrappers hold your header, Picture or logo and title etc.

#header-wrapper {
width:640px;margin:0 auto 10px;
border:1px solid $bordercolor;
} 

 If the outer wrapper is 800px or 700px then the header wrapper should be less then outer wrapper
e.g:
if Outer wrapper is 800px
then the header wrapper should be 780px

 Changing the width of Main Wrapper

 Changing the width of Sidebar Wrapper

Sidebar wrapper exist of Widget, ads etc.

If the width of  the outer-wrapper is 800px
and the width of main-wrapper is 550px
then the width of the sidebar should be 240px;

because if the width of the main wrapper and sidebar wrapper becomes greater then 800px then the main wrapper will push the side bare downward

#sidebar-wrapper {
width: 210px;}

adjust the width of sidebar by changing the value of 210px;

 Changing the width of  footer

We recommend you to keep the width of footer and header the same. Further your choice.

#footer {
width:640px;
}

Today in this tutorial you will learn about "how to remove / add spaces between posts" or "how to remove / add  empty areas between posts" of blogger.Sometimes having spaces between blogger post look cool and some time just weird.

This is simple and short tutorial to solve your issue about spaces between blogger posts, So lets start:



Follow the steps below:

Step.1

• Go to Dashboard
• Select ‘Design’
• Click on ‘Edit HTML’
• Click on ‘Check’
• Select ‘Expand Widget Templates’
• Backup your Template first
• Now all you have to do is search for the code (Ctrl + F)

.post {

The code will nearly look like this:

.post {
 margin: 0 0 $(post.margin.bottom) 0; 
}

In the above code we have to edit the red line code.

Step.2   For increasing space b/w posts

If you want to increase the space/area between your blogger posts, then replace the above red line with the following code:

margin: 60px 0;

Greater the value of 60px larger will be the space between the post.




Step.2   For decreasing space b/w posts

for decreasing or removing the area between the posts then replace the red code with the following code:

margin: -5px 0;

Same case here, greater the value of -5px, smaller will be the space between the post.



Hope this tutorial helped you, stay tune with us for new tips and tutorials.

The Original Post can be found HERE

The easiest way to do this is through Blogger Layout (Blogger dashboard > Layout > Blog Posts > Arrange items). But if for some reason, that does not help, you can change the arrangement from HTML editor. Here, I shall explain only two arrangements.
Arrangement 1: Default sharing buttons will appear exactly beneath the post
1- Backup your blog template. Open HTML editor and locate the following tag:

<b:includable var='post'>

2- Expand that and locate the following code:

<div><b:if cond='data:post.sharePostUrl'><b:include data='post' name='shareButtons'/></b:if></div>
<p><span><!-- email post links --><b:if cond='data:post.emailPostUrl'><span><a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><img alt="" class="icon-action" height="13" src="http://benignblog.com/wp-content/uploads/2013/10/icon18_email.gif" width="18" /></a></span></b:if><!-- quickedit pencil --><b:include data='post' name='postQuickEdit'/></span>

3- Delete that code displayed in Step No. 2 above. Now, locate the following code there.

<div>

4- Exactly beneath that code, paste the following code:

<div><b:if cond='data:post.sharePostUrl'><b:include data='post' name='shareButtons'/></b:if></div>
<p><span><!-- email post links --><b:if cond='data:post.emailPostUrl'><span><a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><img alt="" class="icon-action" height="13" src="http://benignblog.com/wp-content/uploads/2013/10/icon18_email.gif" width="18" /></a></span></b:if><!-- quickedit pencil --><b:include data='post' name='postQuickEdit'/></span>

5- Preview the template and save it.
Note: The code also carries a code for “Quick edit” pencil which appears on home page. It can be disabled from Blogger layout. Secondly, if you have already saved the changes and an error “you have unsaved changes that will be lost” appears while closing HTML editor, just ignore that. That occurs due to the redesigned HTML editor. Your saved changes will not be affected by this error.

Arrangement 2: Sharing buttons will appear solely in the last row of post footer widget

Follow Step No. 1 and Step No. 2 displayed in “Arrangement 1″. From Step No. 3, there are some changes which are explained here:

3- Delete that code displayed in Step No. 2. Now, locate the following tag there:

</b:includable>

4- Exactly above that tag, paste the following code:

<div>
<div><b:if cond='data:post.sharePostUrl'><b:include data='post' name='shareButtons'/></b:if></div>
<p><span><!-- email post links --><b:if cond='data:post.emailPostUrl'><span><a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><img alt="" class="icon-action" height="13" src="http://benignblog.com/wp-content/uploads/2013/10/icon18_email.gif" width="18" /></a></span></b:if><!-- quickedit pencil --><b:include data='post' name='postQuickEdit'/></span></div>
<p>

5- Preview and save the template.
I have formulated and then tested all these customizations on variety of Blogger templates including both default templates and some custom templates based on default templates before publishing them here. If you encounter any difficulty while applying any of these customizations, you can ask in comments section below.

The Original Post can be found HERE

You can get rid of unwanted social sharing button(s) from your blog easily. Give a look at the description given below:

1- First, backup your blog template, open HTML editor and locate the following opening tag.

<b:includable var='post'>

 2- Expand that. Underneath you will find codes for all default sharing buttons. Published below are the codes for individual sharing buttons which I have displayed separately: 

Email This: 

<b:if cond='data:top.showEmailButton'><a expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span><data:top.emailThisMsg/></span></a></b:if>

Blog This: 

<b:if cond='data:top.showBlogThisButton'><a expr:href='data:post.sharePostUrl + "&target=blog"' expr: expr:title='data:top.blogThisMsg' target='_blank'><span><data:top.blogThisMsg/></span></a></b:if>

Share to Twitter: 

<b:if cond='data:top.showTwitterButton'><a expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span><data:top.shareToTwitterMsg/></span></a></b:if>

Share to Facebook: 

<b:if cond='data:top.showFacebookButton'><a expr:href='data:post.sharePostUrl + "&target=facebook"' expr: expr:title='data:top.shareToFacebookMsg' target='_blank'><span><data:top.shareToFacebookMsg/></span></a></b:if>

Share to Google+:

<b:if cond='data:top.showDummy'>
<div><data:post.dummyTag/></div>

<p></b:if>
3- To remove any button, select its code and delete it. To restore, place the code back from where you have deleted it. You can also change the sequence of these sharing buttons. Just then choose the code of a button and change its placement. 4- Preview and then save the template.

The Original Post can be found HERE

This method will remove sharing buttons from homepage of a blog but those sharing buttons will still appear under each post on separate pages allowing users to share blog posts on social media websites.

Follow these steps:

1- Backup your blog template first. For that purpose, go to Blogger dashboard &gt; Template &gt; Backup / Restore &gt; Download Full Template. You will get a copy of your blog template on your computer using which you can restore the template if anything goes wrong while applying the customizations.

2- Go to the HTML Editor (Blogger dashboard &gt; Template &gt; Edit HTML) and locate the following opening tag:
<b:includable var='post'>

3- Expand that and find this code:
<div><b:if cond='data:post.sharePostUrl'><b:include data='post' name='shareButtons'/></b:if></div>
<p>

4- Now, exactly in the beginning of the code which is displayed in Step No. 3, add the following code:
<b:if cond='data:blog.pageType == "item"'>

and at the end, add the following tag:
</b:if>

So, the whole code will look like this:
<b:if cond='data:blog.pageType == "item"'>
<div><b:if cond='data:post.sharePostUrl'><b:include data='post' name='shareButtons'/></b:if></div>
<p></b:if>

[For your ease, you can directly replace this code with the code displayed in Step No. 3.]

5- Preview and save the template.
I shall recommend to disable separate “Email Post” button because that one is also included among other sharing buttons with  the title “Email This”. It does not make any sense to have two Email buttons for the same purpose. To disable separate “Email Post” button, go to Blogger dashboard &gt; Layout &gt; Blog Posts &gt; Show Email Post Links. Unselect that and press “save” button. You can also hide that from home page if you do not want to disable that. For that purpose, locate the following codes: (See Step No. 2 above)

<!-- email post links --><b:if cond='data:post.emailPostUrl'><span><a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><img alt="" class="icon-action" height="13" src="http://benignblog.com/wp-content/uploads/2013/10/icon18_email.gif" width="18" /></a></span></b:if>

Replace the code displayed above with the following code:

<b:if cond='data:blog.pageType == "item"'><!-- email post links --><b:if cond='data:post.emailPostUrl'><span><a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><img alt="" class="icon-action" height="13" src="http://benignblog.com/wp-content/uploads/2013/10/icon18_email.gif" width="18" /></a></span></b:if></b:if>

Preview and save the template.
Note: Sometimes, even if you have already saved the template and wants to go back to the Blogger dashboard, an unpredictable message “You have unsaved changes that will be lost” appears. Just ignore that message. That appears due to the redesigned HTML editor. It won’t bother again when you open HTML editor the next time.

The Original Post can be found HERE

.comment-link{display:none}