Saturday, March 21, 2015

Blog Design Elements Made Simple: Blog Button



I've been playing around with my blog a bit lately, as you can see. (The pin it buttons and my first blog button were made for me, though. )
Anyway, I figured out how to do a few things lately, so I thought I'd share them with you.
 
Today, I'll start with an easy way to get the code for your blog button. I had a really hard time with this, but recently found out how to do this through a blog I was looking at.
 
Step 1. If you haven't already, create your image. I usually use picmonkey.com but you can use whatever site you prefer. If you choose to use PicMonkey, here's how I do it. To use a picture for your button background, select edit image. Then, resize it to about 300 x 225, or perhaps a bit smaller. Then, go to frames and click shape cutouts. I would suggest using either the circle or square frames. After that, go ahead and add your text the way you want it, and whatever extras you want on it. Be sure that it all fits. If you don't want to use a picture, click design instead. Pick the color you want for your canvas. The rest of the steps are the same.
Step 2. Go to your blog and start a new page. Put your picture in, then click publish. (Don't worry, this page won't automatically show up for the public to see.) Click view page. Once you're there, right click on the image and click copy. This will give you a link to the image.
Step 3. Go to http://www.mycoolrealm.com/sandbox/gbgen/. There, fill in your blog title and link. Where it says image url, paste the link you got earlier.
Step 4. Play around with the formatting options until it looks like you want. You can preview this as many times as you want. Once you are happy with how it looks, click preview and then get code. Copy the code.
Step 5. To display it on your blog, add an html/java script widget and paste the code in. Or if you would rather have it in a page or post, put it in html. And there you have it!
I know I wrote this like you don't know anything about blogging, but I wanted to make it simple and hopefully leave you with no questions.
 
Here are some buttons I made:
Everything is Blogsome
 
 
The button I made for my friend, Cassie.
Kwant Clan Crafts
 
 The button I made for my mom.
Nurturing the Heart
<div align="center"><a href="http://nurturingtheheart.wordpress.com/" title="Nurturing the Heart" target="_blank"><img src="http://2.bp.blogspot.com/-QdXiIAjRu2k/VQt_aAwdT-I/AAAAAAAAD3c/kbsb19LA4a4/s1600/blogbutton.png" alt="Nurturing the Heart" style="border:none;" /></a></div>
 
 
I hope that post helped you out somewhat!
 
Coming soon: How to Make a Scroll to Top Button 
 
 
 photo chrstine.signature.final_zpsir0dpvxm.png

No comments:

Post a Comment

Hearing from you is the highlight of my day. :)