How to add a widget (or a text/link) below or above every post in Blogger - Bloggeriser

How to add a widget (or a text/link) below or above every post in Blogger - Bloggeriser Via Web page There can be many circumstances in which you'd want to add a widget or some text/link at the beginning or end of every post. In this guide, we shall help you do this when you are using the Blogger platform.To have an idea of how the widget would end up appearing on your post pages, either observe the sharing buttons above and below the post on this page itself, or head on to Droidiser, open up any article and observe the sharing buttons and Adsense ad blocks at the beginning and end of each post. There are two ways to go around this: Manually adding the widget code (or the text/link) in every post you want the widget to appear, or automatically adding the widget code for all the posts you've ever written (or will write) on your blog. How to add a Widget manually before/after a post in Blogger: Sign in to your Blogger account and hit Edit button on the post in which you want the widget to appear. In the post editor screen, there are two tabs at the top left of the screen: Compose and HTML. Click the HTML button to see the raw HTML code of the contents of that post. Now, depending on whether you want your widget to appear above your post or below your post, add your HTML code for the widget at the beginning of all the code that's present in the post editor screen. Adding your widget code between two paragraphs will cause it to appear there. Repeat the steps above for as many posts as you wish the widget to appear on. How to add a Widget automatically before/after every post in Blogger: Sign in to your Blogger account and go to Template > Edit HTML. Click one anywhere in the code editor screen. Then press Ctrl. + F and search <data:post.body> in your blog's template. Pressing Enter key will let you scroll through the matches found. In most cases, your template will have more than one instance of data:post.body. If that is the case with you, repeat the steps 4-5 till it works out for you. Add the widget code above the <data:post.body> tag, or below it, depending on whether you want the widget to appear above or below your post contents. In case you want it to appear at both positions, add the same code both above and below the <data:post.body> tag. Doing so will make your code look something like this: In case you want to add an announcement or something of that sort, use the below code as a blueprint in case HTML is not your cup of tea. <span style="font-family:Segoe UI"> <b>Announcement:</b>Enter any text here. <a href="http://YOUR_LINK_HERE">ANCHOR TEXT FOR LINK</a>. </span> A bit more stylized announcement can be created using this code: <div style="background:#33b5e5; border-radius:9px; padding: 10px; color: #fff"> <span style="font-family:Segoe UI"><b>Announcement: </b>This is a text I can edit to make my own customized announcement for my blog. Here is a <a href="http://YOUR_LINK_HERE" style="color:#000">link</a>.</span> </div> The above code will generate an announcement like this: Announcement: This is a text I can edit to make my own customized announcement for my blog. Here is a link. You can obviously change the colors as per you site's theme. Though, if you don't know even that basic HTML, I would suggest you to go ahead and have some quick lessons about it, as they usually come pretty handy for a blogger. Inoreader is a light and fast RSS Reader. Follow us on Twitter and Facebook.