I did a lot of research to create my blog button and I wanted to make it easy on others by putting all the research that I used into four easy steps. So, here goes nothing!
Step 1: Create the image you want to use for your button
After looking and playing around with many sites, I found that picmonkey.com is by far the easiest and best site to use for this step. Go crazy with it! Create what you want the image to look like. Once you have created the image you want it to show, save it to your computer.
PicMonkey Instructions:
1. Go to picmonkey.com
2. Click on design at the top
3. Design away!
4. Don't forget to resize it to how you want it to look on your blog.
5. Save to your computer as a jpg
Side Note: I created mine in Word then uploaded it to picmonkey and saved it to my computer as a jpg. This is an option if you want a more personalized design.
PicMonkey Instructions:
1. Go to picmonkey.com
2. Click on design at the top
3. Design away!
4. Don't forget to resize it to how you want it to look on your blog.
5. Save to your computer as a jpg
Side Note: I created mine in Word then uploaded it to picmonkey and saved it to my computer as a jpg. This is an option if you want a more personalized design.
Step 2: Upload your image anywhere!
I know that sounds ridiculous but you just need to upload it to something to grab the url link. Once it's uploaded, right click and select "copy url link." Past it somewhere and save it! You're going to need it in the next step!
Side Note: I uploaded mine to my Google+ account. BTW, you don't need to share it, just upload it, grab the URL and X out! Easy peasy! :)
Side Note: I uploaded mine to my Google+ account. BTW, you don't need to share it, just upload it, grab the URL and X out! Easy peasy! :)
Step 3: Onto to the code!
Remember that Image URL I had you save in the last step? You're going to need it here! It looks way more overwhelming than it actually is. I promise! Plus, I tried to make it as easy as possible on you. Copy and paste this and plug your information in where the red text is and VOILA! You now have your code!
<img src="YourImageLink" alt="oddc" /><div style="width: 125px; height: 125px; overflow: auto; border: 1px solid #666666;"><a href=";YourBlogLink"; target=";_self";><img src=";YourImageLinkAgain"; alt=";YourBlogTitle"; width=";125"; height=";125"; /></a></div>
Plug that information in you coding guru you!
Plug that information in you coding guru you!
Step 4: Add it to your blog!
If you are using blogger, go into your template, add a gadget, add HTML and paste your code that you got done making in step 3 into the text box.
Click on layout
Click on "Add a Gadget"
Click on HTML/JavaScript
Now add in that code and click save because you are DONE!
It should have an image and a text box with the code for others to copy and paste and should look a little something like this once you save it.
Not working? Try this!
- Check your quotation marks! Blogger can't use curved quotation marks. It can only handle the straight, small ones. If you have a larger curved quotation mark, delete it and replace it with another quotation mark. Don't worry! When you retype the quotation mark, Blogger will make it how it likes
Did you have a problem and can't seem to figure out where you went wrong? Reach out to me! I'd be happy to help! :)
0 comments:
Post a Comment