How To Insert Bubble Speech Notes In Blogger Post

How to insert bubble speech notes and what is the need of inserting them in blogger post. We will discuss it today because it will be very helpful to increase conversion rate of your blogger blog and also a good way to make the user focus on special points.

I have written two tremendous posts about making user focus which was recommended by many specialists about how to increase conversion rate of blogger blog. You can read this awesome article on here.

10 Psychological blogger design tips to increase conversion rate.

How to make the user focus on special points.

You may have seen such bubble speech notes on many popular websites which talks about web designing so today we are going to find out how they do it and will try to do the same thing for bloggers. Inserting bubble speech notes in blogger post are the best way to get more clicks on links that you insert between blogger post which we also call internal links. So it is a way to increase conversion rate of internal links. Read it in detail here that : -

This bubble speech notes are designed in html and css without using any javascript. So it loads faster and easy to use. Installation is also pretty easy. You just have to copy the css code in your template and then insert html code at the place where you want this bubble to appear. So below we will discuss in detail how to insert bubbles in blogger post.

p.bubbles1{
position: relative; /*see the support section below for more info*/
width: 300px;
color:#fff;
font-style:bold;
text-align:center;/*width of the speech bubble*/
margin-bottom: 30px; /*must be at least the size the triangle we're going to create below*/
/**add a curve to the corners**/
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
/**Give the background a gradient**/
background: #c49bc4; /*required for browsers that don't support gradients*/
background: -webkit-linear-gradient(#7e527f, #c49bc4);
background: -moz-linear-gradient(#7e527f, #c49bc4);
background: -o-linear-gradient(#7e527f, #c49bc4);
background: linear-gradient(#7e527f, #c49bc4);
-pie-background: linear-gradient (#7e527f, #c49bc4); /*use CSS3Pie to make the gradient work in IE9 and lower*/
behavior: url(folder/PIE.htc); /*location of PIE.htc on your server*/
}
/*****CREATE THE TRIANGLE*****/
p.bubbles1:after {
content: "";
position: absolute; /*see the support section below for more info*/
left: 50px; /*position of the triangle from the left edge of the bubble*/
border-width: 25px 25px 0 25px; /*size of the triangle*/
bottom: -25px; /*negative value of the top border width */
border-style: solid;
border-color: #c49bc4 transparent; /*same colour as the lower of the bubble's gradient*/
}

Now place the below html code where you want this widget to appear. And you have to copy only html code always when you have pasted the above css code so below is the html code.

<p class="bubbles1">A Bubble speech notes using CSS for more conversion.</p>