Top 4 CSS Style Navigation Menu Bar for Blogger

For having an attractive blog design your blog must have a good navigation menu design.Today i am going to share a beautiful CSS Style navigation Menu bar to blogger blogs. This navigation menu is designed using CSS and HTML only .Jquery menu slow down your blog loading time. So today I am sharing pure CSS and HTML drop down menu for your blogger blog.

How To Add CSS Style Menu Bar In Blogger

• Go to Blogger Dashboard → Layout.
• Click on Add a Gadget → HTML/JavaScript
• Now add the following code and change Red links with yours.

CSS Style Menu Bar 1 :

                                                      

<style>
.nbw-menu li{text-align:right;margin-bottom:15px;line-height:30px;list-style:none; }
.nbw-menu li ul{margin-top:15px}
.nbw-menu a{color:white;background:#009AFF;font-weight:normal;font-size:14px;text-decoration:none;padding:7px 12px;-webkit-transition:all .25s linear;-moz-transition:all .25s linear;transition:all .25s linear}
.nbw-menu a:hover{text-decoration:none;color:#FFFFFF;background:#292929}li.widget ul{list-style:circle}<blockquote>
</style>
<ul class='nbw-menu'>
<li class='cat-item'><a href='#'>Adsense</a></li>
<li class='cat-item'><a href='#'>Announcements</a></li>
<li class='cat-item'><a href='#'>Blogger News</a></li>
<li class='cat-item'><a href='#'>Blogger SEO</a></li>
<li class='cat-item'><a href='#'>Blogger Templates</a></li>
<li class='cat-item'><a href='#'>Blogger Widgets</a></li>
<li class='cat-item'><a href='#'>Blogging Tips</a></li>
</ul>

CSS Style Menu Bar 2 :

<style type="text/css">/* #F93 *//* #C60 */#nbw-cssmenu{border:none;border:0;margin:0;padding:0;font:67.5% 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#nbw-cssmenu ul{background:#DFDFDF;height:50px;list-style:none;margin:0;padding:0;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-box-shadow:inset 0 16px 0 0 rgba(292929);-moz-box-shadow:inset 0 16px 0 0 rgba(292929);box-shadow:inset 0 16px 0 0 rgba(292929)}#nbw-cssmenu li{float:left;padding:0 0 0 15px}#nbw-cssmenu li a{color:#000;display:block;font-weight:normal;line-height:50px;margin:0;padding:0 25px;text-align:center;text-decoration:none}#nbw-cssmenu li a:hover{background:#292929;color:#292929;text-decoration:none;-webkit-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);box-shadow:inset 0 0 7px 2px rgba(292929)}#nbw-cssmenu ul li:hover a{background:#292929;color:#FFF;text-decoration:none}#nbw-cssmenu li ul{display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:200px;z-index:200}#nbw-cssmenu li:hover ul{display:block}#nbw-cssmenu li li{display:block;float:none;margin:0;padding:0;width:200px;background:#292929;/*this is where the rounded corners for the dropdown disappears*/}#nbw-cssmenu li:hover li a{background:none}#nbw-cssmenu li ul a{display:block;height:50px;font-size:12px;font-style:normal;margin:0;padding:0 10px 0 15px;text-align:left}#nbw-cssmenu li ul a:hover,#nbw-cssmenu li ul li:hover a{border:0;color:#292929;text-decoration:none;background:#ffffff;-webkit-box-shadow:inset 0 0 7px 2px rgba(292929);-moz-box-shadow:inset 0 0 7px 2px rgba(292929);box-shadow:inset 0 0 7px 2px rgba(292929)}</style><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIT0vG9BwupcIXxvPX4FqA_-yeRHYHdAj3_wg38F9k9qZDaQPj0LRrHa54ObBGNvBrQlTMG7894LsJDiNiSo7mkU7L82DBN8Yb30z6Pj4LdunVtQpDbcV5n5V2nRqsHEhQwVSGzMqVRFY/h120/newbloggerwidget-blank.gif" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIT0vG9BwupcIXxvPX4FqA_-yeRHYHdAj3_wg38F9k9qZDaQPj0LRrHa54ObBGNvBrQlTMG7894LsJDiNiSo7mkU7L82DBN8Yb30z6Pj4LdunVtQpDbcV5n5V2nRqsHEhQwVSGzMqVRFY/h120/newbloggerwidget-blank.gif" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIT0vG9BwupcIXxvPX4FqA_-yeRHYHdAj3_wg38F9k9qZDaQPj0LRrHa54ObBGNvBrQlTMG7894LsJDiNiSo7mkU7L82DBN8Yb30z6Pj4LdunVtQpDbcV5n5V2nRqsHEhQwVSGzMqVRFY/h120/newbloggerwidget-blank.gif" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->


<!-- customize your menus Links -->

<div id="nbw-cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Menus</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

CSS Style Menu Bar 3 :

<style type="text/css">#nbw-cssmenu ul,#nbw-cssmenu li,#nbw-cssmenu span,#nbw-cssmenu a{margin:0;padding:0;position:relative}#nbw-cssmenu{height:49px;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);border-bottom:2px solid #009AFF;width:auto}#nbw-cssmenu:after,#nbw-cssmenu ul:after{content:'';display:block;clear:both}#nbw-cssmenu a{background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-o-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);background:linear-gradient(top,#fefefe 0%,#ececec 100%);color:#000;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-size:12px;line-height:49px;padding:0 20px;text-decoration:none}#nbw-cssmenu ul{list-style:none}#nbw-cssmenu > ul{float:left}#nbw-cssmenu > ul > li{float:left}#nbw-cssmenu > ul > li > a{color:#000;font-size:12px}#nbw-cssmenu > ul > li:hover:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #009AFF;margin-left:-10px}#nbw-cssmenu > ul > li:first-child > a{border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}#nbw-cssmenu > ul > li.active:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #009AFF;margin-left:-10px}#nbw-cssmenu > ul > li.active > a{-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1);background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%)}#nbw-cssmenu > ul > li:hover > a{background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%);-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}#nbw-cssmenu .has-sub{z-index:1}#nbw-cssmenu .has-sub:hover > ul{display:block}#nbw-cssmenu .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#nbw-cssmenu .has-sub ul li{*margin-bottom:-1px}#nbw-cssmenu .has-sub ul li a{background:#009AFF;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}#nbw-cssmenu .has-sub ul li:hover a{background:#292929}#nbw-cssmenu .has-sub .has-sub:hover > ul{display:block}#nbw-cssmenu .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0}#nbw-cssmenu .has-sub .has-sub ul li a{background:#009AFF; -webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}#nbw-cssmenu .has-sub .has-sub ul li a:hover{background:#292929}</style><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIT0vG9BwupcIXxvPX4FqA_-yeRHYHdAj3_wg38F9k9qZDaQPj0LRrHa54ObBGNvBrQlTMG7894LsJDiNiSo7mkU7L82DBN8Yb30z6Pj4LdunVtQpDbcV5n5V2nRqsHEhQwVSGzMqVRFY/h120/newbloggerwidget-blank.gif" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIT0vG9BwupcIXxvPX4FqA_-yeRHYHdAj3_wg38F9k9qZDaQPj0LRrHa54ObBGNvBrQlTMG7894LsJDiNiSo7mkU7L82DBN8Yb30z6Pj4LdunVtQpDbcV5n5V2nRqsHEhQwVSGzMqVRFY/h120/newbloggerwidget-blank.gif" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIT0vG9BwupcIXxvPX4FqA_-yeRHYHdAj3_wg38F9k9qZDaQPj0LRrHa54ObBGNvBrQlTMG7894LsJDiNiSo7mkU7L82DBN8Yb30z6Pj4LdunVtQpDbcV5n5V2nRqsHEhQwVSGzMqVRFY/h120/newbloggerwidget-blank.gif" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->



<!-- newbloggerwidget -menus Links -->

<div id="nbw-cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

CSS Style Menu Bar 4 :

<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);/* Menu CSS */#newbloggerwidget-cssmenu,#newbloggerwidget-cssmenu > ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrnG0y8zumFhbyGFfwrl8KByaJZxt0IduJjRAyvSWQVtZzuufhiKgclWKn5aA1l_7HWvvI_W-TDx36UnWrRx46yJtI5Io6WPaQohxaeD6qdwS21JTajJtzH8jX7zDnpHXB4ReU-uBwANE/s1600/newbloggerwidget-highlight-bg.png) repeat;padding-bottom:3px;font-family:'Open Sans',sans-serif;font-weight:600}#newbloggerwidget-cssmenu:before,#newbloggerwidget-cssmenu:after,#newbloggerwidget-cssmenu > ul:before,#newbloggerwidget-cssmenu > ul:after{content:'';display:table}#newbloggerwidget-cssmenu:after,#newbloggerwidget-cssmenu > ul:after{clear:both}#newbloggerwidget-cssmenu{width:auto;zoom:1}#newbloggerwidget-cssmenu > ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRE8DUliiye9U_CX2HJFIviKRuWjf6MxzQLPnETncoaZW2a0lQueU6-qhJ9J13BZJAlOnxhOqddAlBw-wzF_TTCyT1brBVsYx7rp0wCC4JONrRvrQYdh6QUaGI6QEONnZdcQ-jIllXMVw/s1600/newbloggerwidget-menu-bg.png) repeat;margin:0;padding:0;position:relative}#newbloggerwidget-cssmenu > ul li{margin:0;padding:0;list-style:none}#newbloggerwidget-cssmenu > ul > li{float:left;position:relative}#newbloggerwidget-cssmenu > ul > li > a{padding:23px 26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;text-shadow:0 -1px 0 #0d0d0d;text-shadow:0 -1px 0 rgba(0,0,0,0.7);line-height:18px}#newbloggerwidget-cssmenu > ul > li:hover > a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrnG0y8zumFhbyGFfwrl8KByaJZxt0IduJjRAyvSWQVtZzuufhiKgclWKn5aA1l_7HWvvI_W-TDx36UnWrRx46yJtI5Io6WPaQohxaeD6qdwS21JTajJtzH8jX7zDnpHXB4ReU-uBwANE/s1600/newbloggerwidget-highlight-bg.png) repeat;text-shadow:0 -1px 0 #97321f;text-shadow:0 -1px 0 rgba(122,42,26,0.64)}#newbloggerwidget-cssmenu > ul > li > a > span{line-height:18px}#newbloggerwidget-cssmenu > ul > li.active > a,#newbloggerwidget-cssmenu > ul > li > a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMo8VaMnPYs2A5fXeuv1DNkTrClXaM8Ezm-Rmjwy8l8MRAv9VhLNU3cob-3h__djNORXL7PIhJ717fiyze09nBdukr-Lph7FC2W0ex6dfqqWGV5uWjgwntKOuRidDQh3a0svoj6YsTphk/s1600/newbloggerwidget-hover.png) repeat}/* Childs */#newbloggerwidget-cssmenu > ul ul{opacity:0;visibility:hidden;position:absolute;top:120px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRE8DUliiye9U_CX2HJFIviKRuWjf6MxzQLPnETncoaZW2a0lQueU6-qhJ9J13BZJAlOnxhOqddAlBw-wzF_TTCyT1brBVsYx7rp0wCC4JONrRvrQYdh6QUaGI6QEONnZdcQ-jIllXMVw/s1600/newbloggerwidget-menu-bg.png) repeat;margin:0;padding:0;z-index:-1}#newbloggerwidget-cssmenu > ul li:hover ul{opacity:1;visibility:visible;margin:0;color:#000;z-index:2;top:64px;left:0}#newbloggerwidget-cssmenu > ul ul:before{content:'';position:absolute;top:-10px;width:100%;height:20px;background:transparent}#newbloggerwidget-cssmenu > ul ul li{list-style:none;padding:0;margin:0;width:100%}#newbloggerwidget-cssmenu > ul ul li a{padding:18px 26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;width:150px;border-left:4px solid transparent;-webkit-transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}#newbloggerwidget-cssmenu > ul ul li a:hover{border-left:4px solid #009AFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMo8VaMnPYs2A5fXeuv1DNkTrClXaM8Ezm-Rmjwy8l8MRAv9VhLNU3cob-3h__djNORXL7PIhJ717fiyze09nBdukr-Lph7FC2W0ex6dfqqWGV5uWjgwntKOuRidDQh3a0svoj6YsTphk/s1600/newbloggerwidget-hover.png) repeat}#newbloggerwidget-cssmenu > ul ul li a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRE8DUliiye9U_CX2HJFIviKRuWjf6MxzQLPnETncoaZW2a0lQueU6-qhJ9J13BZJAlOnxhOqddAlBw-wzF_TTCyT1brBVsYx7rp0wCC4JONrRvrQYdh6QUaGI6QEONnZdcQ-jIllXMVw/s1600/newbloggerwidget-menu-bg.png) repeat}</style><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIT0vG9BwupcIXxvPX4FqA_-yeRHYHdAj3_wg38F9k9qZDaQPj0LRrHa54ObBGNvBrQlTMG7894LsJDiNiSo7mkU7L82DBN8Yb30z6Pj4LdunVtQpDbcV5n5V2nRqsHEhQwVSGzMqVRFY/h120/newbloggerwidget-blank.gif" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIT0vG9BwupcIXxvPX4FqA_-yeRHYHdAj3_wg38F9k9qZDaQPj0LRrHa54ObBGNvBrQlTMG7894LsJDiNiSo7mkU7L82DBN8Yb30z6Pj4LdunVtQpDbcV5n5V2nRqsHEhQwVSGzMqVRFY/h120/newbloggerwidget-blank.gif" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIT0vG9BwupcIXxvPX4FqA_-yeRHYHdAj3_wg38F9k9qZDaQPj0LRrHa54ObBGNvBrQlTMG7894LsJDiNiSo7mkU7L82DBN8Yb30z6Pj4LdunVtQpDbcV5n5V2nRqsHEhQwVSGzMqVRFY/h120/newbloggerwidget-blank.gif" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->



<!--  newbloggerwidget -menus Links -->

<div id="newbloggerwidget-cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Blogger</span></a>
<ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Template</span></a></li>
<li class="last"><a href="#"><span>seo</span></a></li>
<li class="last"><a href="#"><span>blogger</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

Read More

How to Add Stylish Animated Quote in Blogger

Sometimes an article cannot be completed without a proper quote or quotation from an authentic source. People want the news to be accurate and precise. Therefore, they always count on a reliable source. Most of the times we usually share any value point, insipration, quote or anything which we need to show to all of our visitors.Mostly the people which are running tech blogs or inspirational blogs used quotation on daily basis.Quotations we as blogger use in our blogs normally includes press release, some authorities has said some things on their product release or regarding an update of products or service. 

These are animated rotating quote which keeps on rotations and includes lots of effects such as fade in and fade out. See the demo of animate quote below.

Demo

• Blogging is not about earning money. Its about serving the Humanity.
• Don't choose Blogging as your profession, unless you really have no choice!!!
• Education is the most powerful weapon which you can use to change the world.
• It's fine to celebrate success but it is more important to heed the lessons of failure.
• You can't have a light without a dark to stick it in.
• If you think your teacher is tough, wait until you get a boss. He doesn't have tenure.

To add This animated quotes to Blog Follow The Step  :

• Go to Blogger DashBoard → Create a New Post → Click on HTML Tab.

• Now Paste The Bellow Code in Blogger HTML Tab.

<link href="https://googledrive.com/host/0B5gFqOZt0TRhWnp1b1ZkNTRGdVk" rel="stylesheet"></link>
<script src="https://googledrive.com/host/0B5gFqOZt0TRhVmI2dUQ0aGFWWXc" type="text/javascript"></script>
 <script>
 jQuery(document).ready(function($) {
  $('#words').quoteRotator();
 });
 </script>

After adding the above code, you need to add the Bellow HTML code into the Blogger HTML Editor ,so that it would help you in creating rotating and animated quotations. You can also change the animation transaction depending upon your needs.

<---- New Blogger Widget Stylish Quote Rotator ---->
<div id="words">
<ul class="word-container">
<li data-author="---  Satyam Sharma" data-easeout="lightSpeedOut">Blogging is not about earning money.
Its about serving the Humanity.</li>
<li data-author="---  Satyam Sharma">Don't choose Blogging as your profession, unless you really have no choice!!!</li>
<li data-author="---  Satyam Sharma" data-easeout="fadeOutDown">Education is the most powerful weapon which you can use to change the world.</li>
<li data-author="---  Bill Gates (Microsoft)" data-easeout="bounceOut">It's fine to celebrate success but it is more important to heed the lessons of failure.</li>
<li data-author="---  Arlo Guthrie (1947 - )" data-easein="bounceIn">You can't have a light without a dark to stick it in. </li>
<li data-author="---  Bill Gates (Microsoft)" data-easein="lightSpeedIn">If you think your teacher is tough, wait until you get a boss. He doesn't have tenure.</li>
</ul>
<div class="quote">
<div class="quote-content">
</div>
<cite class="quote-author"></cite>
  </div>
</div>

Congratulations: 

Now publish your article and enjoy the magic.

Read More

How To Customize Blogger Label With CSS3 Effects

In this post I will showing cloud Label Widget designs which you can easily integrate within your blog.Tag Clouds are used to display all the categories or labels present in a blog. It has animated hovering effect.

Also Read : Customize Bullet List Style With Image Hover Effect In Blogger

Step 1 :

• Go to Blogger Dashboard → Layout → Add a Gadget → Labels.
• Select Cloud then save it.
• Make changes like bellow image.

Step 2 :

• Go to Blogger Dashboard → Template → Edit HTML.
• Find bellow code.

]]></b:skin>

• Now paste the bellow code above ]]></b:skin> .

/*CSS3 Labels Cloud by New Blogger Widget-------------------------------------- */
.Label a{  background: rgb(0,100,180);
background: -moz-linear-gradient(top,  rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1)));
background: -webkit-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: -o-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: -ms-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 );
display:inline-block;border: 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; line-height:28px; text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.Label a:hover{color:#000 !important; background:#123d60;}
/* NBW End -------------------------------------- */

• Now save your template.
• You done!.

Read More

Awesome CSS3 Social Profile Widget with Zooming and Shrinking Effect for Blogger

This Widget Is Made Using the Concept Of Combined CSS3 Tutorials of Different Sites.So Today I am Sharing stylish CSS3 Social Profile Widget.Its Simple Widget Made Using "CSS3" Effects.

Follow this step to add this widget :

• Go to Blogger Dashboard → Layout Section → Add Gadget → HTML/JavaScript.
• Now paste the Bellow code.

<link rel="stylesheet" href="https://googledrive.com/host/0B5gFqOZt0TRhUW1rTDVmQXRLQlE"/>
<br />
<ul class="ca-menuf">
<li>
<a href="https://facebook.com/newbloggerwidget">
<div class="ca-contentf">
<h2 class="ca-mainf">
Facebook</h2>
<h3 class="ca-subf">
Like Us on Facebook</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menut">
<li>
<a href="https://twitter.com/djsatyamsharma"><div class="ca-contentt">
<h2 class="ca-maint">
Twitter</h2>
<h3 class="ca-subt">
Follow Us on Twitter</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menug">
<li>
<a href="https://plus.google.com/u/0/105202913009091249352"><div class="ca-contentg">
<h2 class="ca-maing">
Google+</h2>
<h3 class="ca-subg">
Add Us on Google+</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menur">
<li>
<a href="https://feedburner.google.com/fb/a/mailverify?uri=newbloggerwidget"><div class="ca-contentr">
<h2 class="ca-mainr">
RSS</h2>
<h3 class="ca-subr">
Subscribe  Us on RSS</h3>
</div>
</a>
</li>
</ul>
<script src="https://googledrive.com/host/0B5gFqOZt0TRhbDduTlFvUkp3Nm8" type="text/javascript"></script>

• Now click on save.

Customization :

• Replace All Highlighted  Colore Facebook , Twitter, Google+, RSS with your Link.

Read More

How to Add Next & Previous Numbered Pagination in Blogger

Blogger is much advanced instead of any other platform because blogger provide everything that you want. You can upload your desire template and make different type of changes in it and you can also make widgets and use them on your blog.Easy user interface is one of the most important feature that every blogger wants in their blogs. It actually help the users to browse the blog easily.

Follow this step :

• Go to Blogger → Template → Edit HTML (before editing backup your template).
• Search For </body>
• Now Paste the bellow code Above </body>.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
var postperpage=5;
var numshowpage=2;
var upPageWord ='« Previous Page';
var downPageWord ='Next Page »';
var urlactivepage=location.href;
var home_page="/";
  /*]]>*/
</script>
<script type='text/javascript'>
  /*<![CDATA[*/
    var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
  /*]]>*/
</script>
</b:if>
</b:if>

• Now Search ]]></b:skin>
• Now paste the code of your choice above ]]></b:skin> .

//* Red Style ---------------------------------------- *//
#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#e74c3c;border:none;border-bottom:3px solid #862B20;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#c0392b;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

//* Blue Style --------------------------------------------------- *//
#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#3498db;border:none;border-bottom:3px solid #246EA0;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2980b9;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

// * Green Style ------------------------------------------ *//
#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#2ecc71;border:none;border-bottom:3px solid #208C4D;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#27ae60;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

• Now save your template.
• You're done check your blog.

Read More

Add Stylish Marquee Notification Bar to Blogger

Notification bar widget is one of the most popular blogger widgets. It also helps in boosting your blog’s traffic by increasing the number of page views of your blog. In this post we will discuss a new and amazing marquee notification bar for blogger blogs with a stylish moving text effect.

                                                                 Click Here To View Demo

Follow this step to add this marquee in blog :

• Go to Blogger → Layout → Add a gadget → HTML/JavaScript.
• Now Paste the bellow code & Save it.

<style>
#nbwnot-cont
{
top:0px;
left:0px;
z-index:9999999;
position:fixed;
width:100%;
background:#222222;
color:#ffffff;
font:16px georgia;
box-shadow:2px 2px 5px  #444444;
-moz-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
}
#nbw-movtext
{
text-align:center;
padding:8px;
font-family:  Verdana,"Times New Roman",Georgia,Serif;
font-size:12px;
color: #ffffff;
}
#nbw-movtext a
{
color:#ffffff;
text-decoration:none;
font:16px georgia;
}
#nbw-movtext a:hover
{
color:yellow;
text-decoration:none;
}

</style>
<div id='nbwnot-cont'>
<div id="nbw-movtext">
<marquee  behavior='alternate' direction="left"
            onmouseover="this.stop();"
            onmouseout="this.start();">
          <p>
<a href='http://newbloggerwidget.blogspot.com/2014/05/how-to-add-support-us-widget-for-blogger.html'>How To Add Support Us Widget For Blogger</a>
|        <a href='http://newbloggerwidget.blogspot.com/2014/05/add-do-you-like-this-story-widget-below.html'>Add Do You Like This Story Widget Below Every Post</a>
|        <a href='http://newbloggerwidget.blogspot.com/2014/05/how-to-add-widget-below-first-post-in.html'>How To Add A Widget Below First Post In Blogger</a>
|        <a href='http://newbloggerwidget.blogspot.com/2014/05/how-to-check-facebook-fake-profile.html'> How To Check Facebook Fake Profile Photo 2014</a>
|        <a href='http://newbloggerwidget.blogspot.com/2014/05/hack-facebook-account-with-phishing-page.html'>How To Hack Facebook Account With Phishing Page 2014</a>
</p>
      </marquee>
</div>
<div>

Features of this marquee :

• It is sticky floating notification bar.
• It is created in HTML and CSS only.
• Light weight code which do not effect you blog’s loading time.
• Stylish and attractive design with moving text effect.

Customize :

• Replace Orange color code with your post titles
• Replace Red color code with links to these posts.

Read More

Stylish Animated Blogger Cloud Labels for Blogger

Today publishing a simple CSS tutorial about customizing blogger label could tags.It is a type of widget that makes your blog more stylish.All the labels are appeared like round ball in Labels box.If you move your cursor, the labels will rotates.This also help blogger to increase their Traffic.I ensure you this widget perfectly works with Firefox, Google Chrome, Safari and other major browsers including IE8+.

Follow this step to add this widget in blog :

• Go to Blogger → Layout → HTML/JavaScript.
• Now add the bellow code & save it.

<div id="cbFlashContent"><p style="display:none;">Flash Labels by <a href="http://newbloggerwidget.blogspot.com/">New Blogger Widget</a></p></div><script type="text/javascript">/*<![CDATA[*/var cbFlashLabelSettings = {    blogurl        : "http://newbloggerwidget.blogspot.com",    color          : "0090ff",    hoverColor     : "FFF",    backgroundColor: "FFFFFF",    size           : 10,    speed          : 150,    width          : 300,    height         : 300,    transparency   : true};/*]]>*/</script><script type="text/javascript" src="https://googledrive.com/host/0B5gFqOZt0TRheFBWNlZMb05fNTg"></script>

Customize :

• Replace Red Highlighted with your blog link.

Read More

How to Add Animated CSS3 Buttons in Blogger 2014

How to add Animated Buttons in Blogger

• Go to Blogger.
• Click on Template
• Edit Template
• Search for  ]]></b:skin>
• Copy the below CSS Code and paste it above ]]></b:skin>

.button {display: inline-block;position: relative;padding: 10px 20px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;text-decoration: none!important;text-shadow: 1px 1px 0 rgba(255,255,255,0.4);font: 15px Calibri,Arial,sans-serif;white-space: nowrap;vertical-align: baseline;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png');background-position: bottom left;background-position: bottom left,top right,0 0,0 0;background-repeat: no-repeat;background-clip: border-box;-webkit-box-shadow: 0 0 1px #fff inset;-moz-box-shadow: 0 0 1px #fff inset;box-shadow: 0 0 1px #fff inset;-webkit-transition: background-position 1s;-moz-transition: background-position 1s;transition: background-position 1s;cursor: pointer;}
.button:hover {background-position: top left;background-position: top left,bottom right,0 0,0 0;}
.button:active {bottom: -1px;}
.button.big {font-size: 30px;}
.button.medium {font-size: 18px;}
.button.small {font-size: 13px;}
.blue.button {border: 1px solid #84acc3!important;color: #0f4b6d!important;background-color: #48b5f2;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1) ),to(rgba(89,208,244,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#4fbbf7),to(#3faeeb));}
.blue.button:hover {background-color: #63c7fe;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1) ),to(rgba(109,217,250,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#63c7fe),to(#58bef7));}
.green.button {border: 1px solid #96a37b!important;color: #345903!important;background-color: #79be1e;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27,#74b317);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(162,211,30,1) ),to(rgba(162,211,30,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#82cc27),to(#74b317));}
.green.button:hover {background-color: #89d228;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31,#7fc01e);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(183,229,45,1) ),to(rgba(183,229,45,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#90de31),to(#7fc01e));}
.orange.button {border: 1px solid #bea280!important;color: #693e0a!important;background-color: #e38d27;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f,#d4821f);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(232,189,45,1) ),to(rgba(232,189,45,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#f1982f),to(#d4821f));}
.orange.button:hover {background-color: #ec9732;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746,#e18f2b);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(241,192,52,1) ),to(rgba(241,192,52,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#f9a746),to(#e18f2b));}
.gray.button {border: 1px solid #a5a5a5!important;color: #525252!important;background-color: #a9adb1;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca,#92989c);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(197,199,202,1) ),to(rgba(197,199,202,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#c5c7ca),to(#92989c));}
.gray.button:hover {background-color: #b6bbc0;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6,#9fa5a9);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhavWtXOd8iwfL4xpnpuFpk-gW6U3uDthqhqO5IZd8eZUuiDgEskrPhJjQ-NgVP4PJ1dpLgQKjwaV7eOx8-teDtbNPShZrpZ6CFrejUF914_ObVlQ0fpA8LZarhQNCfxP3KNel72F5P0w/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(202,205,208,1) ),to(rgba(202,205,208,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#d1d3d6),to(#9fa5a9));}

• Now Save your Template.
• Now Add any of the below HTML Script/Code in Post where you want to appear the Buttons in blog.

Large Size Buttons

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

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

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

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

Mediam Size Buttons

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

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

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

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

Customize

• Replace '#' With your URL.
• Replace 'text' with your text

If any problem comment below.

Read More