BBBB, Grab Buttons for Your Sidebar

Come on in! I'm glad you came. Welcome to my blog and welcome to another installment in the Building a Better Beauty Blog series. The BBBB series is a collaboration with Laurie from the The Makeup Squid. She has written some excellent articles on blog content and organization. You can find a list of all the posts in this series by clicking the BBBB tab just under the header.

FINE PRINT: Beauty bloggers come from all walks of life and have varying degrees of computer knowledge. There is no way to write a single post for all of the different levels of knowledge. In order to provide everyone with the most detailed explanation possible, this post is written as if I am instructing a brand new blogger about this element of blog design. After all, if a blogger is seeking information this post would be of no benefit to them if I left them with more questions than answers. If you have some knowledge of blog design feel free to skim this post and use it as pictorial instructions as it is possible that I could cover an aspect of design that you had not considered before. If you are extremely familiar with this topic please feel free to leave me a comment so that I may learn from your experience. 

In this post we are going to an option to the Blog List widget available through Blogger. As you can see below the Blog List from Blogger is quite generic. The only useful thing is that it does provide you with the each blog's last post and how recently the post was written. It's a handy feature but it just looks so boring. 

Blog List gadget

Personally, I prefer Grab Buttons as they have more character and personality. The only draw back is that it doesn't provide you with any post information. However, if I am looking for new blogs to read I am going to click on the link or the button to actually visit the blog in order to determine if I like their content or not. Below is a picture of my Grab Button. The actual Grab Button is located in the middle of my sidebar. If another blogger wants to add my Grab Button to their blog they would need the code located in the box below the button.

Grab Button

You can grab the code by placing your mouse in the box below the Grab Button and then clicking once. Then hit CTRL and the A (for all) keys at the same time.

Click in box and then hit CTRL and A at the same time

This will highlight all of the text in the box to ensure that you are not missing parts of it. You know that you've done this if your text in the box turns blue. Then you will want to hit CTRL and C to copy the text on your computer's virtual clipboard. Then visit Layout in Blogger.

Selecting Layout to add a Gadget

Then click on Add a Gadget in your sidebar. 

Adding a Gadget to your Sidebar

Choose add HTML/Java Script from the list.

Choosing HTML/Java Script from a list of Gadgets

Then paste the code from your computer's clipboard by clicking inside the content box and hitting CTRL and V on your keyboard at the time time. It will automatically enter the code into the box. 

Adding Grab Button HTML to a sidebar

Now here's were you have a decision to make. If you want Blogger to add text above the picture then type whatever you would like it to say into the title box. The word TRANSLATE is the picture below is an example of a title. 

Translate box with TRANSLATE title

I see no need to add a title above a Grab Button. A bloggers Grab Button should already include text leaving no need to add a title. 

Once you hit the SAVE button you have added another bloggers Grab Button to your blog. Now if you would like to add more than one Grab Button to your blog you can do so by utilizing the same HTML/Java Script box. So after you have added the first Grab Button but before you hit SAVE, open a new window in your browser and visit the second blog from which you would like to add their Grab Button. Find their Grab Button, then click in the text box below their button and hit CTRL and A (for all) to highlight all of the code in blue. Then hit CTRL and C to copy the text. Come back to the HTML/Java Script box. Before you paste the second code into the box you will want to type the following into the box AFTER the first code. <br/>

Add a <br/> break in between Grab Buttons

This stands for break and it adds one line of space in between the first and the second Grab Buttons. As you can see in the example below there is no space in between the Grab Buttons. You will also notice that the Grab Buttons are all several different sizes. 

Grab Buttons of different sizes and without <br/> breaks

So let's address how you can make your Grab Buttons uniform in size in order to keep your sidebar looking neat and organized. You can add a specific height and width to any image by altering the HTML. It sounds scary but it's actually quite easy. You will enter height="200" width="200" after the image source which looks like this <img src="https://webaddressofimage.ext" height="200" width="200" alt="name" style="border:none;"/>. Some of the options after the img src might be a little different; but that is nothing to worry about. Do not delete any of those options, insert the height and width as an additional option. 

Adding uniform height and width to Grab Buttons

Now, you may need to play around with the size of the Grab Button a few times to determine what size works best for your sidebar. The larger images in my sidebar are 250 and the smaller images are 125. Now this is where I will respectfully request that Grab Buttons should be square images. This ensures that the image can be easily resized without skewing the image because the height and the width are the same for a square image. If the image is not square it takes several attempts to get the height-width ration correct.

Uniformly sized and spaced Grab Buttons

You might be asking yourself why I have two sizes of Grab Buttons on my blog. For me, if a blogger chooses to swap buttons with me then my Grab Button appears on their blog and theirs appears on mine. Those bloggers are given larger space on my blog. The smaller buttons are blogs that I enjoy reading but my button does not appear on their blog. 

Let me further explain how I manage two different sizes of Grab Buttons. The larger buttons are in a single column and that gadget has the title 'Blogs to Read'. The smaller columns on the right and the left have no title because I don't words between the large and small buttons. I will also explain that all of my larger buttons are in one gadget box with a <br/> in between each of them. The same goes for all of the smaller buttons on the left and the same for the smaller buttons on the right. Therefore, I have 3 different gadgets containing Grab Buttons. 

Thank you so much for sticking with me during this tutorial. I hope this addresses some of the problems you may experience when installing other blogger's Grab Buttons on your blog. In the next post I will discuss how to create your very own Grab Button and how to add the coding underneath so that other bloggers can add your button to their blog. 

Please remember that all posts in the Building a Better Beauty Blog from both Laurie and myself can be found in the tab at the top of my blog. Please subscribe to both of our blogs to ensure you won't miss any future posts in the BBBB series. If you are an experienced WordPress blogger and would like to join Laurie and I in this series please feel free to leave a comment below. We would love to have the WordPress options available in this series as well. This post has been very long therefore I am choosing to skip my usual blog closure. Please go forth and conquer the world with peace and love.