Saturday, April 1, 2017

How to Make a Blog Button and Grab Box



  Hello! Today I'm going to show you how to make a button for your blog, and a grab box to go with it. It's kinda complicated, but I'll try to put in in lots of easy steps. If you get stuck, just leave a comment below!
  "What is a blog-button anyway", you may ask? Well, a blog button is a small picture with a link to your blog. You can design it however you want, and then put it on the side of your blog. If you have friends with blogs, you can do button swaps, where you put each-others buttons on your blogs. That way, you will be advertising for each other. A grab-box is a small box underneath of your button, with the html code for it. That way, if people like you blog, they can "grab" your button, and put it on their blog!

Well, let's begin!
~ Designing it~

I will be showing you how to do this using the free version of PicMonkey. Begin by choosing the "edit" option and picking a random photo off of your computer. This picture won't actually show, we'll be covering it.




  Now, go to "canvas color", and choose a color for your background. 


Then go to "resize" and change it to 200x200. You may need to un-check the "keep the proportion" box.  Now you should have a small square.


Next, to add a picture, go to "overlays" and click to add your own. Pick out your picture.


Move it around, make it bigger- get it just how you like it.


(In case you noticed that my background is white now, I just changed it because I didn't want pink on pink.)

If you want to change the color of your overlay, you can do it here. You can also make it darker using "blend modes" if you want.


Now you can add text. Anything else you want to change? When you are done, click, save.


~Making the grab-box~
For this step, your picture will need a link. To do this, go to PhotoBucket, and sign in or make an account. Upload your button picture.  We'll come back to that in a minute.

For now, copy this code:

<div align="center">
<a href="BLOG URL" target="_blank"><form><textarea rows="3" cols="17">&lt;center&gt;&lt;a href="BLOG URL" target="_blank"&gt;&lt;img alt="BLOGNAME" src="PICTURE LINK
"/&gt;&lt;/a&gt;&lt;/center&gt;</textarea></form></a></div>

 If you use Blogger, I suggest going to layout, creating an HTML/JavaScript gadget, and pasting it there.

Good! Now, there are a few things to change!
See where it says BLOG NAME? Replace that with the name of your blog. And replace BLOG URL with your blog URL,(. There are 2 BLOG URL spots to change.)



Lastly, go to photobucket, click on your button picture, and copy the direct link. (See pic below!)

Back to the gadget. Erase where it says PICTURELINK and put in the direct link you just copied. 



Good! Save, and then check your blog to see if you have a grab-box on your blog now.

~Installing Your Button~
Now, all you have to do is highlight and copy the code that is in your grab-box on your blog, and paste it into a new HTML/JavaScript gadget. Make that gadget right above your grab-box gadget.

Great! Now you should have a button and grab-box on your blog! If you need any help, just comment below or email me (see CONTACT page).
-Laura

2 comments:

  1. Great post! I do need to make a button sometime, so this is so helpful!!

    ReplyDelete

Feel free to leave a comment!