Create A Grab Our Button/Badge Widget And Add It To Blogger/Blogspot - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

Sunday, 8 January 2012

Create A Grab Our Button/Badge Widget And Add It To Blogger/Blogspot



Grab our button/badge is a most amazing way to promote your blog via other blogs,Your blog fans or users can easily add this on their blog. 

How To Create A Badge For Your Blog?

  1. Go to Cooltext (Follow the image instructions below )



2. Select PIXEL BADGE. And follow the image instructions below.




3. After you customize all windows hit RENDER LOGO button at bottom left and   
download the image.




4. Upload it and get URL of the downloaded image like .png or .jpg

Code No. 1

<center><div dir="ltr" style="text-align: center;" trbidi="on">
<a href="Blog URL"><img alt="" src="IMAGE URL" title="Title On Mouse Hovering" /></a></div></center>

  • Replace Blog URL with your blog address.
  • Replace IMAGE URL with your uploaded badge url.
  • Replace Title On Mouse Hovering with Title which you want on mouse hovering.

How To Add It On Your Blog - Carefully Add it.....

  • Copy above code after customizing and paste it in Notepad (important)
  • Encode copied code using HTML Code Encoder.
  • Now Careful.....
Code No.2
<center>
<input type="text" onclick="this.focusundefined);this.selectundefined)" readonly value="Paste Encoded Code Here" />
</center>

  • Replace Paste Encoded Code Here with encoded code. 
  • Now go to Blogger Dashboard > Design 
  • Then select Add a Gadget > HTML/JavaScript. 
  • Copy and paste code no.1 just below that paste code no.2 and give title like Grab Our Button 
  • Now save your changes and refresh your blog to see changes. 
Please write comments about this tutorial or tell me any faults which you found while creating and publishing. I will always there to help you....

22 comments:

  1. thnks it really awasome thnks for this

    ReplyDelete
  2. Replies
    1. Hey pls try it again,all codes are correct,follow all steps carefully.If you can't then just give me your badge image URL and Blog URL I will do it for you.

      Delete
  3. please tell me how to add HTML encoding widget to my blog. from where i can get the code

    ReplyDelete
  4. Dear Rahum Ipper, I have also tried it, but I have also not suceeded in making that. please if you can make it for me... I need it urgently. My blog is: http://www.onlineustaad.com and Img url is: http://2.bp.blogspot.com/-MhOwdcx3j18/T7-EmfXBFxI/AAAAAAAAcLI/1lvbvtAXYYw/s1600/Online+Ustaad+Banner.gif

    ReplyDelete
    Replies
    1. here is your code

      <br/><center><div dir="ltr" style="text-align: center;" trbidi="on">
      <a href="http://www.onlineustaad.com/"><img alt="" src="http://2.bp.blogspot.com/-MhOwdcx3j18/T7-EmfXBFxI/AAAAAAAAcLI/1lvbvtAXYYw/s1600/Online+Ustaad+Banner.gif" title="Create This @ helperblogger.com" /></a></div></center><br/>
      <center>
      <input type="text" onclick="this.focus();this.select()" readonly value="&lt;a href=&quot;http://www.onlineustaad.com/&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;http://2.bp.blogspot.com/-MhOwdcx3j18/T7-EmfXBFxI/AAAAAAAAcLI/1lvbvtAXYYw/s1600/Online+Ustaad+Banner.gif&quot; title=&quot;Create This @ helperblogger.com&quot; /&gt;&lt;/a&gt;" />
      </center>

      Delete
  5. hi Rahul , how to make headings in box like you have done "How To Create A Badge For Your Blog?" in this post

    ReplyDelete
  6. Thanks for posting this tutorial bro..

    http://www.lifebeyondlimits.info/

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. great tutorial kep update it this tutorial

    How To Make Money

    ReplyDelete
  9. Just Click It>>> www.free4ualways.blogspot.in
    and enjoy your freebie...

    Like This page>>>www.facebook.com/free4ualways
    to get daily updates...No JOKE It can save your precious MONEY...

    Regards, free4ualways team

    ReplyDelete
  10. Good post, Successfully done

    ReplyDelete
  11. http://smssentonly.blogspot.in/

    ReplyDelete
  12. i have applied this widget in my site.
    http://www.dynamictrick.in

    ReplyDelete
  13. Hello rahul i really like this can you help me the code..here is my image url: https://lh6.googleusercontent.com/-CwCVX2gGQDA/UIjZqdWQVmI/AAAAAAAAGBA/FKCGUG0sdHk/s90/cooltext804396946.gif

    Here is my blog url:
    http://bloggers-hero.blogspot.com

    Thank You.

    ReplyDelete
  14. Thanks man!!! working good just try it again and it will going to work

    ReplyDelete
  15. `Hi rahul i already create my grab image,now i want to know how and where upload it?plz help me

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. cool~~ i like it...
    it works on my blog:http://azuria-freebies.blogspot.com/

    ReplyDelete
  18. Dear Rahul Ippar, I have also tried it, but I have also not suceeded in making that. please if you can make it for me... I need it urgently. My blog is: http://www.mybloggertrikcxz.blogspot.com and Img url is:
    http://2.bp.blogspot.com/-7CdzSb6a-mo/UTHenjS955I/AAAAAAAAAUg/f-IIwu6viuA/s1600/cooltext938943227.gif

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM