How To Insert Bubble Speech Notes In Blogger Post
How to insert bubble Speech Notes in blogger post. A new widget for blogger to make the user focus on special points and increase conversion rate of a website.
 |
| 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.
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 : -
How to get more clicks on links.
Coding aspects
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.
How to install and use this widget. (CSS Code)
- Go to blogger dashboard .
- Click on edit HTML.
- Now search for ]]></b:skin>
- And copy the below code above this.
CSS Code
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*/
}
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*/
}
HTML Code
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>
Customization
See in html code these lines. "A bubble.....". Change it with your text and you are done.
Such designs make your blogger blog different from others and establishes your blog as a brand. If you want to know that how to make your blogger blog like a brand and get search results traffic than read below article.
7 Blogger branding tactics used by Ana Hoffman of Trafficgenerationcafe
So this is the way to insert bubble speech notes in blogger post or you can say a way to insert an author's note in blogger post.
