Monday, 25 May 2015

Buttons Shortcode - Create CSS3 Buttons in Blogger!

tips4tricx
Buttons shortcode is another exciting element of Blogger Shortcode Plugin which is a one line textual code that you can insert anywhere on your blogger blog to display colorful buttons with links and icons. You can add fontAwesome icons and links to your buttons and choose any gradient background color you want! You can also create clickable social media sharing buttons or follow buttons. The buttons come in three sizes, smallmedium and large. You can also decide when to nofollow a link in the button. The buttons can be added inside blog posts, comments and sidebar widgets, almost anywhere. The buttons are design Compatible with all major browsers and of course responsive. Lets see them in action!

1. Install Blogger Shortcode Plugin

In order to use Buttons shortcode you must first install the shortcode plugin for your blogger blog by following 7 easy steps shared on the link below:
Skip installing it if you have already added it in your blogspot template

2. Add Button Color Themes

By default I have created 9 Color themes for the button shortcode using CSS3 gradient backgrounds. Lets first add these styles inside your template.
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 CSS code
/*-------Buttons Shortcode---------------- */
    a.sc-button i{padding-right:3px}a.sc-button.large{padding:8px 20px;font-size:18px}a.sc-button.medium{padding:5px 14px;font-size:15px}a.sc-button.small{padding:1px 6px;font-size:12px}a.sc-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.sc-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.sc-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.sc-button.green:hover{background-color:#58AA00}a.sc-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.sc-button.blue:hover{background-color:#2f96b4}a.sc-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.sc-button.purple:hover{background-color:#CE00CF}a.sc-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.sc-button.orange:hover{background-color:#f89406}a.sc-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.sc-button.red:hover{background-color:#AC0905}a.sc-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.sc-button.black:hover{background-color:#222}
    a.sc-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.sc-button.brown:hover{background-color:#9F5E02}
a.sc-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.sc-button.fb:hover{background-color:#3a5795} 

5 Save your template and you are all done with template editing!
You can add a theme of your choice too if you wish. 

3. Finally Start Adding Buttons using a Shortcode!

To add a button inside your post, comments or sidebar HTML/JavaScript widgets, use the shortcode below
[button]Your Title[/button]
OUTPUT:
default button 

Customize the Button!

Following is the complete list of attributes supported by Buttons Shortcode
AttributeDefinition
srcInsert button URL/Link here
colorMentions Button Color. Options: redbrownbluegreenpurpleblack,orangefb
sizeAdjusts the size of the button. Options: smallmediumlarge 
relDecides whether to add a nofollow to a link or not

Now lets suppose you want to create a Download button with a Download icon, blue background and large size. Then you will use attributes inside shortcode in the following format.
[button size="large" color="blue" src="http://www.example.com"]
<i class="fa fa-download"></i> Download
[/button]
OUTPUT:
Download button shortcode
  • Insert download link inside the src attribute. Replace http://www.example.com with your URL.
  • Replace fa-download with your FontAwesome Icon class.
That simple! :)

Nofollow the Buttons!

Another exciting update we made to this button today (12th May 2015) is the option to decide whether you want to add a nofollow link attribute to the button or not. You may want to nofollow demo buttons and social media buttons and for that we have created for you the option to decide whether you want to flow your PageRank juice to a particle link or not. Whenever you want to tell robots that you are linking a site but you are not recommending it and neither you wish to pass your precious PR juice to it through a backlink, then simply add the rel attribute in the shortcode in this format:
[button rel="nofollowsrc="http://www.example.com"]DEMO[/button]
If incase you want to recommend the link and pass your PR juice to it then simply don't bother adding any rel attribute.
Previous Post
Next Post

post written by:

1 comment:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks