Thursday, 13 June 2013

Add "Link To Us" Widget

This is my second tutorial on adding a link exchange button/badge/banner widget to your blog. Unlike my previous link exchange button tutorial, where your readers need to copy and paste the button code into their blog, this method lets them install the button just by clicking a button -no code will be displayed, no copy-pasting required.
Note: This method only imports the button into a Blogger blog.

Installing the “Link to us” widget

  1. Login to your Blogger account.
  2. Go to Design > Page Elements.
  3. Click an Add A Gadget link.
  4. In Add A Gadget window, select HTML/Javascript .
  5. Enter the title of your widget. This is optional.
  6. Copy the code below and paste it inside content box.
    01<center>
    02<img src="YourButtonUrl" value="YourBlogName"/>
    03<form action="http://beta.blogger.com/add-widget"method="POST">
    04<input value="" name="widget.title" type="hidden"/>
    05<textarea style="display:none;" name="widget.content">
    06&lt;center&gt;&lt;a href="YourBlogUrl"&gt;&lt;img src="YourButtonUrl" title="YourBlogName"&gt;&lt;/a&gt;&lt;/center&gt;
    07</textarea>
    08<input value="http://www.bloggersentral.com/"name="infoUrl" type="hidden"/>
    09<input value="Grab this button" name="go" type="submit"/>
    10</form>
    11<span style="font-size: 80%;">Get this <ahref="http://www.bloggersentral.com/2009/11/how-to-install-link-to-us-widget.html">widget</a></span>
    12</center>
    Where: 
    • YourButtonUrl is the link to your link exchange button, badge or banner.
    • YourBlogUrl is the URL of your blog.
    • YourBlogName is the name of your blog
  7. Click Save.
By now you should be able to see your button/badge/banner with a “Grab this button” button right below it, similar to the picture above.

Testing the widget

You want to test whether your link button installs correctly. Your readers will go through this same process when they want to grab your button.
  1. Go ahead click the “Grab this button” button. Add Page Element page will pop up:add page element
  2. Select the button recipient blog and enter the  gadget title (optional).
  3. Click Add Widget button to add the link to us button. You will be transferred to Page Elements page on the recipient blog.
  4. Drag the widget to reposition.

If it installs correctly, you should be able to see your linked button or badge in your recipient blog, similar to the picture above but without the “Grab this button” part.


Testing the button link

To test the link, simply click on the button. The browser should take you back to your blog. If not, you might have entered a wrong URL. Go back to step 6 to correct it.

No comments:

Post a Comment