cara membuat Google Plus buttons style

Cara membuat Google Plus buttons style - tutorial cara membuat Google Plus buttons style yang memang pada dasarnya cara membuat Google Plus buttons style sangat menarik dan sedap dipandang mata. cara membuat Google Plus buttons style memiliki tampilan sederhana sebenarnya, tapi karena pengaruh nama situs terbesar sejagat raya ini akhirnya Google Plus buttons style ini juga menjadi pilihan banyak orang termasuk blogger sendiri. Untuk melihat demonya saya pikir anda sudah sering melihat tapi untuk demo tampilan tutorial ini silahkan kunjungi link demo dibawah, bila anda tertarik untuk memasang Google Plus buttons style ini pada setiap button blogspot anda silahkan simak tutorial dibawah ini..

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Google Plus buttons style
By : Rivai Silaban | Ide Blogspot | Blog Design
Update : Selasa 28 January 2014
******************************************/
button {
text-decoration: none;
text-shadow: 0px 1px 0px rgb(255, 255, 255);
font: bold 11px/17px Helvetica,Arial,sans-serif;
display: inline-block;
float: left;
margin: 5px;
padding: 5px 6px 4px;
border: 1px solid rgb(217, 217, 217);
border-radius: 2px;
transition: border-color 0.2s ease 0s;
height: 29px !important;
cursor: pointer;
color: rgb(68, 68, 68);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
}
button:hover {
background: #F4F4F4;
border-color: #C0C0C0;
color: #333;
box-shadow:0 0 2px #ccc;
}
button:active {
border-color: #4D90FE;
color: #4D90FE;
-moz-box-shadow:inset 0 0 10px #D4D4D4;
-webkit-box-shadow:inset 0 0 10px #D4D4D4;
box-shadow:inset 0 0 10px #D4D4D4;
}
/* CSS button warna Biru */
button.bluebtn {
border: 1px solid #3079ED !important;
background: #4B8DF8;
background: -webkit-linear-gradient(top, #4C8FFD, #4787ED);
background: -moz-linear-gradient(top, #4C8FFD, #4787ED);
background: -ms-linear-gradient(top, #4C8FFD, #4787ED);
background: -o-linear-gradient(top, #4C8FFD, #4787ED);
-webkit-transition: border .20s;
-moz-transition: border .20s;
-o-transition: border .20s;
transition: border .20s;
}
button.bluebtn:hover {
border: 1px solid #2F5BB7 !important;
background: #6099F9;
background: -webkit-linear-gradient(top, #6099F9, #076BDA);
background: -moz-linear-gradient(top, #6099F9, #076BDA);
background: -ms-linear-gradient(top, #6099F9, #076BDA);
background: -o-linear-gradient(top, #6099F9, #076BDA);
}
/* CSS button warna Hijau */
button.greenbtn {
border: 1px solid #29691D !important;
background: #3A8E00;
background: -webkit-linear-gradient(top, #3C9300, #398A00);
background: -moz-linear-gradient(top, #3C9300, #398A00);
background: -ms-linear-gradient(top, #3C9300, #398A00);
background: -o-linear-gradient(top, #3C9300, #398A00);
-webkit-transition: border .20s;
-moz-transition: border .20s;
-o-transition: border .20s;
transition: border .20s;
}
button.greenbtn:hover {
border: 1px solid #2D6200 !important;
background: #4ABB00;
background: -webkit-linear-gradient(top, #4ABB00, #368200);
background: -moz-linear-gradient(top, #4ABB00, #368200);
background: -ms-linear-gradient(top, #4ABB00, #368200);
background: -o-linear-gradient(top, #4ABB00, #368200);
}
/* CSS button warna Merah */
button.redbtn {
border: 1px solid #D14836 !important;
background: #D64937;
background: -webkit-linear-gradient(top, #DC4A38, #D14836);
background: -moz-linear-gradient(top, #DC4A38, #D14836);
background: -ms-linear-gradient(top, #DC4A38, #D14836);
background: -o-linear-gradient(top, #DC4A38, #D14836);
-webkit-transition: border .20s;
-moz-transition: border .20s;
-o-transition: border .20s;
transition: border .20s;
}
button.redbtn:hover {
border: 1px solid #B0281A !important;
background: #D14130;
background: -webkit-linear-gradient(top, #DC4A38, #C53727);
background: -moz-linear-gradient(top, #DC4A38, #C53727);
background: -ms-linear-gradient(top, #DC4A38, #C53727);
background: -o-linear-gradient(top, #DC4A38, #C53727);
}
button.action:hover {
-moz-box-shadow: 0 1px 0px #DDD;
-webkit-box-shadow: 0 1px 0px #DDD;
box-shadow:iset 0 1px 0px #DDD;
}
button.action:active {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-color: #C6C6C6 !important;
}
button.bluebtn:active {border-color: #2F5BB7 !important;}
button.greenbtn:active {border-color: #2D6200 !important;}
button.redbtn:active {border-color: #B0281A !important;}
button span.label {
display: inline-block;
float: left;
line-height: 17px;
height: 18px;
padding: 0 1px;
overflow: hidden;
color: #444;
-webkit-transition: color .20s;
-moz-transition: color .20s;
-o-transition: color .20s;
transition: color .20s;
}
button span.label {line-height: 15px !important;}
button:hover .label.bluebtn {color: #7090C8;}
button:hover .label.greenbtn {color: #42B449;}
button:hover .label.yellow {color: #F7CB38;}
button.bluebtn .label {color: #FFF !important;text-shadow: 0 1px 0 #2F5BB7 !important;}
button.greenbtn .label {color: #FFF !important;text-shadow: 0 1px 0 #2D6200 !important;}
button.redbtn .label {color: #FFF !important;text-shadow: 0 1px 0 #B0281A !important;}
button.action .label {padding: 0 17px !important;}
button.action:active .label {color: #333 !important;}
button.bluebtn:active .label, button.greenbtn:active .label, button.redbtn:active .label {color: #FFF !important;}
/* CSS end Google Plus buttons style */

Install Program Tag HTML

• Setelah anda sudah memasang CSS cara membuat Google Plus buttons style saatnya anda memasang kode htmlnya.
• Copy code cara membuat Google Plus buttons style dibawah ini dan pasang diblog anda...
  

<!-- Google Plus buttons style code start-->
<a href="http://www.ideblogspot.com/" target="_blank">
<button class="action bluebtn"><span class="label">Save</span></button></a>
<a href="http://www.ideblogspot.com/" target="_blank">
<button class="action redbtn"><span class="label">Upload</span></button></a>
<a href="http://www.ideblogspot.com/" target="_blank">
<button class="action greenbtn"><span class="label">Comment</span></button></a>
<a href="http://www.ideblogspot.com/" target="_blank">
<button class="action"><span class="label">Cancel</span></button></a>
<!-- Google Plus buttons style code end-->

Kesimpulan

Code CSS diatas bukan code asli dari CSS buttons google plus, sebab google plus sudah memiliki sertifikat lisensi atas semua code yang telah dipakai oleh Google, tutorial ini hanya buatan sendiri atau hanya untuk menampilkan kemiripan tampilan saja, saya bukan bermaksud untuk melanggar TOS dari google..

Buat anda yang belum memahami betul code CSS dan HTML silahkan kunjungi link dibawah ini untuk lebih detailnya...

http://www.ideblogspot.com/2014/01/google-plus-buttons-style.html

html

• fungsi mode html pada menu entri baru blogspot
• fungsi compose pada menu entri baru blogspot
• cara membuat box keterangan code
• fungsi float pada html
• fungsi style clear both
• fungsi margin pada html
• cara membuat style link type square
• cara membuat Image pseudo style
• cara membuat speech bubble style
• cara membuat Blockquote di blogspot

trik pendukung

• fungsi mode html pada menu entri baru blogspot
• fungsi compose pada menu entri baru blogspot
• cara membuat box keterangan code
• widget social media scale di blogspot
• fungsi style clear both
• Tutorial menampilkan post date diwaktu yang sama
• feed validator tool
• cara membuat Image pseudo style
• cara mebuat fasilitas chat di blog
• cara membuat Blockquote di blogspot

css

• fungsi float pada html
• fungsi style clear both
• fungsi margin pada html
• css widget label blogspot accordion
• cara membuat style link type square
• cara membuat Image pseudo style
• cara membuat speech bubble style
• help tooltip style blogspot
• cara membuat space iklan blogspot dengan CSS3
• cara membuat widget box rivai style

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 5:40 PM