How to install “link to us” link exchange 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
- Login to your Blogger account.
- Go to Design > Page Elements.
- Click an Add A Gadget link.
- In Add A Gadget window, select HTML/Javascript .
- Enter the title of your widget. This is optional.
- Copy the code below and paste it inside content box.
<center> <img src="YourButtonUrl" value="YourBlogName"/> <form action="http://beta.blogger.com/add-widget" method="POST"> <input value="" name="widget.title" type="hidden"/> <textarea style="display:none;" name="widget.content"> <center><a href="YourBlogUrl"><img src="YourButtonUrl" title="YourBlogName"></a></center> </textarea> <input value="http://www.bloggersentral.com/" name="infoUrl" type="hidden"/> <input value="Grab this button" name="go" type="submit"/> </form> <span style="font-size: 80%;">Get this <a href="http://www.bloggersentral.com/2009/11/how-to-install-link-to-us-widget.html">widget</a></span> </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
- 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.
- Go ahead click the “Grab this button” button. Add Page Element page will pop up:
- Select the button recipient blog and enter the gadget title (optional).
- Click Add Widget button to add the link to us button. You will be transferred to Page Elements page on the recipient blog.
- 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.
Enjoy!
39 comments to "How to install “link to us” link exchange widget"
I am not sure what part of this code to change the following. Which Lines on this code?
And what is the BUTTON URL?
* YourButtonUrl is the link to the button, badge or banner.
* YourBlogUrl is of course the url of your blog.
* YourBlogName is of course the name of your blog
joey perez,
They're in code line 2 and 5.
You need to host your button, badge or banner on an image host such as Photobucket or Flickr. Then get the direct link to the button. That link becomes YourButtonUrl.
Do you mean change line 8 and not 5. Change bloggersentral to my url which would be conservativeunderground-joey?
joey perez,
Oops I mean line 2 and 6.
"YourButtonUrl" --> as explained in comment no.2
"YourBlogUrl" --> "http://conservativeunderground-joey.blogspot.com/"
"YourBlogName" --> "Simply Reagan"
Thanks for your patience and all of your help. I followed all the instructions you have sent me but it will not work. In line 2 I changed the button url to "http://flickr.com/photos/prvette21/4147118582
I also changed in line 2 the blog name to SIMPLY REAGAN
I changed the above in line 6 and I also changed in this line to my url
I registered on FLICKR this morning and uploaded my button. I right clicked on the button on FLICKER and copied the URL which was
http://flickr.com/photos/prvette21/4147118582
I do see GRAB THIS BUTTON on my blog but not the button I uploaded
I then clicked on GRAB THIS BUTTON and in the new window used TEST for the TITLE.I saved it.
I then clicked on TEST but nothing happens. Sorry for all the inconvenience.
joey perez,
We're nearly there :)
Your button url is incorrect. A direct image url should always ends with the image type extension such as jpg, gif or png.
To get the correct url go back to Flickr, click on the image. Then click on the "All sizes" icon on top of the image.
After that scroll down and you'll see the correct url inside the box under "2.Grab the photo's URL". Copy and use that url.
Got it working my friend, thanks for working me through it. I will now add your link to my Blog as you have proven to be very kind, helpful and informed.
joey perez,
Congratulations! and thanks for the link :)
It works pretty well. I got more than 10 visitor from "Link to us" widget.
Your site is so helpful. I have added a link on my blog at http://tammypanter.blogspot.com
http://tammypanter.blogspot.com/2005/01/other-links.html
Thank you so much!
@Tammy
Thank you for linking.
I just added your website link in my blog. Check it out in the side bar.
@Robin Hood Softwares
Hey thanks!
can you help me in creating a link widget like yours which is exactly same as I linked in my website( I mean your link) but with some large width and height.
I need a help. As you can see a divider between various posts in my blog, I need the same as comment divider. Please help me by creating a script for that.
1. To make a badge, try GRSites Text Boxes
2. Find this code inside your template:
.commentmet_text {
SOME CODE HERE
}
and add this code inside the braces:
background:url(http://4.bp.blogspot.com/_JwD5r652h00/SuttjFcWXkI/AAAAAAAAANg/Ex99MFx60sY/s1600/bar48.gif) no-repeat center bottom;
margin-bottom:10px;
padding-bottom:20px;
Thank you my dear friend. You are great. If you need any softwares or games or any downloadable things, kindly contact me. Also I will add your badge on all my blogs without your permission. Is that Ok?
If I have any doubt in html or codes, I will ask you, dont feel bad to reply or help me. Thanks a lot dear BROTHER.
@Robin Hood Softwares
Yeah it's ok.
Come back and ask questions anytime :)
You are truly amazing, even I made this work! Thank you so much!
Thanks. I try to put your button link at my blog but the image is not working. If you fixed it I will place it at Vida em Sociedade http://vidaemsociedade-sa.blogspot.com/
@Vidaemsociedade
Try the code from How to make a “Grab this” linkback button tutorial.
ok...I give up...
help me....................
What am I doing wrong!?!
@darcie
Could you be more specific as to what the problem is?
a q here:
how if our visitor is not from blogger platform? will they find some problem to add our banner to their blog??
thanks!
@MUXLIMO
Yes they will.
Try this version instead:
How to make a “Grab this” linkback button
That's a great tool and working perfect! http://b21.in
hi bloggercentral i follow the guides you made how to make this link to us button...its great easy to follow dude.thanks big help.just added you
your article is very good... best regards from me..
Thank you for this easy tutorial. I added this widget today, thanks to you. :)
THANK YOU! I've been wanting a button for a long time but had no clue till I followed some thread here (again) learning how to use my image as a button. And it works - took a bit of time on my part due to not being familiar - used Picasa for my button URL which worked. Happened to have a second blogger blog so could test it out on myself. Thanks again.
I like to be here.. This is absolutely the best one!
It appears that this only works for Blogger users. I tried it on www.checklistmag.com and it kept taking me back to my account. I want a code for general use, where anyone could link to my site. Can you help on that one?
@Jude Chukwuemeka
Yeah you're right this tutorial only works for Blogger.
For general use try this tutorial instead.
good.,.,. very Gud Post .,.,.
Thanks much!
Informative Blog !!
Thanks for Sharing
Thank you so much!
.
Thank You So Much..
Your site is so helpful..
.
Thank YOU! I was looking all over for a nice widget for our homeschool blog!
Post a Comment
We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.