It’s Wednesday and it’s raining! I can’t take any pretty pictures today to scrapbook….Rain makes me want to stay inside and craft or catch up on my blogging so I thought I would change it up a bit.
I decided to try my hand at making my very first blog button! Since it worked, I thought I would share with my fellow bloggers or anyone that is new to blogging and would like to make a cool badge for themselves or to share with their friends or fellow bloggers. Ever wonder how everybody but you gets to have a cool button on their website? Well, I’m about to share this with you. It was really simple after I figured out just where to place my picture to get the picture URL. I have been trying to find an easy way to do this for a long time and since I know nothing about code or technical skills for programming I was beginning to think I could not do this. I was not about to give up. Today I found a website that takes you through it in 5 easy steps. Everyone says they are easy until I try to do it. Most of it was easy but I had a little bit of a difficult time with how to get my URL to work. I have seen directions on websites to store your photo in flickr or Photobucket, etc. That didn’t seem to work for me. I ended up placing it in my WordPress media section where I keep all of my photos!! It was so easy after that. I really need to create a better looking button but I will save that for a different day. If you don’t know what a blog button is then here it is in a nutshell:
It is a little snippet of code with a cute picture so other bloggers can feature it on their sites.
I put all of the steps below along with some handy pictures to help you along the way! Good luck and comment with your blog address or website so I can visit and grab your badge!
5 simple steps to make a blog button
1. Design your button
Use an image editor on your computer, I designed my button at picmonkey. Most of it is free unless you want one of their Royale designs. You can also use almost any picture so don’t fret about having to design anything yourself. There are lots of YouTube videos on how to use editors (Picmonkey, Photoshop, etc). I may post on how to do that another day. I recommend not making it larger than 200 pixels wide so it fits well in sidebars. Save your image as a .jpg or .png. For our example here, I’m using my logo that I just created for fun. I will definitely have to work on this one to make it prettier. I really just wanted to see if I could do it and I did! YAY!!! Check it out at the top right side of my page.
2. Upload the button
Upload the image to your blog, Flickr, Photobucket or anywhere else you can host the image so that it is accessible by a url. I could not get mine to work from flickr. In my blog, I had to click once on the picture after it was loaded, you don’t want it to open, you only want to then highlight the url in your browser bar, right click to copy. You can also highlight and ctrl + c to copy. Next you will copy that url in the “Your image URL box in the next step. This is my picture URL inside of my media section on my blog: The url is highlighted in yellow. This is what you copy and paste.
3. Use this great “Grab My Button” Code Generator
I used this one:Grab my button. It’s possible you could lose your mind trying to figure out where to copy and paste different snippets of code to make your button work. You don’t need to. Just use this sample below and let it do the thinking for you. Fill in the blanks with your information as shown in my example screen in the next step. Please put in your own url and blog title and do not copy mine….lol
After you hit the orange Preview button at the bottom,it will look like this with your picture and code. You will then click on get code.
After you click on get code, it will take you back to the previous screen and the code will be at the bottom under the preview button:
4. Copy and paste the code into your blog post or a text widget in your sidebar or footer
Click on the preview button to make sure it all looks right. You should see your image and a text box below it with a bunch of code. I didn’t see my image at first, I only saw a windows media player icon which is how I knew I was doing something wrong. You will actually see the picture (picture under step 3) you are trying to create a badge with so if you don’t see your picture, try saving it in another program. Then copy the code from the large (above) box and paste it into your blog post or a text widget in your sidebar or footer.
If you’re using WordPress, you’ll want to drag a text widget to the sidebar or footer on your Widgets page: I use WordPress so I went to my dashboard/ appearance / widgets. Scroll down the widgets until you find one that says “text”. This is the widget you will use. You can title your button and then in the large box below the title, paste in this code and save. It will look like this below:
5. Save and preview the page
When you’re done, it should look something like this:
That’s all there is to it! I know it looks like a lot but it’s really not, I put in quite a few pictures just to help you know what each step should look like.
Check out mine at the top right side of this page. Grab it and post it on your site. I hope this helps my fellow bloggers new to blogging. I will post new “how to’s instructions” as I learn new things. I hope you will follow along and learn with me! If you have any questions or comments, please post them in my comment section or email me at firstname.lastname@example.org.
Thanks for visiting and come back often for more tips and tricks!