Add Widget to provide Button-Link to your Blog. ~ The Blog Doctor.
Loading...

Add Widget to provide Button-Link to your Blog.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

You can now add a widget to your blog with a button which when clicked adds a button link to your blog from the reader's blog. This is done automatically without the reader having to type in even a line of code.....

First create a button by going to http://cooltext.com/Buttons and create a button for your blog. Then upload this button picture to a freehost like Googlepages and copy down the url of the picture. Let us call it : URL OF YOUR BUTTON PICTURE.


To do this go to Layout from the Dashboard after logging in to your account. In the Page Elements section click on Add Page Element link in the sidebar. In the new pop up window which opens choose Html/Javascript option. In the content section paste the following code :

<form action="http://beta.blogger.com/add-widget" method="POST">

<input value="FAVOURITE" name="widget.title" type="hidden"/>

<textarea style="display:none;" name="widget.content">





</textarea>
<input
value="http://buzz.blogger.com" name="infoUrl" type="hidden"/>

<input
value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/>

<input value="LINK TO THIS SITE" name="go" type="submit"/>
</form>
<p>Click above button to get a button link to this blog</p>


In the middle code replace the Capital letters with the appropriate values. Add all the above code in blue including the code in the middle picture. Click on picture to enlarge it. Then save the widget.

View blog. You will see below button in your sidebar:





When a reader clicks on this button he is taken to a page where he has to select his blog where he wants to add the link to your blog as shown below :




Here the reader can change the Title and edit the content if he/she wants. On clicking Add Page Element the link is added to the Page Elements tab in the sidebar of his blog. He/She can then rearrange its location in the blog by drag and drop method.

Using this method I have added it to my blog in the right sidebar at the bottom.




Technorati Tags:, , , ,

28 comments:

Kathleen B. Jones said...

Oh, a thousand thanks for all the helpful suggestions on this site. Your work helps those of us--such as myself--who are new and can easily feel defeated by the extent of what must be understood to move from a simple template to an exciting blog. THANKS!

atchik said...

;-( i tried this out but i couldn't get it to work in my blog. I'll try to do it again, see if it works. Hope it does.

thanks for all the other helpful articles. Expandable post summaries are really great!

Jagan said...

Thanq very much. I could do this successfully.

iloveupstate.com said...

Your site is so informative...I am so humbled! :)

DISCOVER said...

hey, thanks for the great codes. But see when i used it i got a problem, when the link was addded to any of the other blogs it wouldnt owrk properly. for example if i add that link to www.discoverpradeep.blogspot.com,from www.discoversongs.blogspot.com, i will get the link such as www.discoverpradeep.blogspot.com/www.discoversongs.blogspot.com

Can you figur out please whats wrong ?
REgards
www.discoversongs.blogspot.com

vin said...

DISCOVER,

Just check the code in your widget by clicking the ADD button and then expanding the link to see the code on that popup page. Correct that and you will be OK.

DISCOVER said...

I cant get it. can you help me please. My blog is www.discoversongs.blogspot.com
can you please create the codes and put it into my comment section.
Thanks

vin said...

Discover,

You will first have to create a button graphic. Then upload it to a free host and get it's link.

Then just follow the steps above in sequence. Let me know if there are any error messages.

modmom said...

i can't find "layout" from my dashboard. where is it please?

vin said...

Modmom,

If you have a Classic template you will not have the Layout link on the Dashboard. To get it upgrade to Layout template :

Upgrade to Layout

golf-tripper said...

Hey, thanks for all your great posts. It's been very helpful. I have tried using this method over and over without success. I have an uploaded button on google pages and my blog will except this image from the url I list. My link shows up on other blogs, but without the button picture. Any suggestions?

Vin said...

Golf-tripper,

What is your blog address?

golf-tripper said...

http://golfersgames.blogspot.com

Vin said...

Golf-tripper,

Your page source shows this code :

img
src="http://trfoltz.googlepages.com/cooltext79387903.png/cooltext79387903-full;init:.png"

Change it to :

img
src="http://trfoltz.googlepages.com/cooltext79387903.png"

golf-tripper said...

OK, did that. But I am not sure that fixed it.

Vin said...

Golf-tripper,

Did you clear the cache after saving changes and before viewing blog? See :

Clear Cache

Use Firefox Browser.

golf-tripper said...

No, I didn't. I'll try that.

Mang (433rd) said...

Thanks for responding to my post in help. I have a slightly more advanced question. I'd seen a post on how to submit a widget before, but the design and input parts were a bit vague. A concrete example helps.

I have 5 or 6 parameters that I want to use to build the URLs in my widget. The fields include part of the URI path and parameters passed through the URL. There could literally be tens of thousands of instances of this widget.

I'd like these to appear as visible input fields in the form that adds the page element.

Ideally, I'd even like to be able to provide help links to other sites as you could need to check out at least 2-3 sites to get the data for the parameters.

I noticed that even the FAVORITE field shows hidden - so I'm not certain how it shows in the window (unless it's a special field). So I'm a bit unclear on how this is supposed to work.

I also haven't had time to play with it on my test blog yet and probably won' until the weekend.

Thanks

Vin said...

Mang (433rd),

You may contact me anytime. The email address is in middle column.

Stacey said...

can't get the middle part of the code to come up in content part when copy and paste..the rest of blue bit comes up but not middle bit which is supposed to link to my designed button...also google pages it says is closed now so will it work on flickr?

Vin said...

Stacey,

Upload image to Photobucket.com and use the Direct Link of the Image from there.

Stacey said...

Hi Vin still can't get the middle 'box' section of code above to transfer to html box in blog, its the bit thats not blue in white box doesn't transfer as text like blue print, in fact just comes up as blank white space...seems to not transfer as text?have got 'link this site' tocome up on blog but because of this can't have custom button for blog?x

Vin said...

Stacey,

It is an image file. TYPE(not paste) the text in the image as it is into your code.

I had to make an image since if it was typed out the HTML characters would show instead of their code.

Stacey said...

hi vin, managed to get a direct link for button picture and done that, uploaded to photobucket and copied direct link in html.Also have typed text of middle bit in white box as said but just checking in eg. 'alt' text is that a l or a one in between the a and t?also do the couple of spaces matter u put in code in white box?still can't get to work...wondered if on photobucket should use html/code of image it gives u?
Also is there a way for ur button to come up on ur site as button picture or does just come up as link to this site?

Vin said...

Stacey,

Change this part of the code :

<img
src arthistoryrag http://i612.photobucket.com/albums/tt210/7828stacey/cooltext421892237.png="alt="></img
src>

TO THIS :

<img
src="http://i612.photobucket.com/albums/tt210/7828stacey/cooltext421892237.png"/>

Stacey said...

sorry to be complete pain vin but did what u said but when I click the link to this site to check it and add on my site as favourite the button i designed doesn't come up...also is there a way for the 'link to this site' to be replaced by the acctual button i designed for future?x

Vin said...

Stacey,

Still a few errors to correct in the code. Change :
<img
src http://i612.photobucket.com/albums/tt210/7828stacey/cooltext421892237.png=/></img
src>

TO This :

<img
src="http://i612.photobucket.com/albums/tt210/7828stacey/cooltext421892237.png"/>

Pankaj.Explorer said...

Dear Vin,

Could you GUIDE me why the below two lines are used. Are they necessary to keep in the code or we could omit those lines? What are the functions of these HIDDEN ELEMENTS I AM NOT UNDERSTANDING?

input
value="http://buzz.blogger.com" name="infoUrl" type="hidden"/
--
--
input
value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.