Add CSS3 Buttons Shortcode in Blogger

0
create css3 buttons shortcodes for blogger
Buttons shortcode Plugin which is a one line code that you can insert anywhere on your blog or website.You can now display colorful buttons with links and icons ex-Demo Button,Download Button,Facebook,Title Button etc. We have add extra modification with FontAwesome icons and links to buttons and you can choose any gradient background color. We can also create clickable social media sharing buttons or follow buttons. The buttons come with three sizes i.e small, medium and large. The buttons can be added inside blog posts,comments and sidebar widgets etc. The buttons are Compatible with all browsers and responsive too.

How to Create CSS3 Shortcode Buttons In Blogger

INSTALLATION STEPS

1. Go To Blogger > Template > Backup your template.
2. Click Edit HTML
3. Search </head>
4. Paste the following code just above it.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
6. Go To Blogger > Template > Backup your template
7. Click Edit HTML
8. Search for </body>
9. Paste the following js just above it.
<script src='https://googledrive.com/host/0B58fhAmOxE7EQlBuTkR4d3REbjQ' type='text/javascript'></script>
If you have already added the above codes(Installation Steps) i.e java script and above css style sheet then no need to add it again in your blog,just skip above steps and now follow below steps.if you have not added above code then you need to follow all the steps mentioned here.

 Add Buttons Style And Color

1 Go To Blogger > Template > Backup your Template
2 Click Edit HTML
3 Search for this code ]]></b:skin>
4 Just above it paste the following code
/*-------Buttons Shortcode---------------- */
    a.bloggersstand-button i{padding-right:3px}a.bloggersstand-button.large{padding:8px 20px;font-size:18px}a.bloggersstand-button.medium{padding:5px 14px;font-size:15px}a.bloggersstand-button.small{padding:1px 6px;font-size:12px}a.bloggersstand-button{padding:4px 14px;margin-bottom:0;font-size:14px;display:inline-block;line-height:20px;text-align:center;vertical-align:middle;cursor:pointer;color:#333;text-shadow:0 1px 1px rgba(255,255,255,0.75);background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:-o-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(to bottom,#fff,#e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe5e5e5',GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);border:1px solid #bbb;border-bottom-color:#a2a2a2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);text-decoration:none;font-family:oswald}a.bloggersstand-button:hover{color:#333;text-decoration:none;background-color:#e6e6e6;background-position:0 -15px;-webkit-transition:background-position .3s linear;-moz-transition:background-position .3s linear;-o-transition:background-position .3s linear;transition:background-position .3s linear}a.bloggersstand-button.green{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#84FF00;background-image:-moz-linear-gradient(top,#84FF00,#58AA00);background-image:-webkit-gradient(linear,0 0,0 100%,from(#a7be2c),to(#95aa27));background-image:-webkit-linear-gradient(top,#84FF00,#58AA00);background-image:-o-linear-gradient(top,#84FF00,#58AA00);background-image:linear-gradient(to bottom,#84FF00,#58AA00);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#84FF00',endColorstr='#58AA00',GradientType=0);border-color:#95aa27 #95aa27 #5e6c19;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.bloggersstand-button.green:hover{background-color:#58AA00}a.bloggersstand-button.blue{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#49afcd;background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.bloggersstand-button.blue:hover{background-color:#2f96b4}a.bloggersstand-button.purple{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#FD9CF8;background-image:-moz-linear-gradient(top,#FD9CF8,#CE00CF);background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));background-image:-webkit-linear-gradient(top,#FD9CF8,#CE00CF);background-image:-o-linear-gradient(top,#FD9CF8,#CE00CF);background-image:linear-gradient(to bottom,#FD9CF8,#CE00CF);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FD9CF8',endColorstr='#CE00CF',GradientType=0);border-color:#CE00CF #CE00CF #FD9CF8;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.bloggersstand-button.purple:hover{background-color:#CE00CF}a.bloggersstand-button.orange{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#faa732;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(to bottom,#fbb450,#f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffab44f',endColorstr='#fff89406',GradientType=0);border-color:#f89406 #f89406 #ad6704;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.bloggersstand-button.orange:hover{background-color:#f89406}a.bloggersstand-button.red{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#FE1A0E;background-image:-moz-linear-gradient(top,#FE1A0E,#AC0905);background-image:-webkit-gradient(linear,0 0,0 100%,from(#FE1A0E),to(#AC0905));background-image:-webkit-linear-gradient(top,#FE1A0E,#AC0905);background-image:-o-linear-gradient(top,#FE1A0E,#AC0905);background-image:linear-gradient(to bottom,#FE1A0E,#AC0905);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FE1A0E',endColorstr='#AC0905',GradientType=0);border-color:#bd362f #bd362f #802420;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.bloggersstand-button.red:hover{background-color:#AC0905}a.bloggersstand-button.black{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#363636;background-image:-moz-linear-gradient(top,#444,#222);background-image:-webkit-gradient(linear,0 0,0 100%,from(#444),to(#222));background-image:-webkit-linear-gradient(top,#444,#222);background-image:-o-linear-gradient(top,#444,#222);background-image:linear-gradient(to bottom,#444,#222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444',endColorstr='#ff222222',GradientType=0);border-color:#222 #222 #000;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.bloggersstand-button.black:hover{background-color:#222}
    a.bloggersstand-button.brown{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#FEAA33;background-image:-moz-linear-gradient(top,#FEAA33,#9F5E02);background-image:-webkit-gradient(linear,0 0,0 100%,from(#FEAA33),to(#9F5E02));background-image:-webkit-linear-gradient(top,#FEAA33,#9F5E02);background-image:-o-linear-gradient(top,#FEAA33,#9F5E02);background-image:linear-gradient(to bottom,#FEAA33,#9F5E02);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEAA33',endColorstr='#9F5E02',GradientType=0);border-color:#9F5E02 #9F5E02 #FEAA33;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.bloggersstand-button.brown:hover{background-color:#9F5E02}
a.bloggersstand-button.fb{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#6080C6;background-image:-moz-linear-gradient(top,#6080C6,#3a5795);background-image:-webkit-gradient(linear,0 0,0 100%,from(#6080C6),to(#3a5795));background-image:-webkit-linear-gradient(top,#6080C6,#3a5795);background-image:-o-linear-gradient(top,#6080C6,#3a5795);background-image:linear-gradient(to bottom,#6080C6,#3a5795);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6080C6',endColorstr='#3a5795',GradientType=0);border-color:#3a5795 #3a5795 #6080C6;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25)}a.bloggersstand-button.fb:hover{background-color:#3a5795} 
5. Save your template..Done !

Add Buttons Using a Shortcode

To add a button in sidebar HTML/JavaScript widgets,inside your post or comments use the shortcode below.
[button]Title[/button]
Result:
default shortcode button for blogger

Customization


  • src - Insert button URL here.
  • color - fb,orange,black,purple,green,blue,brown,red,red
  • size - Small, medium, large
  • rel - To add a nofollow to a link or not

Let's take one example:
[button size="large" color="red" button rel="nofollow"  src="http://www.bloggersstand.blogspot.com"]
<i class="fa fa-download"></i> Download
[/button]
Result:
blogger download button shortcode

  • Change http://www.bloggersstand.blogspot.com with your URL.
  • Change fa-download with your FontAwesome Icon.
  • Change rel="nofollow" as per your need.

Finally now you have these beautiful shortcode buttons for blogger..let me know if you need any help.
how to Add CSS3 Buttons Shortcode in Blogger,css3 shortcode for blogspot,demo button,download,fb,colorful buttons for blogger website using shortcode create css3 shortcode attractive buttons
Buttons shortcode Plugin which is a one line code that you can insert anywhere on your blog or w...
SUMMARY

how to Add CSS3 Buttons Shortcode in Blogger,css3 shortcode for blogspot,demo button,download,fb,colorful buttons for blogger website using shortcode create css3 shortcode attractive buttons

You Might Also Like:

We hope this article helped you to learn Add CSS3 Buttons Shortcode in Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Add CSS3 Buttons Shortcode in Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand