Creating a button for your blog is important! In this post you will learn how to make a blog button. If you can get that button onto other blogs, you can generate traffic from it. You may be wondering how to create a blog button. Depending on your level of graphic design skills, you can create a very basic, or very fancy blog button. I am a big fan of the blog button resembling the blog’s header as much as possible. Why? Because people click on your button to get to your site, and they’ll know they are in the right place if your website’s look matches your button’s look. They clicked your button because they liked the way it looks, so try to make your site look that way too! You can also hire someone on Fiverr to make you a nice button for you for $5.
But what if you don’t know how to make a blog button? Well, the truth is, I didn’t either. I like to leave stuff like this to my designer, but every now and then, I can make a basic button if I need one. Here’s a quick little video of me creating a square blog button for one of my blogs in under 3 minutes.
Once you create your button, you have to make it link to your blog! Upload your newly created button file to a server (Photobucket), then use the following html code to make the image a clickable link to your blog:
Copy and paste the code from the box below for easy use. Just replace with your links where shown!
So if a blogger needs your button html code, you would give them the above code.
—————————————————————————————————————-
Now, if you want to have your button on your site and an easy to use html code box right underneath it, in hopes that people grab it and use it, use the following code exactly as shown (this works for both Blogger and WordPress):
You are going to have to manually type this code out exactly as you see it, replacing the red areas with your own text. I recommend typing it in notepad so you can save it and make changes if you need to. Making one mistake will cause the entire code not to work. WordPress simply would not let me display this code as-is for you to copy and paste, so this is the best I could do. This code was pulled from my wife’s button which is working perfectly with the code shown.
There are no intentional “new lines” in the code, just type it all without pressing enter.
That should get you your button above the image with the code box below the image with your button html code in the box. The code was taken from the working button with html box from this site. See the button on the right hand side, toward the top.
And that is how to make a blog button! In a million easy steps! 😀
Did this work for you?
Please say yes.
Thank you so much! This helped a ton! I have found other tutorials on making and putting up blog buttons on my site, but the HTML code box wouldn’t show up under my button with the tutorials I was using before. With this code, it works perfectly! Thanks so much!
Oh yay! This makes my day! Glad it worked! 😀
Thank you, thank you, thank you! I tried at least 3 different websites with tutorials before I found yours – none of them worked! I was getting so frustrated! I so appreciate a well written, straightforward set of directions – which work 🙂
Yay! I’m glad it worked! Thanks for sharing, it keeps me motivated! Your button looks great! 😀
This was super helpful! I thought it was a bit more complicated than that, but you made it seem so simple. Thanks!
No problem! Thanks for stopping by and leaving a comment! Visit often for more great tips and helpful posts!
oh my goodness,thank you!!! i just discovered that blogger changed things so my button text boxes were blank,it was driving me nuts because no one could tell me the new code to use UNTIL YOU!! hooray,thanks a million!
quick question though: all of the code doesn’t fit in my box,so it overflows on my overall blog page,any idea how i can change that? (feel free to email me your response/help,if you can!)
thanks!
happy weekend
Great to hear! I love comments like this! Makes what I do worthwhile! 🙂
Ok, so to make the box bigger, you just have to adjust the height and width px numbers. The code I show says 60px high and 200px wide. Just add a few px to the height or width until it fits just right.
Hope that helps!
how do i/where do i go to change the height/widths?
🙂
thanks,Zack!!!
nevermind,i figured it out 🙂 i asked you before i even looked on my own 🙂
thanks a million for this code and your help!!
you rock!
Awesome! No problem! Thanks for stopping by and keep this site on your radar for more tips and blogging info!
THANK YOU!! I’ve been working with every tutorial I could find and finally with ur code everything looks the way it should! Thank you SO MUCH!
Yay! Glad it helped and thanks for commenting! 🙂
Thank you! This was so helpful! 🙂
No problem! Glad it helped!
Thank you so much! I’d gone to another site to do the button thing and spent and hour trying to get it to work. Thought it must be me. Re-googled and came to your tutorial and got it right the first time in just a couple of minutes! Awesome!
Oh yay! It looks great! One thing I noticed is that your “center” tag at the end of your button’s code is missing the closing “/” at the end.
Thanks. I think I fixed it. Would you mind terribly much checking to see if it’s correct now? I’d really appreciate it.
Yep, looks great now!
I’ve tried several other blog tutorials and codes with no luck. But yours worked on the first try!
All I did differently was change the width to fit my side bar and it worked like a dream.
Thanks!
Awesome! Glad it helped!
WOW! This was amazing! Even when one little thing went wrong I was able to refer back to your site and make sure I did everything right. Thanks so much for post this! I just added two new blog sponsors and next I’ll try adding a grab my button feature. So grateful!
Great to hear! Nice job on landing some sponsors too, hopefully it’s the start of many!
Thank you, Thank you!
I wasted the entire evening trying to work out and after what seemed like 20 tutorials i stumbled upon your tutorial
and within minutes I got it done.
Thanks to you, you are awesome.
God bless!
Oh great to hear! Thanks for leaving a comment! Take a look around the site for more tutorials and tips! 🙂
It did! It did! I just kept trying and trying with the code and kept failing. Finally – yours did the trick. 🙂
Thanks a bundle!
Kate
Awesome! Great to hear! Thanks for leaving a comment! 🙂
It totally works for posting the button! But I’ve tried to see if it takes me back to my page, and it doesn’t. Any idea why?
Looks like you figured it out. Email me if you still need help! zack@morefromyourblog (dot) com
Thank you so much! I’ve tried to create a grab button using at least 5 different website tutorials, and this is the only one where it actually worked! BIG Relief!!! Thanks again!
Awesome! Great to hear it! 😀