Mostly when you include gadgets or widgets on your blog, you will be confused how to place it as you prefer. Mostly you may follow instructions from another source and you will add widget to the place that article/post refers or suggests to. Sometimes it's difficult to know what's on readers' mind for a developer or writer. And it's not easy for article writer to specify each and every instruction that reader may like to add widgets on their blogs. Therefore you may find that they will mostly address the most possible way and let users to change positions later if they are know how. So what if you need to change the position of a widget by going through your template?
If you go through layout tab and add widget code via HTML/Java Script element, you can easily arrange your widget on your template by dragging and dropping it at the place where you wanna display it. However the things are different if you touch or edit your template to insert widget code in it. In such a scenario, you may confuse and try not to go beyond the instructions. Therefore mostly you will add your code as they instructed. Obviously, we all not familiar with HTML or not template designers to know all about codes in the template. So I hope these few tips will be useful for you when you add widgets to your blog, to place your widgets to the position where you would like it to be appeared on your blog.
Steps:
1. Go to Blogger Dashboard.
2. Click on your Design.
Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.
3. Click on Edit HTML button.
4. Click Proceed button to continue.
5. Tick on, Expand Widget Templates.
6. Now follow criterias listed below as per your requirement. Here I presume you are going to add a widget or some sort of code snippet.
If you need to place a widget right below Post Title, just add your widget code right after <div class='post-header-line-1'/> code.
Below Post Body
If you need to add widget below post, add your widget code after <data:post.body/> code.
Above Post Footer
If you require to add widget before your post footer, just find <div class='post-footer'> and add your code above that code.
If you find a way to add widget into post footer, find <div class='post-footer-line post-footer-line-1'> and add your widget code below that line.
Above Comment Form
Do you need to place widget just above comment form? Just find the code snippet similar below in your template and add your element code right above that. You will encounter two findings when you searching for below code, but make sure to select the code snippet most similar to below one.
Enjoy :-)
Steps:
1. Go to Blogger Dashboard.
2. Click on your Design.
Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.
3. Click on Edit HTML button.
4. Click Proceed button to continue.
5. Tick on, Expand Widget Templates.
6. Now follow criterias listed below as per your requirement. Here I presume you are going to add a widget or some sort of code snippet.
Note: You may find two search results for some line of codes below. If you get multiple search results, just concern about first finding only.Below Post Title
If you need to place a widget right below Post Title, just add your widget code right after <div class='post-header-line-1'/> code.
Below Post Body
If you need to add widget below post, add your widget code after <data:post.body/> code.
Above Post Footer
If you require to add widget before your post footer, just find <div class='post-footer'> and add your code above that code.
Note: If you see a line similar to <div style='clear: both;'/> tag right after the <data:post.body/> tag, then you gotta place this code snippet right after the <div style='clear: both;'/>.Inside Post Footer
If you find a way to add widget into post footer, find <div class='post-footer-line post-footer-line-1'> and add your widget code below that line.
Above Comment Form
Do you need to place widget just above comment form? Just find the code snippet similar below in your template and add your element code right above that. You will encounter two findings when you searching for below code, but make sure to select the code snippet most similar to below one.
<h4 id='comment-post-message'><data:postCommentMsg/></h4>8. Now Save template.
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
Enjoy :-)
