Add CSS3 Google Plus Buttons to Your Blogger Blog


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


css3 buttons for blogger
Social Bookmarking sites take very important role to drive traffic to your blog/website. Especially Facebook, Twitter and Google Plus. Today in this tutorial I would like to say how to add different colors of Google + buttons with hover effect to your blog/website. This will increase your followers in Google + profile. You can also use it in WordPress too.

You can see live demo of different colored Google plus buttons. Its a screenshot which I have taken from my demo blog. just click on the below image and see the demo online and get an idea of what we are going to make here.


CSS3 google plus buttons for blogger

  How to add this buttons to your blog/website
We have only two parts to create this Google + buttons for your blog/website. that's CSS part as well as HTML part. Lets begin with adding CSS code (ie, adding the skin of your Google + buttons).

  • Go to Blogger Dashboard > Template
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below ▼

]]></b:skin>

Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)

<style>
.PlusGreen {
    display: inline-block;
    background: #45ad45;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#47af47), color-stop(100%,#43ab43));
    background: -moz-linear-gradient(center top, #47af47 0%, #43ab43 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: background-color .218ss 0;
    -moz-transition: background-color .218ss 0;
    -o-transition: background-color .218ss 0;
    transition: background-color .218ss 0;
    text-shadow: 1px 0px 0px #1a8f1a;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #1a8f1a;
    border-width: 1px;
    border-style: solid;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
}
.PlusGreen:hover {
    background: #33a833;
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 0px #284c28;
    border-color: #284c28;
}
.PlusGreen:active {
    background: #359c35;
    -webkit-box-shadow: 1px 1px 3px #329432 inset;
    -moz-box-shadow: 1px 1px 3px #329432 inset;
    box-shadow: 1px 1px 3px #329432 inset;
    border-color: #2d4d2d;
}

.PlusYellow {
    display: inline-block;
    background: #fbfb00;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFD22), color-stop(100%,#f9f911));
    background: -moz-linear-gradient(center top, #FCFD22 0%, #f9f911 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-shadow: 1px 1px 0px #FFFFF;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #e4e416;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #6E6E6E;
    font-weight: bold;
}
.PlusYellow:hover {
    background: #ffff19;
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 0px #ffe01a;
    border-color: #ffe01a;
    color: #333;
}
.PlusYellow:active {
    color: #000;
}
.PlusGray {
    display: inline-block;
    background: #f3f3f3;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#f1f1f1));
    background: -moz-linear-gradient(center top, #f5f5f5 0%, #f1f1f1 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: border-color .218s 0;
    -moz-transition: border-color .218s 0;
    -o-transition: border-color .218s 0;
    transition: border-color .218s 0;
    text-shadow: 1px 1px 0px #ffffff;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    text-decoration: none;
    border-color: #DCDCDC;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #6E6E6E;
    font-weight: bold;
}
.PlusGray:hover {
    -webkit-box-shadow: 0px 2px #00002;
    -moz-box-shadow: 0px 2px #00002;
    box-shadow: 0px 2px #00002;
    border-color: #999;
    color: #333;
}
.PlusGray:active {
    -webkit-box-shadow: 1px 1px 3px #dedede inset;
    -moz-box-shadow: 1px 1px 3px #dedede inset;
    box-shadow: 1px 1px 3px #dedede inset;
    border-color: #444;
    color: #000;
}
.PlusBlue {
    display: inline-block;
    background: #3079ed;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#327BEF), color-stop(100%,#2E77EB));
    background: -moz-linear-gradient(center top, #327BEF 0%, #2E77EB 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: border-color .218s 0;
    -moz-transition: border-color .218s 0;
    -o-transition: border-color .218s 0;
    transition: border-color .218s 0;
    text-shadow: 1px 0px 0px #1a378e;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #0066cc;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
}
.PlusBlue:hover {
    background: #2D71EE;
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 0px #001AA6;
    border-color: #291f93;
}
.PlusBlue:active {
    background: #2A69EF;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#327aef), color-stop(100%,#2e76eb));
    background: -moz-linear-gradient(center top, #327aef 0%, #2e76eb 100%);
    -webkit-box-shadow: 1px 1px 3px 0px #0066cc inset;
    -moz-box-shadow: 1px 1px 3px 0px #0066cc inset;
    box-shadow: 1px 1px 3px 0px #0066cc inset;
    text-shadow: 1px 1px 0px #001AA6;
    border-color: #444444;
}
.PlusRed {
    display: inline-block;
    text-decoration: none;
    background: #eb3232;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FC2222), color-stop(100%,#F81111));
    background: -moz-linear-gradient(center top, #FC2222 0%, #F81111 100%);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: background-color .218s 0;
    -moz-transition: background-color .218s 0;
    -o-transition: background-color .218s 0;
    transition: background-color .218s 0;
    text-shadow: 1px 1px 0px #a60000;
    padding: 7px 12px;
    margin: 0px 12px 0px 0px;
    display: inline-block;
    border-color: #cc0000;
    border-width: 1px;
    border-style: solid;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
}
.PlusRed:hover {
    -webkit-box-shadow: 1px 1px #d8d8d8;
    -moz-box-shadow: 1px 1px #d8d8d8;
    box-shadow: 1px 1px #d8d8d8;
    text-shadow: 1px 1px 1px #a60000;
    border-color: #912020;
}
.PlusRed:active {
    background: #ed2b2b;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed3232), color-stop(100%,#eb2f2f));
    background: -moz-linear-gradient(center top, #ed3232 0%, #eb2f2f 100%);
    -webkit-box-shadow: 1.5px 1.5px 3px #cc0000 inset;
    -moz-box-shadow: 1.5px 1.5px 3px #cc0000 inset;
    box-shadow: 1.5px 1.5px 3px #cc0000 inset;
    border-color: #ad4b4b;
}
</style>

[You can change the button's settings (including hover color, shadow, Font and text color etc..) by changing the HTML color code and PX of under each button's highlighted lines]

Save your template. Now we have added the CSS (style) part in the template and let's see how to use them. Next I m giving HTML Code of all types of button according to their colors. Just follow the below simple steps to use them while writing your blog post.

  • Switch your blog post from Compose to EDIT HTML while you writing post
  • Select your button code below ▼ and paste it where you wanna display buttons

<a href="#" class="PlusGreen">Google+ Green</a>
<a href="#" class="PlusBlue">Google+ Blue</a>
<a href="#" class="PlusRed">Google+ Red</a>
<a href="#" class="PlusYellow">Google+ Yellow</a>
<a href="#" class="PlusGray">Google+ Gray</a>

You may also like -



pen icon png Please note the following things
Before you publish your blog post, please replace Google+ Green, Blue, Red, Yellow, Gray with your button text and # with your button link. Happy blogging:)