How To Embed URL,HTML,Forum Links Code below Blogger Posts

Posted by Lasantha Bandara on June 3rd, 2010 File Under : html, seo, widget12 Comments

This tutorial will explain how to create a widget, for your visitors to link back to your article/blogger post.This was created by me(http://www.bloggertipandtrick.net/) and previously I had installed this widget to this site.Many visitors ask from me how to add this widget to their blogger blogs and so I decided to explain it.This widget will show 3 codes (Blog Post URL,HTML code to embed your post to a website,Forum Link to embed your post to a forum) below your blogger post.If you like to add this widget to your blogger blog,then follow the steps given below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>
.about-article{
background-color:#f9f9f9;
padding-bottom:5px;
padding-left:20px;
font-size:11px;
}
.about-article input{
background-color:#ffffff;
}
</style>

4.Now find below code:

<data:post.body/>

5.Copy below code and paste it just after the <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div class=&quot;about-article&quot;&gt;<p>If you find this article useful, please feel free to link to this page from your website or blog.</p>&lt;p class=&quot;noborder&quot;&gt;&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;&lt;/p&gt;&lt;p&gt;&lt;label for=&quot;aa-forum&quot;&gt;HTML Link:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;&lt;/p&gt;&lt;p&gt;
&lt;label for=&quot;aa-forum&quot;&gt;Forum Link:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]/<data:post.title/>[/url]&quot; /&gt;&lt;/p&gt;
<p align='center'><a href='https://www.bloggertipandtrick.net/' style='display:none;' target='_blank'>Widget by BloggerTipAndTrick</a></p>
&lt;/div&gt;<br/>
</b:if>

NOTE : Don't change anything in above code.

6.Save your template and you are done.

File Under : html, seo, widget

12 Responses to “How To Embed URL,HTML,Forum Links Code below Blogger Posts”

  1. Beben says:

    the last out this hack...hihihihi

  2. PinoywarezDL says:

    how to make a embedded code like you do on your post like the notebook background?..

  3. mezzoe blog says:

    thanks very much Mr. Lasantha, i like it this tutorials..

  4. Jaleesa Dorsey says:

    This is great for posts but what about blogger stand alone pages is there a code available for those?

  5. masoodalam51 says:

    thanks sir

  6. fithrah says:

    thank for ur information

  7. K for Knowledge says:

    Hey, I am pleased to learn this from your site.. Thanks your site is awesome

  8. Traffic Exchange says:

    Thanks for the tips. Been looking how to put these codes into my blog.

  9. palak says:

    i used all the step but why my site is not display these embedded link

  10. Jeff says:

    I don't have the code (data:post.body/) for the template I use (yours WPZine)... What should I do then ? Thank you.

  11. Christian Chords says:

    thanks i need it to my blog

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.