Button Google Plus CSS3 For blog

seperti ini


Google+ GreenGoogle+ BlueGoogle+ RedGoogle+ YellowGoogle+ Gray

 1. login terlebih dahulu.
2. Pilih Template > Edit HTML,centang Expand Widget Templates.
3. Cari kode ]]></b:skin> (gunakan CTRL+F).
4. Letakan kode di bawah ini tepat di atas kode ]]></b:skin>.

<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>

5. Kemudian save

Untuk penggunaanya,silahkan sobat buat dalam postingan dan letakan/pilih salah satu kode yang di perlukan dan letakan pada bagian HTML bukan Compase.

<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>

Gimana mudah kan,buat yang tertarik selamat mencoba semoga berhasil.