CSS3 Bubble Buttons Easy Installation Guide in Blogger.

You may have seen Some Css3 Bubble Buttons for Demo, Download Etc. In some blogs wish to keep such Buttons in your own Blog. Then we are here. Today we will describe Complete Installation Guide of Css3 Bubble Buttons.

As you can see in the above picture there are Big, Medium, Small & Rounded Buttons with four different colors. It Really gives pretty good looks of your blog post. So why not to use it.

• Step 1. Go to Blogger Dashboard >> Template >> Edit HTML
• Step 2. Find the Below code (No need to Click on Black arrow showing in the line of <b:skin>  </b:skin>

</head>

• Step 3. Add below javascript code just above </head>

<link href='https://blogswidget.googlecode.com/svn/tags/bubble.css' rel='stylesheet' type='text/css'/>

• Step 4. Save Your Template. You are Done.

How to Apply in Blogger Posts.

In order to apply it in your Blogger Posts you need to keep some code in your Post Editor. Switch your Post Editor in HTML view and Put below HTML code where you want to put bubble. There are four types of bubble use as your wish.

For Big Buttons.

Big Blue Big Green Big Orange Big Gray

<a href="#" class="button big blue">Big Button</a>

<a href="#" class="button big green">Big Button</a>

<a href="#" class="button big orange">Big Button</a>

<a href="#" class="button big gray">Big Button</a>

For Medium Buttons.

Medium Blue Medium Green Medium Orange Medium Gray

<a href="#" class="button blue medium">Medium Button</a>

<a href="#" class="button green medium">Medium Button</a>

<a href="#" class="button orange medium">Medium Button</a>

<a href="#" class="button gray medium">Medium Button</a>

For Small Buttons

Small Blue Small Green Small Orange Small Gray

<a href="#" class="button small blue">Small Button</a>

<a href="#" class="button small green">Small Button</a>

<a href="#" class="button small orange">Small Button</a>

<a href="#" class="button small gray">Small Button</a>

For Rounded Buttons.

Rounded Green Rounded Blue Rounded Orange Rounded Orange

<a href="#" class="button small green rounded">Rounded</a>

<a href="#" class="button small blue rounded">Rounded</a>

<a href="#" class="button small orange rounded">Rounded Orange</a>

<a href="#" class="button small gray rounded">Rounded Orange</a>

If you want to Keep these buttons in the Middle position just use the code. <center>YOUR BUTTON CODE</center> 

Last Words

You can Change # value as your links. Change Value of "Big Buttons" as per your wish. Such as Live Demo, Download. Etc.

Hope You have successfully applied it on your blog. If you got any confusion then Fell free to ask.

If This Post is helpful for you Don't compromise to waste 5 second to share this posts with your friends.