June 7, 2011

How to Position Elements on Blogger Post Pages




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 or common 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 Blog Title.

3. Jump to Template tab.


Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click on Edit HTML button.

5. Click Proceed button to continue.

6. Tick on, Expand Widget Templates.

7. 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>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>


8. Now Save template.

Enjoy :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Unknown said...

can i place something after comment form ? to be the last positioned thing

Mayura De Silva said...

Hi Eugeniu,

Read Customize the Attribution in Blogger and add a new element with your widget code or something before the Attribution element.

Cheers...

Unknown said...

This is the best blog post in your website mate. Seriously. This is very useful. I shall re-blog this if you allow. :)

Mayura De Silva said...

Thanks mate :) Here I publish what I've gone through and researched about. Earlier I've allowed republishing exact post. But due to copyright infringements and no attributions, I had to change Terms of Use again. However go through the post, research yourself on your blog and publish a post with your own writing and explanations :)

Cheers...

Kelly @Indiana Inker said...

Thank you so much!! Great instructions.

Mayura De Silva said...

You're welcome Kelly :)

Cheers...

matj said...

Okeyh.


Thanks a lot. :)

Mayura De Silva said...

You're welcome Matj :)


Cheers...

kelly arent{copper roof int} said...

Hi there...just found you on Blogtalk. Stopped over to perhaps learn a thing or two. First...please tell me the difference between and gadget and widget? I need help in a big way!!!

Mayura De Silva said...

Hi Kelly,

Not sure about Blogtalk as I don't remember being there though :)

You can refer to this article to identify the difference ~ What's the Difference Between a Widget and a Gadget?.

Cheers...

Swasthi Blank said...

Thanks for this. it has helped me

Mayura De Silva said...

Hi Swasthi,


You're welcome! Glad it has been helpful :)

Cheers...