You have to follow 3 easy steps:
- Create the widget
- Add it to your Blog
- Add an Install-button to your Blog
Step 1: Create the Widget
Go to WeatherReports.com, scroll down and click Add WeatherReports To Your Site.
In the next screen, enter your city, select the colors and style of the weatherbox. After entering all your selections, you will go to the next screen automatically. Take a look at the preview, and select and copy the HTML-code.
Step 2: Add the Widget to your Blog
Add an new HTML page element to the sidebar of your Blog. Paste the code that you copied into the page element, and set its title to "Weather Report".
Don't save it yet, but go to step 3.
Step 3: Add an Install-button
Now we are going to add a button, that installs the widget on your visitors blog when it is clicked. In fact, we'll add a form with several input fields, but only the button will be visible. Here we go.
<form action="http://beta.blogger.com/add-widget" method="post">
<input value="Weather Report" name="widget.title" type="hidden"/>
<textarea style="display:none;" name="widget.content">
<script type="text/javascript" language="javascript1.2" src="http://weatherreports.com/jscript.html?width=125&height=125&theme=brand&location=Amsterdam%2C%20Netherlands&units=c"></script><div><a href="http://www.weatherreports.com/"><small>Free Weather Reports</small></a></div>
</textarea>
<input value="Install to Blog" name="go" type="submit"/>
</form>
The text between the <textarea>-tags is the html of your widget. Please notice that each < is replaced with <, and that each > is replaced with >.
Now save the page element and view your Blog.
For an example look here.
If you want more information on how to add third-party widgets to your blog, take a look at these help pages.
Posts
This is what people say:
Hans,
Welcome back to the blogosphere! And offer people 2 custom widget too! Cheers! Hope to see more widgets from you!
Have a wonderful day,
Hoctro.
Nifty! Viral widgets... That's a good use case.
One quick note is that this may or may not work well with Opera, which doesn't like to send the contents of textareas that are display:none. They may have fixed this by now, but putting visibility:hidden;position:absolute on that text area will be slightly more compatible. :)
Alternately, an input of type hidden.
hi,I am fond of your blog.It teach me a lot.Can you teach me the method of add "read more Summary only" in blog?
My email is boboo.org # gmail.com
Hello,
Very interesting blog. Can you tell me, How can I put this "recent coments" on the right-sidebar?
Tnx
@neanderthalen: read this post
@boboo: read about this in my posts on peek-a-boo posts
dear hans, i am so glad you share with us all your experiments! today I uploaded your super template. Im so happy! The only thing is that ive been having trouble when trying to make the peekaboo work. I have added the "span" thing in the entries but when publicating, nothing happens....will you help me? thanks again SO MUCH! antonia
@unduvaldes: in your post you used <span class="fullpost">. That is wrong, it should be <span id="fullpost">
hans you are my heroe!
muchas gracias!!!
I did as you wrote and it worked great! Thanks, because I am new to all this html and such. I wonder, can we remove the install buttton after or is it only visible to me when i view the blog?
@kystorms: when your visitor clicks the installbutton, the widget will be installed to his blog without the installbutton.
I already add to my blog www.mylivechannel.blogspot.com
Thanks for your info bro...
arnanda70
Share your thoughts!
Feel free to post your questions, remarks and comments here. Moderation is set for this blog, so your comments will appear in due time.
Look who's linking here!
0 Backlinks point here