How to install “link to us” widget

This is my second tutorial on adding “Link to us” button widget on your blog. However, this one is unlike my first “Grab-this-button” tutorial, where your readers need to copy and paste the button code into their blog.

This method make it simpler for them to import the “Link to us” button to their Blogger blog . It only involves pushing buttons -no code will be displayed, no copy-pasting required.

Here’s how:

 

Installing the “Link to us” widget

1. Login to your Blogger account.
2. Go to Layout > Page Elements.
3. Click Add A Gadget.
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.

   <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">
   &lt;center&gt;&lt;a href="YourBlogUrl"&gt;&lt;img src="YourButtonUrl" title="YourBlogName"&gt;&lt;/a&gt;&lt;/center&gt;
   </textarea>
   <input value="http://bloggersentral.blogspot.com/" name="infoUrl" type="hidden"/> 
   <input value="Grab this button" name="go" type="submit"/>
   </form>
   </center>

    

   Where:

   • 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
7. Click Save.

By now you should be able to see your button / badge / banner with a “Grab this button” button 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:
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 your blog url incorrectly, go back to step 6 to correct it.

 

Enjoy!

 

Before you leave:

• Do you find this article useful? Share it via Tweet This or Add This buttons below.
• Any suggestion, question or comment? Please post it in the comments below.

Open multiple links / windows in a single click

A reader asked if she can make a navigation tab open more than one link when clicked. The answer is YES it can be done, with the help from a small Javascript.

First let’s look at an HTML code for a regular anchor tag <a>:

<a href="YOUR_URL" target="_blank">Link text</a>

When clicked, this code will open YOUR_URL in a new window. To add another link, just add the code below before “>” in the opening tag:

onclick="window.open("YOUR_2nd_URL");"

It will open YOUR_2nd_URL in a second new window. To add more links, simply add more window.open(); before the closing quotation mark.

So if you were to open three links, your anchor will look like this:

<a href="YOUR_URL" target="_blank" onclick="window.open(&quot;&quot;YOUR_2nd_URL&quot;&quot;); window.open(&quot;&quot;YOUR_3rd_URL&quot;&quot;);">Link text</a>

This is an example of an anchor that opens three links (in three windows) in a single click:

<a href="http://bloggersentral.blogspot.com/" target="_blank" onclick="window.open(&quot;http://www.tourism.gov.my/&quot;); window.open(&quot;http://www.tic.kelantan.gov.my/&quot;);">This anchor opens three links in a single click</a>

Now see the code in action, click on it and see what happens.

This anchor opens three links in a single click

Before you apply this new trick, do take into account your readers’ would be reactions. Unless forewarned, I personally would feel tricked if say three windows/tabs pop up when I click something.

Enjoy!

 

Before you leave:

• Do you find this article useful? Share it via Tweet This or Add This buttons below.
• Any suggestion, question or comment? Please post it in the comments below.

Replacing Blogger widget title with an image

If Google brought you here, then you might quickly realize that the gadget / widget titles in the screenshot are not actually titles. They are images, occupying the title slots .

Why do some people put images there when they can do it with texts? Well with text, you only have limited choices of fonts and styling. If you want to use a unique font or styling like in the screenshot, then image is the only way to go. You can make the a title using a graphic software or using an online graphic generator. I made the title at CoolText.com).

Okay back to the tutorial. So how do we go about replacing a Blogger widget title with an image? Here’s how:

1. Login to your to your Blogger account.
2. Go to Dashboard > Layout > Edit HTML.
3. Back up your template.
4. Tick the  Expand Widget Templates checkbox on top right of the HTML window.
5. Use Ctrl+F to search for your gadget title in your HTML code. For example for my translation gadget, the title is “Translate This Page”, so I enter title='Translate This Page' in the search box.

   You may find this set(or something close to this) of codes:

   <b:widget id='HTML1' locked='false' title='YOUR_GADGET_TITLE' type='HTML'>
   <b:includable id='main'>
   <!-- only display title if it's non-empty -->
   <b:if cond='data:title != &quot;&quot;'>
   <h2 class='title'><data:title/></h2>
   </b:if>
   <div class='widget-content'>
   <data:content/>
   </div> 
   <b:include name='quickedit'/>
   </b:includable>
   </b:widget>

6. Replace the data tag <data:title/> with an image tag:

   <img src="YOUR_TITLE_IMAGE_URL" alt="YOUR_GADGET_TITLE"/>

   where YOUR_TITLE_IMAGE_URL is the link to your image file.
7. Preview before saving.
8. Enjoy!

Before you leave:

• Do you find this article useful? Share it via Tweet This or Add This buttons below.
• Any suggestion, question or comment? Please post it in the comments below.