Making 'Grab my Button' buttons line up

Sometimes when you grab buttons and want to add them to a page they get all jumbled up, different sizes, some are in the center and others to the left. This can be a little quite frustrating.

Tweaking the code to make them all line up is a relatively easy affair because all you need to do is delete code from the new buttons. I am using colour to help you see the parts of the code and what to do to them.







Parts of code and what they mean

<div align="center"><a href="http://www.everybedofroses.blogspot.com.au/" title="Every Bed of Roses" target="_blank"><img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" height="125" alt="Every Bed of Roses"  width="125" /></a></div>

• The blue part of the code tells the button to please stand in the center of where ever you place it. 
• The red part in the code tells the button what size to be. Some buttons come with this some do not.  It's easy to add in.  Add it in near the end of the second last bracket < > before the forward slash /  
• The green part of the code tells the browser to please open in a new tab. 
• The pink part is followed by the internet address for the graphic.
• alt and title - following this is the name of my blog.  If a graphic can't load it will read the words 'Every Bed of Roses'
• A forward slash in HTML means end something.  Instructions always come in two's.  Begin something end something.  That's why there are two brackets in blue

Sample
You add two buttons to your blog and you want them to be the same size, line up next to each other but when you add the next button you end up with this

Tweaking the Code
The secret to making buttons stand next to each other is to remove all the center instructions that come with any new buttons you add. As well as making sure that the heights and widths are all the same.  Here is some sample code for four buttons to stand side by side.  This is what the HTML looks like:

<div align="center"><a href="http://www.everybedofroses.blogspot.com.au/" title="Every Bed of Roses" target="_blank"><img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" height="125" alt="Every Bed of Roses"  width="125" /></a></div>

<div align="center"><a href="http://benandme.com" title="Ben and Me" target="_blank"><img src="http://img.photobucket.com/albums/v71/crabbygirl/blogbuttonfinal2_zps55fc7406.jpg" height = "200" width = "200" alt="Ben and Me" style="border:none;" /></a></div> 

<div align="center"><a href="http://www.everybedofroses.blogspot.com.au/" title="Every Bed of Roses" target="_blank"><img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" height="125" alt="Every Bed of Roses"  width="125" /></a></div>

<div align="center"><a href="http://benandme.com" title="Ben and Me" target="_blank"><img src="http://img.photobucket.com/albums/v71/crabbygirl/blogbuttonfinal2_zps55fc7406.jpg" height = "200" width = "200" alt="Ben and Me" style="border:none;" /></a></div>

• The first <div align="center"> and last </div>  need to stay. All the blue ones need to be deleted. 
• Ben and Me buttons are bigger than I want.  The height and width is currently "200"  I want all my buttons at 125 so I change these manually. 
• Your code now looks like this 

<div align="center"><a href="http://www.everybedofroses.blogspot.com.au/" title="Every Bed of Roses" target="_blank"><img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" height="125" alt="Every Bed of Roses"  width="125" /></a>

<a href="http://benandme.com" title="Ben and Me" target="_blank"><img src="http://img.photobucket.com/albums/v71/crabbygirl/blogbuttonfinal2_zps55fc7406.jpg" height = "125" width = "125" alt="Ben and Me" style="border:none;" /></a>

<a href="http://www.everybedofroses.blogspot.com.au/" title="Every Bed of Roses" target="_blank"><img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" height="125" alt="Every Bed of Roses"  width="125" /></a>

<a href="http://benandme.com" title="Ben and Me" target="_blank"><img src="http://img.photobucket.com/albums/v71/crabbygirl/blogbuttonfinal2_zps55fc7406.jpg" height = "125" width = "125" alt="Ben and Me" style="border:none;" /></a></div>

The result looks like this

 

If you want your buttons to stand next to each other in a narrower column you might need to tweak the size code numbers until you can make your buttons line up.  Be sure to do the widths and heights for all the buttons.

If a button does not come with a width / height code simply add in height = "125" width = "125" near the end of your image code before the last forward slash and bracket < add it here /></a>

Happy button adding.  If you have any trouble leave me a note in the comments and I will be happy to help you. I would love to see the results of your new lined up buttons so leave a link to your blog too.

Blessings
Chareen

Tutorial: Making a Grab My Button

Grab My Button Tutorial

I've had a few requests on how to make a Grab My Button for your blog so I thought I would share a step by step tutorial to make it easier for you. It used to be a fairly straight forward coding but something has changed in the coding world and so I now use a button code generator and tweak it.

Step 1

Your first step is to choose a picture to use.  Most bloggers use square graphics as these are easier to place side by side or one under the other in your side bar.  The average size is 125 px x 125 px. Do not worry about the size of your graphic when creating because we can adjust this in the code.

I used Microsoft Publisher to create my graphic but there are plenty of great FREE tools out there to use.   Two that come to mind are Photoscape and PicMonkey. 

Photoscape is a FREE downloadable tool and is excellent.  I use it to make my photo collages for both here and my instagram.
Pic Monkey is an online mostly FREE tool that is fairly easy to use. 

Be sure to save your pic in a medium to higher resolution as you want a good looking picture not out of focus.

Step 2
There are a number of options to place your button on the web in order to use it.   You can use a free graphic host like Photobucket. If you have a self hosted site you can upload it and grab the HTML to the graphic or you can open a new post in your blog, add the graphic, open the HTML and grab your code from there.

 Here is an example of what this looks like and which code to select.

Check your code by pasting it into your browser and it should open a page with the graphic showing.

Step 3
Now it is time to generate your button code.  I recommend you use "Grab My Button" over at My Cool Realm.  It is very easy to use and generates code for both the Blogger and Word Press platforms.

• Type in your website/blog title.  
• Copy and paste your blog's URL
• Copy and paste the URL of your graphic

I

• If you are blogging on the Blogger platform leave the container type on Textarea.  If you are on a self hosted site or Wordpress then select Pre.
• Click Preview

If you are happy with the preview then click on Get Code. Select copy and add to your widget.

Re-size
When I added the code the graphic was to big and I needed to tweak the code in order for my button to fit in my side bar.  I know that working with code can be a little frightening but I encourage you to give it a go.  The code we want to add is sizing for the graphic.  So I want to tell the browser what size to show my picture so I need to define the width and height.

• When you look at the code it looks like this

<div align="center" style="padding: 5px;"><img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" title="Every Bed of Roses" alt="Every Bed of Roses" /></div><pre style="background: none; border: none; padding: 0;"><textarea style="background:#f0f0f0;border: solid 1px #cccccc; color: #777777; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 7px 0 2px 5px; display: block; width: 90%;">&lt;div align="center">&lt;a href="http://www.everybedofroses.blogspot.com.au/" title="Every Bed of Roses" target="_blank"&gt;&lt;img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" alt="Every Bed of Roses" /&gt;&lt;/a&gt;&lt;/div></textarea></pre>

• img src this tells us where the image is stored
• I wanted my graphic in the side bar to be slightly larger than the standard 125 by 125 pixels so I changed the numbers and previewed it until I was happy with the size.  Add in height="160"  width="160" just before /></div> You can change these numbers to whatever you want them to be as long as your graphic fits in the spot you have placed it.
• Now you need to add in the height and width for the button in your grab text area so when people add it to their blogs the graphic is 125 x 125.  After the second img src add in  height="125" and then width="125" before the last forward slash.
• If your graphic is already made at 125 px by 125 px then there is no need to add in the code.  I add it the height and width when ever I add in buttons to my collection in order to make them all the same width and height.
• With the new code it will look like this

<div align="center" style="padding: 5px;"><img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg"  title="Every Bed of Roses" alt="Every Bed of Roses" height="160"  width="160"/></div><pre style="background: none; border: none; padding: 0;"><textarea style="background:#f0f0f0;border: solid 1px #cccccc; color: #777777; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 7px 0 2px 5px; display: block;  width: 90%;">&lt;div align="center">&lt;a href="http://www.everybedofroses.blogspot.com.au/" title="Every Bed of Roses" target="_blank"&gt;&lt;img src="http://i1180.photobucket.com/albums/x410/everybedofroses/DesignD_-2.jpg" alt="Every Bed of Roses"  height="125" width="125" /&gt;&lt;/a&gt;&lt;/div></textarea></pre>

Time to add it to your blog

• Go to your layout.
• Add a HTML widget
• Copy and paste the code in here.
• Save
• Move the widget to where you want your grab button to be.
• Save your new layout 

If you would like to partake in a button exchange, please grab my button add it to your blog and  leave a comment with a link to your blog. I shall then add you to my Bloggy Friends page. 

This page will be having a make over so be sure to watch for my 6 days of Bloggers to Follow post series starting next Saturday.

• On the crew with me in 2014 {11 January}
• Linky Parties and Blog Rolls for you {18 January}
• Blogs for the Home {25 January}
• Blogs to Encourage Wives and Mothers {1 February}
• Australian Homeschool Blogs {8 Februray}
• Homeschool Bloggers  {15 February}

Blessings
Chareen

Next Blogging tutorial Making 'Grab My Button' buttons line up {22 February}

BLOG DIY - Label drop down box

When I first started blogging and using labels  I quickly realised that my list of labels would be longer than my posts on each page! I love using labels because they help me find my way around my posts. I have recently started a new blog and the label list has been growing so I took some screen shots of the process I used to convert my label list to a drop down list.

I found a very easy add in for blogger on Blogger Sentral.  Here is a photo tutorial of the process described on Bogger Sentral to convert your label list to a drop down list.

Tutorial

• Open your blog dash board
• Make sure you have the Label widget installed on your blog before you begin. (Do this through Layout / Add a widget. )
• Click on Template
• Click on Edit HTML (You are doing this to back up your blog template in case something goes wrong.)

• Click Proceed.

• Tick the Expand Widget Templates box 

• Click anywhere in the code and press Ctrl+A on your keyboard to highlight all (or use your mouse)

• Press Ctrl+c on your keyboard to copy all the code.

• Open Notepad and paste.  Now save and keep code.

Now you are ready to begin.

• Open a new tab on your internet browser 
• Go to Blogger Sentral : Create Drop Down Menu's for Labels
• Click on the get code button < >

• Highlight and copy the code.
• Return back to your blog HTML page.
• NB - Uncheck the Expand Widget Templates box 
• Scroll to the bottom of the Edit HTML box
  
• Look for the following code line    <b:widget id='Label1' locked='false' title='Labels' type='Label'/>

• Replace that line of code with the code you have copied from Blogger Sentral by highlighting the line and clicking Ctrl + V on your keyboard OR  Right click paste after high lighting.

• Click Preview before saving to check that the code is working.

• Click Save.

• Well done.  You have now accomplished the following change and added more space in your right hand column.

Happy Blogging and enjoy your new space!

Blessings

Pin It

DIY Blog - Tabbed Widget

I enjoy surfing the web and webdesign and somewhere in the busyness of wifehood, motherhood, homeschool, sisterhood, daughterhood, friendhood and general life I would love to learn to program in CSS & HTML!  I have enjoyed looking at different blogs and the creative ways in which people do up their little corner of the web to make it their own. 

I have felt a little frustrated (alright I confess: VERY frustrated )in trying to rearrange my little corner of blog world and have spent hours trying to figure out how some of you do the amazing things you do with your blogs.  So I thought I would share with you some of the tips I have learned from other blogs and bloggers along the way.

Tabbed Widget

My new Tabbed Widget

 DIY Steps for blogger:

• Decide which three widgets you want to combine to add into this one tabbed widget.
• Open your Design tab in blogger.
• Make sure you drag and place the three widgets you want to combine to the top of your list
• Edit each widget and make sure you add in a title to each widget.

• Now click Add a Gadget

• Select HTML/Java Script

• Open a new tab in your browser
• Go to Blogger Sentral The Easiest Tabbed Widget
• Scroll down to Installation
• Read the instructions.
• Click on the little button (view source) this will open the code page

• Click anywhere on the page.
• On your keyboard press Ctrl & A together, this will select all the code
• Now press Ctrl & C together, this will copy the code
• Go back to your widget code box, click on the box, now press Ctrl & V together this will paste the code into the box. 

• Click save and it will autoload for you !
• Now at the top of the Design page click Save
• Now click View Blog

If you want to have more than three tabs you can alter the code. For step by step instructions you will need to carefully read the steps in the installation part after the picture of the code on Blogger Sentral Easiest Tabbed Content Widget.

Widget Colum Width

You might need to make the colum your widget resides in wider to accomodate what you are trying to achieve.

To do this you need to:

• Open your blog
• Log in
• Click on Design
• Click on Template Designer
• Click on Adjust widths
• Adjust the width by either dragging the arrow or change the number.
• Click Apply to Blog
• Click View Blog to make sure it is sufficient.

Have fun making your blog tabbed widget.