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

Helper Blogger

Blogger Widgets | Templates | Tutorials

    • Latest

    Sunday 8 January 2012

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

    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....
    Tags
    Share This
    Author Image

    About Rahul

    By -
    Labels:

    23 comments:

    1. paschal22 May 2012 at 21:42

      thnks it really awasome thnks for this

      ReplyDelete
    2. paschal23 May 2012 at 03:16

      tried it dnt work help

      ReplyDelete
      Replies
      1. Rahul23 May 2012 at 21:09

        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. Anonymous24 May 2012 at 16:14

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

      ReplyDelete
    4. Abdul Wali25 May 2012 at 19:17

      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. Rahul25 May 2012 at 19:47

        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. Sreeraj Melath30 May 2012 at 14:54

      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. Unknown29 June 2012 at 17:53

      Thanks for posting this tutorial bro..

      http://www.lifebeyondlimits.info/

      ReplyDelete
    7. StopAudio17 July 2012 at 23:46

      This comment has been removed by the author.

      ReplyDelete
    8. StopAudio17 July 2012 at 23:47

      great tutorial kep update it this tutorial

      How To Make Money

      ReplyDelete
    9. IndiCartel4 October 2012 at 02:55

      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. Anonymous16 October 2012 at 23:53

      Good post, Successfully done

      ReplyDelete
    11. Unknown18 October 2012 at 12:31

      http://smssentonly.blogspot.in/

      ReplyDelete
    12. Unknown3 November 2012 at 20:53

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

      ReplyDelete
    13. maw221427 November 2012 at 15:15

      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. Unknown7 December 2012 at 12:03

      dude not wotking

      ReplyDelete
    15. Darktinker1239 December 2012 at 15:39

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

      ReplyDelete
    16. Unknown30 December 2012 at 11:57

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

      ReplyDelete
    17. Anonymous4 February 2013 at 20:53

      Thanks

      ReplyDelete
    18. Blogger14 February 2013 at 19:07

      This comment has been removed by the author.

      ReplyDelete
    19. xxxxvb19 February 2013 at 12:47

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

      ReplyDelete
    20. Unknown2 March 2013 at 16:45

      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
    21. Unknown13 March 2013 at 12:33

      For the onclick features.. Please update..

      Your code..
      onclick="this.focusundefined);this.selectundefined)" readonly value="Paste Encoded Code Here" />

      Repaired code..
      onclick="this.focus(undefined);this.select(undefined)" readonly value="Paste Encoded Code Here" />

      Thank you. This widget is great :)

      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

    Subscribe to: Post Comments (Atom)

    Author Details

    Hello Reader. This is Rahul, the author of Helper Blogger. Hope you have found this content useful. Do follow us on social media to stay updated with our latest widgets and tutorials. Also, don't forget to share this post using share buttons located just above.