Add Color buttons for blogspot,How to inser button in blogspot?
With more color in button will effective cool blogspot UI colored Customized Colorful. Create button css3 animation consists of 2 parts that are added into the template css and HTML code used in the write. In which we will learn how to implement it in our Post page.
Tutorials:
Step 1 : Installation
- Go To Blogger Dashboard → Template → Backup Your Template
- Click Edit HTML and Search For </head> using (Ctrl+F)
- And Then Copy and Paste The Following Code Above </head>
Code here:
<!– Flat UI Buttons By www.CoDerDesireLab.blogspot.Com Start –>
<link href=”http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800″ rel=”stylesheet” type=”text/css”></link>
<style type=”text/css”>
.button {color:white!important; font-family:open sans; margin:10px 10px 10px 0;text-decoration:none!important; font-weight:700;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-oborder-radius:5px; transition:all .4s;-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;}
.blue {background: #3498db;border-bottom: 3px solid #226693;}
.blue:hover {background:#2980b9;}
.green {background: #2ecc71;border-bottom: 3px solid #1F8C4C;}
.green:hover {background: #27ae60;}
.red {background: #e74c3c;border-bottom: 3px solid #922C20;}
.red:hover {background:#c0392b;}
.purple {background: #9b59b6; border-bottom: 3px solid #74398E;}
.purple:hover {background:#8e44ad;}
.seagreen {background: #1abc9c;border-bottom: 3px solid #127F69;}
.seagreen:hover {background: #16a085;}
.big {font-size:18px; padding:15px 20px;}
.medium {font-size:15px; padding: 10px 15px;}
.small {font-size:12px; padding:8px 10px;}
</style>
<!– Flat UI Buttons By www.CoDerDesireLab.blogspot.Com End –>
- Click “Save Template“. and Installation Completed!
Step 2 : Adding Flat UI Buttons in Blogger
You can Use this Buttons any where in your Blog. here we Will Tell you how you can use it in your Blog post. “If you Use Download, Preview, demo Buttons It is Mostly recommended.”
- Go To Blogger Dashboard → Create New Post
- Click “HTML” Tab
- And Then Copy and Paste Any Button Code There.
Code here:
Big Size Buttons
<a href=”#”>Blue Button</a>
<a href=”#”>Green Button</a>
<a href=”#”>Red Button</a>
<a href=”#”>Purple Button</a>
<a href=”#”>SeaGreen </a>
Medium Size Buttons
<acolor: rgb(255, 255, 255); font-style: italic; line-height: 24px; font-family: Georgia, ‘Times New Roman’, serif; font-size: large;”>medium” href=”#”>Blue Button</a>
<acolor: rgb(255, 255, 255); font-style: italic; line-height: 24px; font-family: Georgia, ‘Times New Roman’, serif; font-size: large;”>medium” href=”#”>Green Button</a>
<acolor: rgb(255, 255, 255); font-style: italic; line-height: 24px; font-family: Georgia, ‘Times New Roman’, serif; font-size: large;”>medium” href=”#”>Red Button</a>
<acolor: rgb(255, 255, 255); font-style: italic; line-height: 24px; font-family: Georgia, ‘Times New Roman’, serif; font-size: large;”>medium” href=”#”>Purple Button</a>
<acolor: rgb(255, 255, 255); font-style: italic; line-height: 24px; font-family: Georgia, ‘Times New Roman’, serif; font-size: large;”>medium” href=”#”>SeaGreen </a>
Small Size Buttons
<acolor: rgb(255, 255, 255); font-style: italic; line-height: 24px; font-family: Georgia, ‘Times New Roman’, serif; font-size: large;”>small” href=”#”>Blue Button</a>
<acolor: rgb(255, 255, 255); font-style: italic; line-height: 24px; font-family: Georgia, ‘Times New Roman’, serif; font-size: large;”>small” href=”#”>Green Button</a>
<acolor: rgb(255, 255, 255); font-style: italic; line-height: 24px; font-family: Georgia, ‘Times New Roman’, serif; font-size: large;”>small” href=”#”>Red Button</a>
<acolor: rgb(255, 255, 255); font-style: italic; line-height: 24px; font-family: Georgia, ‘Times New Roman’, serif; font-size: large;”>small” href=”#”>Purple Button</a>
<acolor: rgb(255, 255, 255); font-style: italic; line-height: 24px; font-family: Georgia, ‘Times New Roman’, serif; font-size: large;”>small” href=”#”>SeaGreen </a>
Now:
- Replace # With The Link of Button.
- Replace Highlighted Text With The Text You Want to Show On That Button.
- Prepare Post Content and Publish
Reload your blog and relax
Goodluck!
