How To Add Automatic "Read More" Button/Hack in Blogger

Add Automatic Read More Button in Blogger: Although it's not a Big Deal that How To Add Read More Button in Blogger but some new bloggers can't fix this Problem and they are randomly searching for this hack. Let me elaborate it for you People , this Hack just add "read more" option in every post. Actually you may have seen in some Blogger Templates that when you post some contents , it just show the whole contents i.e article from Start to the end but this Hack will wind up the article and will not show the whole article but read more button will be present there. So let's add this read more button in blogger.

How To Add Automatic "Read More" Button/Hack in Blogger

  • Go To Blogger Dashboard
  • EDIT HTML
  • Now Press CTRL+F and Search for </head>
  • Now Copy the below Script and paste it above </head> tag.
 <script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/read-more_auto2.js' type='text/javascript'/>
  • You can change the number in red to your desire number. If a post doesn't have images then the length of the summary will be surely 500. If a post contains image, then of course the text length will be 450, And the 1st image that will be displayed will have these dimensions: width= 120, and height= 100.
  • Now Search for <data:post.body/>
  • Now Copy the Below Script and replace the above mentioned script with the below Script
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/><b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/><b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div><script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");</script>
<div style='clear: both;'/>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read More... <data:post.title/> </a></span></b:if></b:if>
  • Now Save template and that's it ;)

How To Change/Replace Widget's Title with image in Blogger

Change/Replace Widget's Title with image in Blogger : Let's Do Something interesting ! Yep Interesting not much but interesting , today we will replace all widgets titles with an image . Isn't sounds good? Of Course yes.Actually One of our Blog readers ask this Question in Comments "How To Change/Replace Widget's Title with image in Blogger , as you did in your Blog".So I Promised him that I will share the trick with you People and here it is.

How To Change/Replace Widget's Title with image in Blogger

  • Go to Blogger Dashboard
  • Click On Template
  • EDIT HTML
  • CTRL+F and Search for the term "blockquote" in CSS section
  • Now Below Blockquote you will find the below CSS Code/script as shown in the below Snapshot
background: url("image url.png")
  
  • Just Replace that Mentioned Link with your Own Desired image Link
  • And That's it !!
  • For Live Demo You can have a look On my Blog Widgets Titles.
 Note : If background: url is not defined in the CSS You can do it manually just by typing the below script in the CSS as shown above.
background: url("imageurl.png")
So What's Up: Implement this trick if you got any Problem ask any Question freely , I am here to Solve your Problem ;) , Stay Blessed , Happy Blogging!

Add Cool Drop Down Menu in Blogger

Drop Down Navigation Menu For Blogger : You may have seen many drop-down menus but today "ThatsBlogging" will present you an incredible Drop Down menu , which is really a magnificent drop down menu.Actually it is developed by the combination of CSS with HTML . Beautiful Colors combinations are used which makes it more significant drop down menu.Actually , drop down menu makes your blog navigative and easy to expand.This drop down menu is very stylish which means your Blog Beauty will increase by adding this menu.Moreover this menu will not slow your blog loading speed.

How To Add Cool Drop Down Menu in Blogger

  • Go To Blogger Dashboard
  • Click On Template
  • Edit HTML
  • Search For </header>
  • Copy the Below Script and Add it below the Closing Header tag ( </header>)
<div id='menubor'></div><center><ul id='menu'>
<li><a class='hmlink' href='#'>Home</a></li>
<li><a class='winlink' href='#'>Blogger Templates</a></li>
<li><a class='maclink' href='#'>Blogger Widgets</a></li>
<li><a class='andlink' href='#'>How To Tuts</a></li>
<li><a class='gamlink' href='#'>Privacy Policy</a></li>
<li><a class='seclink' href='#'>Guest Post</a></li>
<li><a class='linlink' href='#'>About</a></li>
</ul></center>
<style>
#menu li {
display: inline;
list-style: none;
padding: 0;
}

#menu li a {
padding: 15px 20px 15px 20px;
text-decoration: none;
color:white;
font-family: 'Noto Serif', serif;
-moz-box-shadow: inset 0 0 13px -2px #000;
-webkit-box-shadow: inset 0 0 13px -2px #000;
box-shadow: inset 0 0 13px -2px #000;
font-size:18px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
transition: padding-bottom .666s;
-webkit-transition: padding-bottom .666s;
-moz-transition: padding-bottom .666s;
-o-transition: padding-bottom .666s;
-ms-transition: padding-bottom .666s;


}
#menu li a:hover {

padding-bottom:20px;
}
.hmlink{
background:#24459A;
}
.winlink{
background-color: rgba(9,173,217,1);
}
.maclink{
background-color: rgba(108,109,112,1);
}
.weblink{
background:#EEEE00;
color:black;
}
.andlink{
background-color: rgba(149,191,43,1);
}
.gamlink{
background-color: rgba(212,2,43,1);
}
.seclink{
background-color: rgba(0,158,62,1);
}
.linlink{
background-color: rgb(123, 82, 138);
}
#menubor{
border-top:1px solid black;
margin-bottom:-1px;
}
.header-outer{
padding-bottom:20px;
}
</style>

Changes

  • For Changing the Links Replace # with your Own Links and the Anchor text with your desired text
  • That's it , Save Your template and have fun !
  • If you are interested in adding extra <li> options for that add  <li><a class='desiredword' href='#'>text</a></li> between <ul> and </ul> tags.
  • After implementing the above step ,  you have to define the class in CSS for that define the class between the style container and hit save.
  • If you have any Question ask it freely !! Stay Blessed , Happy Blogging !

Professional Blogger Templates 2014

Download Free Professional Blogger Templates 2014: Cheers to a new year and another chance for us to get it right.Only 2 Months to Go.....2014 is On head , ThatsBlogging is providing the most stunning and unique collection of some Professional and incredible templates! Well as the post is about Professional Blogger Templates 2014 , Professional Blogger Templates will enables you to make your Blog Appearance attractive and Professional.Moreover These templates comes with alot of magnificent features which you can't find easily in other sites/blogs.Of Course these templates are responsive , magazine style , seo and ads ready.....along-with many other properties.All these templates are cleanly coded by Professional Programmers , So waiting for what? Don't You want to make your Blog look appearance fantastic? Don't you want to get high rank ? Just Download any of the below templates and enjoy the significant features.

Features Of Professional Blogger Templates 2014

  • These templates are rare , yap really very rare . Don't underestimate these templates , just have a look on demo and check its professionality and design.These templates have very cool design and appearance along-with many customized widgets
  • Beautiful customized widgets such as Social Sharing Buttons Widget , Subscription Widget , and some other interesting widgets are present in these templates.
  • Fixed Width and Responsive Templates are present in the below templates.
  • All of the below templates works prefectly with all Browsers such as Google Chrome , Safari , and Mozilla Firefox etc

Elegant Photography Blogger Template

SEOBLOGGERTEMPLATES has recently released an awesome Magazine style Blogger Template , which is considered to be ideal for Templates Sharing Blogs and Photography Blogs Specially.This template has grid layout along-with many gusty features.This template has no side-bar it is images-friendly template.You Can get it free from Our Blog.This template has 3 columns footer , social media buttons and beautiful navigation menu.
photography-blogger-template

Quickly Premium Professional Blogger Template

Quickly Premium Professional Blogger Template is really a stunning and incredible template specially designed for Templates sharing blogs and Blogging Niche Blogs.It has magazine style along with many other handy tools ! The Attractive Drop Down menu is present below the header position which adds 5 stars to the beauty of this template.Right Side-bar along-with many customized widgets are present in this template.You Can buy it from theme-forest , Link is mentioned below.
premium-blogger-template

Videoism Blogger Template

Do you have a Blog having Videos? Searching for a Professional Video Template? If Yes , then Ofcourse you are at the right place.Here we go we have found a new Stunning and magnificent template for video blogs.Actually this template has gallery style along-with video counter(which counts the views of a video).Moreover , this template is SEO Optimized and cool template.Many Customized widgets such as Featured Videos and rating widget is present in this template.
video-blogger-template

Codify Magazine Blogger Template

Codify Magazine Blogger Template is a fast loading and seo optimized blogger template specially developed and designed for Coding Blogs , blogging niche and other related niches.The Author  of this Magazine Style Blogger Template is Ali Bajwa who is the owner of  Templateify.
DEMO  DOWNLOAD

Down town Blogger Template

Downtown Blogger Template is a fantastic blogger template ideal for news ,and tech niche webs.This template has wordpress look and beautiful slide-s template has widget below header.This template has 4 columns footer and awesome drop-down menu which makes it more  interesting template.You Can get it free from Our Blog.
 
DEMO  DOWNLOAD

Mintify Magazine Blogger Template

 Mintify Magazine Blogger Template :  Bringing the New fantastic and incrdible magazine style blogger for you !! That is What we called "Mintify Magazine Blogger Template".This template is just recently launched by Templateify , which is really a rare and magnificent template.Due to its magazine style and floating header this template become more impressive and inspiring.Onr Right Side-bar along with beautiful drop down menu.

Informations about Mintify Magazine Blogger Template

  • Template Name : Mintify Magazine Blogger Template 
  • Author : Templateify
  • Style Of Template : Magazine
  • Template Release Date : 17 September 2013
 

Features of Mintify Magazine Blogger Template

  • Professional and stylish Look
  • Floating Header
  • Customized Widgets
  • Works with all browsers
  • White
  • Magazine Style
  • One Right Sidebar
  • 4 Columns Footer
  • 3 Columns Layout
  • Stunning Design

Simple White Clean SEO Blogger Templates 2013

SEO Blogger Templates 2013 : Back in 1996 , two nerds named Larry page and Sergey Brin Started a Project for creating an awesome search engine , which they called BackRub ( later it got the name "Google").After the popularity of Google , they started a Network called AdSense which pay per Click.People start taking interest in earning money Online.But what was the main thing they want for Earning alot? That was Visitors from Search Engines !! So Search Engine started getting used more and more ,in this regards web owners were trying to puzzle out how to make their particular web sites arrive into their listings and on the top of Search Engines.This Thinking gives birth to SEO ( Search Engine Optimization ) Now implementing SEO is not the game of kids , in this regards we have find an awesome template for you !! which will enables you to get traffic from Search Engines without doing SEO , actually the template is SEO Optimized Template , therefore it will help you in SEO.Moreover all extra tricks which are included in SEO should be implemented by the Owner of the web , but for newbies I recommend these templates !

Simple White Clean SEO Blogger Template 2013

 SEO Blogger Templates

Features Of Simple White Clean SEO Blogger Template

  • Clean White Background
  • Professional Style
  • SEO Friendly
  • Drop Down Meun
  • Auto Read More
  • Powerful SEO Features
  • Beautiful Commenting Section
  • Social Profiles and Social Sharing
  • Navigation Bars
  • Awesome image swinging feature
  • Works with All Browsers

Super SEO Blogger Template

Features of Super SEO Blogger Template

  1. SEO Friendly
  2. Robots Lover
  3. Clean Awesome Header
  4. Consist on Two Column
  5. Stylishly Post Gadget
  6. Classic Drop Down Navigation Menu
  7. Right Sidebar
  8. Easy Programming Codes
  9. Smoothly Layout

How To Add Animated Buttons in Blogger

Animated Buttons For Blogger : Let's Do Something interesting , today we are going to share some beautiful style buttons which can be easily made by using CSS.Actually these buttons makes your "download links" attractive and stylish.For adding these buttons you have to add a Script in template HTML , so first backup your Blog Template and then implement this hack !

How To Add Animated Buttons in Blogger

  • Go To Blogger
  • Click On Template
  • Edit HTML
  • Search For  ]]></b:skin> 
  • Copy the Below CSS Script and paste it above  ]]></b:skin>
CSS Script
.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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRTd_ct2s7aZ9KVFhVOdpp5Vt5IcDDXzynDyTqQPqflK469-HYvq2u_VFnEj38nrlTZGgsJpXNJiM61QYkVU3lB4KTIdEQ1bnF70cKcapfQVVSKGdVRaNufZa263IR3-ehu7LNitdbejoo/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));}
  • After adding this CSS Script Save the template!
  • Now Add any of the below HTML Code/Script in Post where you want to appear the Buttons.

 HTML For 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> 

HTML For Media 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>
Customization : Replace # in the script(HTML) with the URL and Text with the Anchor Text .

So What's Up : Adding these Bubble Buttons makes your post more attractive and Cool.So if You Can why not implement it?Stay Blessed , Happy Blogging!