3 Drop Oval Shape Bubble Widget For Blogger

Rohan Mod
29 Oct, 2013

3 Drop oval shape bubble widget for blogger. Best way to show author notes in the blogger post. Built in HTML and CSS.

3 Drop Oval Shape Bubble Widget For Blogger
3 Drop Oval Shape Bubble Widget For Blogger

Yesterday we shared how to insert bubble speech notes widget in blogger and today we will share some better design of the bubble widget for blogger. Today we will discuss about the 3 drops means a big bubble with two tail bubbles and its shape will be oval. So this is named as 3 drop oval shape bubble widget for blogger.

Few More Widgets



Some qualities of this bubble widgets


  1. Built in HTML and CSS.
  2. No Javascript.
  3. Fast in loading.
  4. Best way to show author's note in the post.
  5. Helps in more conversion if links are inserted in it.
  6. Very attractive look.




How to add this bubble widget to blogger.


As always we give you ready made widgets for blogger. Where you have to copy and paste the code in your website. We have two codes. First is HTML and the second is CSS code. So below we will learn how to add both of the codes and where to add them to blogger post so that it works.

CSS Code.


Below is step by step process for how to add CSS code and where to add this so that this widget works smoothly.



p.bestavdhoot {
position:relative;
width:400px;
padding:20px 40px;
margin:10px 10px 80px 40px;
background:#f7a944;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#fac868), to(#f3961c));
background:-moz-linear-gradient(#fac868, #f3961c);
background:-o-linear-gradient(#fac868, #f3961c);
background:linear-gradient(#fac868, #f3961c);
-webkit-border-radius:180px;
-moz-border-radius:180px;
border-radius:180px;
-webkit-box-shadow: -3px 4px 8px #989898;
-moz-box-shadow: -3px 4px 8px #989898;
box-shadow: -3px 4px 8px #989898;
color:#575544;
font-size:1em;
letter-spacing:.06em;
}
p.bestavdhoot:before {
content:"";
position:absolute;
bottom:-40px;
left:20px;
background:#f3961c;
width:30px;
height:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
/*add a drop shadow*/
-webkit-box-shadow: -3px 3px 4px #989898;
-moz-box-shadow: -3px 3px 4px #989898;
box-shadow: -3px 3px 8px #989898;
}
p.bestavdhoot:after {
content:"";
position:absolute;
bottom:-55px;
left:0;
width:15px;
height:15px;
background:#f3961c;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
-webkit-box-shadow: -3px 3px 4px #989898;
-moz-box-shadow: -3px 3px 4px #989898;
box-shadow: -3px 3px 8px #989898;
}




  • Go to blogger dashboard .
  • Click on edit HTML.
  • Now search for ]]></b:skin>
  • And copy the below code above this.


    • HTML Code

    Now when you have successfully added the CSS code now it is time to add HTML Code to your blogger post.

    Copy the below HTML code and paste it in the place where you want this widget to appear.

    <p class="bestavdhoot">
    This is a bestavdhoot bubble made with CSS3.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies egestas lacus nec pharetra. Etiam porttitor suscipit iaculis.
    </p>


    Customization


    If you want to customize the content inside this bubble widget then you can edit the content of paragraph and you are done.

    Best blogger widgets

    Popular posts widget for blogger
    Related post widget for blogger
    Chat widget for blogger
    Hammer effect drop down menu widget for blogger


    So this was the 3 drop oval shape bubble widget for blogger. If you liked this widget than please do share and comment.




    Next Post Previous Post