How to: Make your own blog button with a grab box!

sweet electric


 Today, I thought I would show you an easy way of how you can make your own blog button like mine above.
 Blog buttons are a great way of getting your blog 'out there'. By putting a blog button with a grab box on your sidebar, its easy for anyone who likes your blog to put your button on their site or in the case of button swaps it just makes it so much easier!


1. Firstly you need to make a blog button. This can be your blog header resized or you can make one from scratch. If your making one I recommend using picmonkey which is free and easy to use!

I would say a decent sized blog button is around 200px x 150px or anything similar (it really depends on what looks best for your button and blog sidebar.

2. Once you have a button, you need to upload it to a site such as photobucket.

3. Going back to your blog, you need to add the following code into the add html gadget via the layout section of blogger (see below).


4. Add the following code into the html box - Edit: Now updated as the previous coding stopped working!

<div align="center" style="padding: 5px;"><img src="http://i1225.photobucket.com/albums/ee383/styleinmotion8/bannerbutton_zpsa631da71.png"  title="sweet electric" alt="sweet electric" /></div><textarea style="background:#f0f0f0;border:solid 1px #cccccc; color: #777777; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 2px 0 2px 5px; display: block;  width: 90%;">&lt;div align="center">&lt;a href="http://www.sweetelectricblog.com" title="sweet electric"&gt;&lt;img src="http://i1225.photobucket.com/albums/ee383/styleinmotion8/bannerbutton_zpsa631da71.png" alt="sweet electric" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea>

5. In the pink section you need to delete the text and type the link for your blog homepage, for example mine is http://www.sweetelecricblog.com
In the yellow section delete blog name and type in the name of your blog
In the green section you need to delete the text and type in the link to your blog button - if you're using photobucket you need to copy and past the direct link code.

6. Click save and voila!Your blog button and grab box will now be visible on your blog!

*The code will also centre your button in your blog sidebar*









22 comments:

  1. Thank you for doing this! I've bookmarked it, I shall come back to it when I want to make a blog button! x

    ReplyDelete
  2. Just followed this! Thank you so much!!

    abundanceoferica.blogspot.ca

    ReplyDelete
    Replies
    1. no problem erica x

      Delete
  3. this was really useful I've just made a blog button using your tips, thanks very much!
    found your blog through the bbloggers blog hop and am following you :) xx

    ReplyDelete
  4. i need to make myself a blog button when i have the time, thanks for the tutorial - you make it look so easy!
    http://cloudsandcuticleoil.blogspot.co.uk/
    xx

    ReplyDelete
  5. This is such a helpful post! I got my button through my blog design... but you see so many people asking on Twitter for help making them! xx

    ReplyDelete
  6. Thanks for sharing the tip! I'm sure it's going to be helpful.

    Heidi’s Wanderings

    ReplyDelete
  7. Hi thanks so much for your help! I've just uploaded my own buttons. I was just wondering if you knew why I had a "/> and a empty text box come up underneath each button? Not sure where I have gone wrong!

    Thanks
    Sara x

    ReplyDelete
    Replies
    1. hmm I'm not sure off the top of my head but if you email me I will do my best to sort it out for you :)

      Delete
  8. hi thanks so much for this post it really helped me i was just wondering how you learnt HTML and CSS?
    thanks again
    smozzy
    xxx
    http://youonlyliveonceenjoyit.blogspot.co.uk/

    ReplyDelete
    Replies
    1. I taught myself using google and a lot of trial and error haha. I have another blog I practice on xx

      Delete
    2. cool, well youre good at it :) xxx

      Delete
  9. This is so cool! thanks x

    ReplyDelete
  10. Just wanted to say thank you very much i had try at least 10 blog code and none of them work and finally came upon your blog and voila it works and your information was simple and easy your a blessing. Thank you again!!!!

    ReplyDelete
  11. Thank you so so much for sharing this! I made my Girl Nesting Blog button last night and feel so proud to have done it myself - with YOUR HELP! Thank You!!!! XO! www.girlnesting.com to see ;)

    ReplyDelete
  12. Really helpful post. Thank you!

    http://misspippisstyle.blogspot.hu/

    ReplyDelete

Thank you so much for reading!I read every comment and try to respond.If you have a question you can also email me or tweet me @sweetelectric xoxo

Related Posts Plugin for WordPress, Blogger...