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}

Easter Egg Rainbow Sponge Cake

This week I am participating in a Blog Hop about Delight Directed Education. This has inspired some kitchen experimentation for Easter. This oil sponge cake is a recipe that I grew up with and my mom used all the time.  It has never flopped and always come out just right.  I love it because it does not have an oily flavour it is light and fluffy and very easy to make. We have also used gluten free flours successfully with it.

Ingredients

• 3 Eggs Seperated
• 3/4 cup of Sugar
• 1/2 cup of room temperature water
• 1/2 cup of cooking oil 
• 1 1/2 cups of flour
• 3 teaspoons of baking powder 
• Food colouring of your choice

Method

1. In bowl one beat the egg whites till stiff peaks form
2. In bowl two add sugar to the egg yellow and beat until creamed together.
3. Add in water and oil. Beat until well aerated.
4. Add in the dry ingredients
5. Mix well
6. Add in the stiff egg whites
7. Fold in
8. Choose four colours (or more if you wish) and put 10 ml into each bowl
9. Divided the cake mix evenly between each colour and Mix well.  Allow to stand for two min.

• Pour the coloured batter into a greased baking pan. We used Wilton Cake Release.
• Form layers of colour until all the batter is in the tin.
• Place in 180'C oven 
• Bake for 30 - 45 min until golden brown and a cake skewer comes out clean
• Turn out on a cooling rack and allow to completely cool
• Make up your favourite icing (we used butter icing) and decorate your cake.
• Enjoy

We all enjoyed the fruit of our labour and as you can see we enjoyed taste testing as we baked.

What is your favourite sponge cake recipe ?

Blessings
Chareen

This post is linking to Try a New Recipe Tuesday.

Angry Bird Cake Tutorial

This weekend was my Mom's birthday and she asked for an Angry Birds cake.  We chose Stella (Pink Bird) as our inspiration. My sister has been making Angry Birds cakes for a while and agreed to let me photograph and share the process with you.  It was not as hard as I had imagined and all you need is time and patience.

Making the Angry Bird cake Beak and Tail 

The process starts a week before (longer if you live in a humid climate) with the making of the beak and tail.

• You need to use a powdered hardener (Cake Art Tylose Powder) in the fondant. Mix it in well before you add in the coloured powder. 
• Use fondant to form a trapezoid shape out of yellow coloured fondant. Once you have your desired shape use a rolling pin to flatten/neaten all the sides.  Use a pair of kitchen scissors to snip 3/4 way down the beak.  Bend the beak open. We used two cooking essence bottles to support the beak until it was dry.  The completed beak is 2.5" (6.5cm) tall, a base of around 2" and a tip of about 1".  The base of the beak is square.
• Use fondant and colour it black then form a tail (this is where all those years of playing with play dough come in handy!)  After two hours push a bamboo skewer into the tail and two into the beak.  Leave in a dry area to dry and harden.  Do not place in a sealed container as it will 'sweat' and not harden. It needs good air circulation to harden off.

Making the Angry Bird cake body

• We used an 8 inch (20cm) round cake tin. You will need enough round cakes that when stacked are about 8" high.  
• Place two cakes bottom side together on the base, cut the mound off the top one then added the next cake and finally finish with the fourth. 
• Leave the 'mound' in tact to form the crown of the head.  
• Using a bread knife sculpt your cake to form the head of your Angry Bird.

• Make some butter icing  the same colour as the cake you are making add in a little more milk to make it a runny consistency.  Use some of this icing or jam to glue your layers together.  
• Place your sculpted cake on a cake board of your choice. Do a light coating of the mix over the outside of  the cake to seal the sculpted cake in preparation to ice. 
• Make a thicker butter icing (YouTube).
• We used a star tip and pink icing and started at the top of the cake and worked our way to the bottom in a circular pattern around the cake.  To make it easier to ice we placed the cake board onto a container on top of my Lazy Susan. 
• We used a grass tip to ice the grass. (YouTube)

Finishing Touches for the Angry Bird Cake

• Fix the beak and tail onto the cake using the skewers. Using the pink icing ice around the edges to finish off.
• Roll out white fondant icing and using a round wavy 2.5" circular cookie/scone cutter cut out two eyes and place on cake.  
• Mix some black butter icing and using a thin round icing nozzle pipe in face detail. Pipe on the eye and eyelashes. 
• Change to a thicker nozzle pipe on the eye brow.
• For the hair we used a party table center piece which we purchased from the local grocery store in the party section. Using a pencil wrap the wire around to form curls. Remove from it's case and wrap the ends in clingfilm before tying on the ribbon.
• We used two different types of 1" wide ribbon to make the bow. A light pink and a thicker white ribbon. These were layered one on top of the other and tied around the hair. This was then inserted in the top of the cake. Once in the cake the ribbon was cut to the desired length.
• We used pre-purchased royal icing roses and placed these on the lawn around the cake.

Completed product

Enjoy the finished product.
Blessings
Chareen

A little inspiration for you.  Here are three other Angry Birds Cakes my sister made last year.

This post is part of The Schoolhouse Review Crew Blog Cruise : Recipe Share. Take some time and pop on over and be inspired.. and Try a New Recipe Tuesday.