Attractive Blogger CSS3 Buttons to make your Blog more and more attractive. This post will show you a tutorial how to show this awesome button in your blog.
Given there are different colors of button as well as Different size of buttons.
How to Add this Button
- Login to your blogger Account
- Go to template and edit HTML
- Now search for <Head> (shortcut use - ctrl + f)
- Paste the following CSS Code just after <Head>
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<blockquote class="tr_bq" style="background-color: #2cea8e; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border: 1px solid rgb(221, 221, 221); color: #2c7bea; font-family: 'comic sans ms', 'Arial', Arial, serif; font-size: 0.9em; font-weight: bold; margin: 0px 20px; padding: 20px 70px 20px 20px;">
<br /></blockquote>
<br class="Apple-interchange-newline" /></div>
- Now save the Template.
How to use buttons
- Paste the following codes of different color and size.
For Large Buttons
<a href="LINK" class="large awesome">LINK NAME</a> <a href="LINK" class="large blue awesome">LINK NAME</a> <a href="LINK" class="large pink awesome">LINK NAME</a> <a href="LINK" class="large magenta awesome">LINK NAME</a> <a href="LINK" class="large green awesome">LINK NAME</a> <a href="LINK" class="large red awesome">LINK NAME</a> <a href="LINK" class="large orange awesome">LINK NAME</a> <a href="LINK" class="large yellow awesome">LINK NAME</a>
For medium Buttons
<a href="LINK" class="medium awesome">LINK NAME</a> <a href="LINK" class="medium blue awesome">LINK NAME</a> <a href="LINK" class="medium pink awesome">LINK NAME</a> <a href="LINK" class="medium magenta awesome">LINK NAME</a> <a href="LINK" class="medium green awesome">LINK NAME</a> <a href="LINK" class="medium red awesome">LINK NAME</a> <a href="LINK" class="medium orange awesome">LINK NAME</a> <a href="LINK" class="medium yellow awesome">LINK NAME</a>
For small Buttons
<a href="LINK" class="small awesome">LINK NAME</a> <a href="LINK" class="small blue awesome">LINK NAME</a> <a href="LINK" class="small pink awesome">LINK NAME</a> <a href="LINK" class="small magenta awesome">LINK NAME</a> <a href="LINK" class="small green awesome">LINK NAME</a> <a href="LINK" class="small red awesome">LINK NAME</a> <a href="LINK" class="small orange awesome">LINK NAME</a> <a href="LINK" class="small yellow awesome">LINK NAME</a>
Replace Link and Link Name
