☯Kevin's Boysz☯: CSS

Cara Membuat Tombol/Button Keren Di Blog v2

Tombol dan Ikon juga sangat penting bagi setiap blog be'coz mereka menunjukkan khusus dari dan baik tampilan blog apapun, jika tombol Anda sangat tampan dan memberikan nuansa profesionalisme untuk blog apapun dan jika tombol Anda tampan dan berbeda untuk lain maka bisa baik untuk blog Anda. Itu sebabnya tim kami memperkenalkan tombol CSS baru dan murni untuk blogger.

1.Login ke Blogger> Dashborad
2.Klik pada Drop Down Menu dan pilih Template
3.Template Anda Backup sebelum melakukan perubahan ke blog Anda
4.Sekarang Klik pada Edit HTML
5.Tekan Ctrl + F dan cari kode yang ditunjukkan di bawah ini.

</head>

6.Paste kode di bawah ini sebelum </head>

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'></link>

7.Sekarang lagi menemukan di bawah kode

]]></b:skin>

8.Paste kode di bawah ini sebelum ]]></b:skin>

#wg-dbutton {
border:2px solid black;
-moz-border-radius:6px;
-webkit-border-radius:6px;
background:#F8F8F8;
box-shadow:3px 3px 3px #434343;
width:130px;
margin-bottom:5px;
padding:5px;
}

#wg-dbutton a {
color:#434343;
background:#F8F8F8;
display:inline-block;
font-size:32px;
font-family: 'Yanone Kaffeesatz';
line-height:20px;
text-decoration:none;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
padding:8px 14px;
}

#wg-dbutton a:hover {
color:#fff;
text-shadow:0 1px 0 #000;
background:#434343;
text-decoration:none;
}

9.Simpan Template Anda.

Cara Menambahkannya Di Posting Anda:

1.Pergi Ke Entri Baru Lalu Pilih HTML

2.Lalu Masukan Code Di Bawah Ke Dalamnya

Cara Mengganti:

Ganti # Dengan Link Anda.
Ganti Live Demo Dengan tulisan Sendiri Anda.

Tombol dan lain-lain efek sangat penting dalam blogging dan khususnya ketika blog kita berkaitan dengan merancang dan blog blogging itu sebabnya terlihat dan terasa sangat penting di dalam blog. Dari berlangsung memposting tim kami disediakan tombol untuk demo hidup dan untuk barang lainnya seperti ikon dan lainnya beberapa hal dan jadi hari ini kita memiliki tombol Push-Pop 3D kita dapat menambahkan dalam posting blogger dan itu jenis yang sangat unik dari widget dan memiliki tampilan 3D dan mudah disesuaikan dan memiliki push - efek Pop ketika Anda klik pada tombol.

Tambahkan Push-Pop Tombol di Blogger:
1.Login Ke Blogger >Dashborad
2.Klik pada Drop Down Menu dan pilih Template
3.Template Anda Backup sebelum melakukan perubahan ke blog Anda
4.Sekarang Klik pada Edit HTML> Lanjutkan> Expand Widget Templates 5.Tekan Ctrl + F dan cari kode yang ditunjukkan di bawah ini.

</head>

6.Paste kode di bawah ini sebelum </head>

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'></link>

7.Sekarang lagi menemukan di bawah kode

]]></b:skin>

8.Paste kode di bawah ini sebelum ]]></b:skin>

#wg-pushbutn a {
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(219,87,5,1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 30px;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin: 10px auto;
width: 200px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
#wg-pushbutn a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}

9.Save Template Anda

Bagaimana Cara Menambahkan Di Posting Anda:

1.Entri Baru >Klik Pada HTML

2.Sekarang paste kode di dalamnya.

Cara Mengganti:

Ganti # dengan link anda.
Menggantikan Live Demo itu dengan teks Anda sendiri.

Kontra Widget sangat penting dalam dunia blogging saat ini be'coz memberikan jenis yang sangat unik tampilan dan nuansa ke blog apapun. Widget ini dibuat murni oleh CSS sehingga tidak akan datang masalah apapun dalam menginstal. Widget dibuat untuk tiga jejaring sosial FB, Twitter, Google Plus, dan widget ini tidak termasuk jenis JavaScript be'coz harus kompatibel dan baik install.

Tambahkan Kontra Widget di Blogger:

1.Login Ke Blogger >DashBorad
2.Klik pada Drop Down Menu lalu pilih Tata Letak
3.Tambah Gadget HTML/JavaScript
4.Paste di bawah kode di dalamnya.

  <style type="text/css">
.container {
margin: 0px auto;
width: 300px;
text-align: center;
}

.btn-sbm {
display: inline-block;
vertical-align: top;
position: relative;
margin: 0 5px;
padding-top: 40px;
width: 75px;
font-weight: bold;
text-align: center;
text-decoration: none;
border-radius: 8px;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.btn-sbm:active {
margin-top: 3px;
}

.btn-sbm:active .btn-sbm-action {
padding-bottom: 3px;
-webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
}

.btn-sbm:active .btn-sbm-action:after {
bottom: 3px;
}

.btn-sbm-count {
position: absolute;
top: 0;
left: 0;
right: 0;
line-height: 40px;
font-size: 19px;
letter-spacing: -1px;
color: #555;
text-shadow: 0 1px white;
background: #e6eff5;
border-width: 1px 1px 0;
border-style: solid;
border-color: #c5c5c5 #bbb;
border-radius: 8px 8px 0 0;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
}

.btn-sbm-count:before, .btn-sbm-count:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border: 6px solid transparent;
border-top-color: #e6eff5;
}

.btn-sbm-count:before {
margin-left: -7px;
margin-top: 1px;
border-width: 7px;
border-top-color: rgba(0, 0, 0, 0.07);
}

.btn-sbm-action {
display: block;
position: relative;
line-height: 32px;
padding: 2px 0 6px;
font-size: 14px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
border: solid rgba(0, 0, 0, 0.18);
border-width: 0 1px;
border-radius: 0 0 8px 8px;
}

.btn-sbm-action:after {
content: '';
position: absolute;
top: 0;
bottom: 6px;
left: 0;
right: 0;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
}

.btn-sbm-tweet {
background: #83cfe8;
background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
}

.btn-sbm-tweet:after {
-webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
}

.btn-sbm-tweet + .btn-sbm-count {
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
}

.btn-sbm-like {
background: #6480bd;
background-image: -webkit-linear-gradient(top, #6480bd, #3c5894);
background-image: -moz-linear-gradient(top, #6480bd, #3c5894);
background-image: -o-linear-gradient(top, #6480bd, #3c5894);
background-image: linear-gradient(to bottom, #6480bd, #3c5894);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
}

.btn-sbm-plus {
background: #626262;
background-image: -webkit-linear-gradient(top, #626262, #404040);
background-image: -moz-linear-gradient(top, #626262, #404040);
background-image: -o-linear-gradient(top, #626262, #404040);
background-image: linear-gradient(to bottom, #626262, #404040);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
}

</style>

<br/>
<div class="container">

     <a href="https://twitter.com/aris_inc1" rel="nofollow" target="_blank"rel="author" title="Find us on twitter" class="btn-sbm">
      <span class="btn-sbm-action btn-sbm-tweet">Twitter</span>
      <span class="btn-sbm-count">150+</span>
    </a>

    <a href="https://www.facebook.com/pages/Kevins-Boysz/525846667530307?fref=ts" rel="nofollow" target="_blank" title="Find us on facebook" class="btn-sbm">
      <span class="btn-sbm-action btn-sbm-like">Facebook</span>
      <span class="btn-sbm-count">650+</span>
    </a>

    <a href="https://plus.google.com/u/0/103315536973068325014" class="btn-sbm" target="_blank" rel="author" title="Find us on Google+">
      <span class="btn-sbm-action btn-sbm-plus">Google+</span>
      <span class="btn-sbm-count">140+</span>
    </a><br/>
</div><a style="float:right; color: #ffffff"href="http://blogtips-generation.blogspot.com/">Get This</a>

9.Save Template Anda

Cara Mengganti:

https://twitter.com/aris_inc1 Ganti Dengan URLTwitter Anda.
https://www.facebook.com/pages/Kevins-Boysz/525846667530307 Ganti Dengan URL Fans Page FB.
anda
https://plus.google.com/u/0/103315536973068325014 Ganti Dengan URL Google+ Anda.

Memiliki Profesional Menu pada blog Anda yang menunjukkan profesionalisme blog apapun dan itu cara tampilan dan nuansa dan tepat waktu ini blogging akan melampaui pada batas-batas profesionalisme hanya be'coz anak yang berusia hampir 13 tahun yang dapat merancang apa saja dalam blogging jadi, kita harus melakukan sesuatu yang baru blogging be'coz mengalami persaingan yang sangat ketat yang juga tergantung pada desain, konten, data, privasi dll Jadi, MOTO kami sangat sederhana Membuat Blog Seperti Pro. Tim kami selalu siap untuk memberikan hal terbaik dan profesional. Hari ini Anda akan mendapatkan Horizontal menu profesional Blue Splashish yang hanya dibuat oleh CSS PURE.

Instal Kode Pro Biru Splashish Menu Horisontal :

1.Login ke Blogger> Dashborad
2.Klik pada Drop Down Menu lalu pilih Tata Letak
3.Tambah Gadget HTML / JavaScript
4.Paste di bawah kode di dalamnya.

<style>

#RWGmnuqw {
font-family:'Open Sans', Helvetica, Arial, sans-serif;
right:0;
border-top:2px solid #000;
border-bottom:2px solid #000;
width:100%;
overflow:hidden;
padding:0;
}

#RWGmnuqw ul {
list-style:none;
margin:0;
padding:0;
}

#RWGmnuqw ul li.kiri {
-moz-border-radius:0 0 0 3px;
-khtml-border-radius:0 0 0 3px;
-webkit-border-radius:0 0 0 3px;
border-radius:0 0 0 3px;
}

#RWGmnuqw ul li.kanan {
-moz-border-radius:0 0 3px;
-khtml-border-radius:0 0 3px 0;
-webkit-border-radius:0 0 3px 0;
border-radius:0 0 3px 0;
}

#RWGmnuqw ul li {
font-weight:700;
width:11%;
float:left;
text-align:center;
border-right:1px solid #333;
background:#04BDFA;
border-left:none;
}

#RWGmnuqw ul li a {
display:block;
color:#FFF;
line-height:18px;
font-size:15px;
padding:19px 0;
text-decoration:none;
}

#RWGmnuqw ul li a:hover {
text-decoration:none;
color:#fff;
cursor:pointer;
background:#005C91;
}

#RWGmnuqw ul li.home {
float:left;
height:56px;
background:#005C91;
width:11.1%;
border-right:1px solid #333;
-moz-border-radius:0 0 3px 3px;
-khtml-border-radius:0 0 3px 3px;
-webkit-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
}

#RWGmnuqw ul li.home a {
color:#FFF;
padding:18px 0;
}

#RWGmnuqw ul li.home a:hover {
color:#fff;
background:#04BDFA;
-moz-border-radius:0 0 3px 3px;
-khtml-border-radius:0 0 3px 3px;
-webkit-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
}

#RWG-ioio {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCtqwyOdYILpIQGK7BoX-8g-GrUb5JyY3AHQnRl5fZ4uV88E23m5dZnM2Oz1FI49Z0m0d-xuO7QOxinywYje0PcxuY7fJqMhcXoebF_UOGi-ekP6qjHREAr9FNaFDlEEA_ef1yUMuw3Vjt/s1600/bg-RWG.png) repeat scroll top left;
max-width:1150px;
width:1150px;
margin:0 auto;
}

</style>

<div id='RWG-ioio'>
<div id='RWGmnuqw'>
<ul>
<li class='home'><a href='http://www.widgetgenerators.com'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpJ15KOipmB6CbZZK8zZznSqHy8OOXK9ipd_u03iBWjHZLJIMglCE9xGkNYDm0Y48amLTcAkyGWXmyntgph85SFuyq7Dxegcb0WqZbrSw5Nr4fSljCkek_-W1DN_6Q5DgrpzQ7UpMD-thS/s1600/homeRWGmnu.png' style='margin-right:10px'/>HOME</a></li>
<li><a href='#'>Business</a></li>
<li class='kanan'><a href='#'>Technology</a></li>
<li><a href='#' target='_blank'>Application</a></li>
<li><a href='#'>Entertainment</a></li>
<li><a href='#'>Economy</a></li>
<li><a href='#'>Social Media</a></li>
<li><a href='#'>Sports</a></li>
<li class='kiri'><a href='#'>Lifestyle</a></li>
</ul>
</div></div>

9.Simpan Widget Anda dan Anda Selesai.

Cara Mengganti:

Gantilah # dengan link anda.
Gantilah background Oren dengan nama tab Anda.
Gantilah 1150px dengan lebar blog Anda sendiri dalam piksel (Opsional)

☯Kevin's Boysz☯

Pages

Friday, 28 February 2014

Cara Membuat Tombol/Button Keren Di Blog v2

Cara Membuat Tombol/Button Keren Di Blog v1

Tambahkan CSS Murni Menampilkan Kontak Sosial Widget

Tambahkan Pro Biru Splashish Menu Horisontal