Order Sharing Buttons In Post Footer Widget:
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 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.
0 comments:
Post a Comment