Beautiful CSS call to action banner widget for blogger

In the previous post we share the loading effect and now we are going to share call to action widget for blogger. This widget consist of Note, announce, success and  warning  four important and most used call to action button. You can use these call to action widget in Your blog to effectively notify your visitors and to get your attention.   This widget is made of simply With CSS and HTML.  There is no Java Scriptor any other coding language used in this widget. Most of the wordpresss blog have great visuality of call to action button as there are lots of wordpress plugins offer this functionality to wordpress. So, get started to tutorial and grab these call to ation widget for Blogger.  Installation is quite simple and it can be done within two minutes.

Demo

How to add this in Blogger

To add this widget in blogger
Go to template>>backup it and click edit HTML.
Press ctrl+f and find ]]></b:skin>
Place the below CSS code above/before it.

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  }
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
  }


  .message_box {
    margin:15px 0;
  }

  .note {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #FDEBA5;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7ujBz_HABhn07v7Jbrb_qMhK9SYR9kgRZQniMlmc6HVopbyQTeUmx19GQEhyphenhyphen9eAjxkRZ4V5OTPe8tNSzy0krCizFcm2B2bCiSUKKHzDNzqZgiq4rxGou5_2zCTwxUDYC6zXd-3Mj2gvuA/s1600/thumb.png) no-repeat scroll 10px center #FEF4C8;
    padding:.5em 1em .5em 3em;
  }

  .announce {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #BEE5F8;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_Fb0-IVRcg1tzrOWV4eFV6KpxqjF6itvhw5dPuEiMn_F5mZFYUdm-yQr3s8Qy58hY_rTJvJ0W0jhJT42v-DJR9euzTjW7eB0gl30juEGCcrMjSj5ABgS9v3A9nfrofMv2DnfWV4mMRNt/s1600/speaker.png) no-repeat scroll 10px center #D7EFFB;
    padding:.5em 1em .5em 3em;
  }

  .success {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #DEF1BF;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixGlfK46gtAheBgn27M0C6_eCi7kUSlFp1FMDfbONvgMtXRhengRaPrPuLSpqaElg9vh4P3ooV4pfKosIJyrc0ywDlaMEx98xRuAwqsJyXflP-hBcXD39AXPNUVBo9B1AEo9yONKhjtN9i/s1600/tick.png) no-repeat scroll 10px center #E8F6D2;
    padding:.5em 1em .5em 3em;
  }

  .warning {
    color:#666;
    font-family:"Open Sans";
    font-size:16px;
    border:1px solid #FFDBDB;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglCetNGOaGs1s97L21JOvaCmpfXDSY4XyhtucCo9umH3v8cKeo1dYR0kXMiV60AzviyepVHyM6oeY86ihW17tqPHtmpx1tux91xhh8Pbqx8EkAJvZpeiPpZIj2-Lfi7JqYqKJ-yjH9piQ5/s1600/cross.png) no-repeat scroll 10px center #FFE7E7;
    padding:.5em 1em .5em 3em;
  }

Save your template.
Below is the HTML code. Paste the below code in Posts where you want to add it.

 Note Box :

<div class="message_box note">
  Hi, I am Mr.Noter. I'll notify your readers about the news.
</div>

Announce Box :

<div class="message_box announce">
  Mr.Annoucer is having meetup with Blogger Yard's Readers.
</div>

Success Box :

<div class="message_box success">
  Mr.Success. Never give up! A day wil come when you will catch me.
</div>

Warning Box :

<div class="message_box warning">
  Mr.Warner. I will try my best to warn from such worst things.
</div>

Replace the above messages with your own.