How to generate "Link to this page" HTML code ?

 It is very easy to generate HTML links for any webpage based on the page url and page title. The following is a generic piece of code snippet when included in any page of your website will produce a link generator widget. It will automatically create  HTML code which will enable others to copy the code and refer to your site easily. It can be included anywhere in the webpage . You can find this widget displayed in the top right hand side of this blog.

 The code snippet will get the title of the page and the url of the page and store them in separate variables. Then the code create a HTML link code dynamically using two variables namely page url and title . After that it will write the generated HTML link code into a textarea.

Adding to Blogger

• Login into www.blogger.com
• Clicking  on the link with your blog name will take you to blogger dashboard
• In Dashboard click on the layout menu on the left hand side as displayed below

 

• Then click on "Add a Gadget" link and then in the pop up select HTML/JavaScript gadget as shown below.Then all you need is to use the code snippet and your link creator gadget is ready.

Code Snippet

<style>
textarea#styledText {
    border: 3px solid #cccccc;
    padding: 5px;
    font-family: Tahoma, sans-serif;
}
input.styleButton
{
   font-size:12px;
   font-family:Verdana,sans-serif;
   font-weight:bold;
   color:#775555;
   width:107px;
   height:19px;
   border-style:none;
}
</style>
<script type="text/javascript">
var pageTitle=document.title;
var pageUrl=document.location.href;
urlTextValue="<a href=\""+pageUrl+"\">"+pageTitle+"</a>";
document.write("<textarea name=\"styled-textarea\" id=\"styledText\"onfocus=\"setbgcl('#e5fff3');\" onblur=\"setbgcl('white')\">"+urlTextValue+"</textarea>");
function setbgcl(color)
{
document.getElementById("styledText").style.background=color;
}
function SelecTextInTextArea()
{
document.getElementById("styledText").select();
}
</script>
<blockquote><input type="button" value="Select Text" onclick="SelecTextInTextArea()" class="styleButton" title="Select Text"/></blockquote>


Note:- Style elements adapted from here