Sizing Up My Buttons: An Easy Tutorial for Sizing/Spacing Grab Buttons Equally

Due to waking up this morning around 4:30 wide eyed and feeling rested, I decided to tinker with my blog. For a while now, I've wanted all my blog grab buttons to be more uniform because they were all different sizes and zigged zagged back and forth. I chose to be adventurous and take a risk to try to manipulate the HTML code for my buttons. And...it worked!! Look at the grab buttons I have under Blogs I Read or Use in my sidebar to the left to see an example. So for those of you who are interested in sizing up your buttons, I decided to post my first little tutorial.

There are 3 things to check for if you want uniform buttons. Some buttons might have one element but not another. The elements you want to look at are: sizing, centering, and spacing. In order to change or manipulate any of these elements, you must first click Layout in your menu items on the left hand side of your Blogger page. (These directions are for Blogger, but I'm sure there are very similar options for Wordpress. In fact, I know there are because I helped a friend place her grab button on her Wordpress blog, and the steps were very similar to the ones I followed for Blogger.)  

Sizing Buttons Equally

After pulling up your Layout page, go to your Gadget where your buttons are listed. Find the section of code that corresponds with the button you want to change. It will look like this:

 

<center><a
href="http://n2tching.blogspot.com/"><img border="0"
src="http://i1129.photobucket.com/albums/m514/thesweetlifeofsecondgrade/

LOGOBEST-1.gif"/></a>


To resize each particular button, you will need to insert the following section of code between image type" (i.e. gif", png", jpg") and the code at the very end that reads /></a>:

width="140" height="140"

          

Afterwards, your code should read like this:

 

 

<center><a
href="http://n2tching.blogspot.com/"><img border="0"
src="http://i1129.photobucket.com/albums/m514/thesweetlifeofsecondgrade/
LOGOBEST-1.gif" width="140" height="140"/></a>



Some button codes might have an additional thread of code just after the image type". The code looks like this:

alt="Blog Name"

If this is the case for you, insert the width="140" height="140" between alt="Blog  Name" and /></a> as in the following example.

<div align="center"><a href="http://n2tching.blogspot.com"
title="The Sweet Life of Second Grade" target="_blank"><img
src="http://n2tching.blogspot.com/2013/03/image6-e1363031933286.jpg"
alt="The Sweet Life of Second Grade" width="140" height="140"/></a>

               

You can change the numbers for width and height if you like. I used 140. It's better to use the same number for both so that your buttons will be square.

Spacing Buttons Evenly

Again, you will go to your Layout page, access your Buttons Gadget, and locate the section of code for the button you want to work with. Then, you'll need to add

<center><a

   

as the first line of code above the existing code for the button as in the example below:

<center><a
href="http://n2tching.blogspot.com/"><img border="0"
src="http://i1129.photobucket.com/albums/m514/thesweetlifeofsecondgrade/
LOGOBEST-1.gif" width="140" height="140"/></a>                


Centering Buttons

Follow the same procedures (Layout and Buttons Gadget) as explained above to locate the existing code for the non-centered button you want to move. To center the button, insert the highlighted section of code shown below just before the existing code: href="http://n2tching.blogspot.com".


<div align="center"><a href="http://n2tching.blogspot.com" 
title="The Sweet Life of Second Grade" target="_blank"><img 
src="http://n2tching.blogspot.com/2013/03/image6-e1363031933286.jpg"
alt="The Sweet Life of Second Grade" width="140" height="140"/></a


Well...that's all folks. Hope this tutorial will be helpful to some of you. Please don't hesitate to comment if you have any questions or to let me know if it helped you.


*Thanks for dropping by!

Go Ahead. Grab My Button!

While writing my previous post, I was in the midst of blog button trials and tribulations. I was determined to create myself a cute little button and code for this blog. After several "How To" articles and a number of attempts over a few days at getting it just right, I did it...WooHoo! However, I don't know if I would have been successful if I hadn't stumbled across a couple of very beneficial resources to which I want to give credit. The first was Shabby Blogs where I found the image. They have lots of fabulous freebies for dressing up your blog. Look for their button over there in the sidebar - - - > under my "Button Besties". The other awesome resource I found was a really cool little web app, Grab My Button Code Generator. Here is the link:  http://64b.co/09P. All you have to do is fill-in fields for Blog Title & URL, Image URL, and a few Colors/Code Box Options. It was very easy to use, and it created the code for my button. Then, all I had to do was copy and paste it into the Button Gadget I'd added to my template. 

Now, my next endeavor is to acquire and insert the social media icons for my Facebook, Pinterest, Instagram, and Teachers Pay Teachers accounts. These were supposed to be included with the blog template I purchased. However, I have yet to receive them. I emailed the company today and am waiting to hear back from them. I'll let you know how this goes once I see what kind of response I get from them.

So far, I've really focused on creating the face of my blog. Next, my goals are to concentrate on content, acquiring some followers/comments, and networking. If you have any suggestions, especially in the areas of acquiring followers and networking, I would sincerely appreciate your sharing them.

*Thanks for dropping by!

                  

The Button of My Eye

As a new blogger, something I've had my eye on is my very own button. As a matter of fact, I have spent the better part of the evening trying to figure out how to make it happen. I found a couple of tutorials...neither of which make it seem like a simple thing to do. However if you remember...in my previous post, I explained that I'm a "jump in with both feet" kinda gal which is actually the primary reason for this particular post. The tutorials both explained a couple of options for capturing the desired image's direct Internet link that will be needed to place the button onto my blog. The first was to use an online photo album to store the image which would involve setting up an account, and I really didn't want to spend the extra time doing that tonight. The second option was to publish the chosen image in a blog post and then view the blog. Clicking on the image within my published blog post (in a perfect world) should carry me to a new web address that only displays the image which is where the image's web address can then be copied from the address bar for use in coding my button for others to use. Well....here goes. 

 

 

This is actually only the first step in creating and setting up the button for actual use on my blog. So, I have to publish this post now in order to move on through the rest of the process.

I'll have to let y'all know how it all turns out a little later on. Or, you can stop by tomorrow to see if my cute little button is all set up and ready for use.

*Thanks for dropping by!