Button Google Plus CSS3 For blog

Di kesempatan kali ini taukahbahwa.blogspot.com akan membahas artikel tentang Button Google Plus CSS3 For blog. Semoga dengan berita Button Google Plus CSS3 For blog akan menambah wacana bagi anda pembaca setia taukahbahwa.blogspot.com

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.

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com