Sabtu, 21 Juli 2012

Cara Membuat Tombol Cantik Dengan CSS3 Di Blog


By on 22.13

CSS - Kali ini saya akan membahas bagaimana cara membuat tombol cantik, keren dengan CSS3 untuk blog. Mungkin sebagian dari kamu pingin membuat sebuah tombol yang menuju ke beberapa link dan kamu pingin tombol itu keren dan cantik. CSS by Lateshack.


1. Login ke blog kamu.
2. Pilih Rancangan > Edit HTML > Cari kode ]]></b:skin>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode yang dicetak tebal di atas.
.awesome, .awesome:visited {
background: #222 url(http://4.bp.blogspot.com/-ZZiYrEqBOcM/UAmqhzAdSWI/AAAAAAAABC4/iz5ScL_5Pj4/s1600/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-family:Calibri, Arial, sans-serif;
}
.awesome:hover { background-color: #111; color: #fff; }
.awesome:active { top: 1px; }
.small.awesome, .small.awesome:visited { font-size: 18px; padding: ; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited { font-size: 24px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited { font-size: 30px; padding: 8px 14px 9px; }
.green.awesome, .green.awesome:visited { background-color: #91bd09; }
.green.awesome:hover { background-color: #749a02; }
.blue.awesome, .blue.awesome:visited { background-color: #2daebf; }
.blue.awesome:hover { background-color: #007d9a; }
.red.awesome, .red.awesome:visited { background-color: #e33100; }
.red.awesome:hover { background-color: #872300; }
.magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; }
.magenta.awesome:hover { background-color: #630030; }
.orange.awesome, .orange.awesome:visited { background-color: #ff5c00; }
.orange.awesome:hover { background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited { background-color: #ffb515; }
.yellow.awesome:hover { background-color: #fc9200; }
.pink.awesome, .pink.awesome:visited { background-color: #e22092; }
.pink.awesome:hover { background-color: #c81e82; }
Simpan Template.

Dan sekarang untuk membuat tombolnya. Disini ada beberapa ukuran ada yang besar, sedang dan kecil. Jadi pilih salah satu satu.

UKURAN BESAR
<a href="LINK" class="large awesome">LINK NAME</a>
<a href="LINK" class="large blue awesome">LINK NAME</a>
<a href="LINK" class="large pink awesome">LINK NAME</a>
<a href="LINK" class="large magenta awesome">LINK NAME</a>
<a href="LINK" class="large green awesome">LINK NAME</a>
<a href="LINK" class="large red awesome">LINK NAME</a>
<a href="LINK" class="large orange awesome">LINK NAME</a>
<a href="LINK" class="large yellow awesome">LINK NAME</a>
UKURAN SEDANG
<a href="LINK" class="medium awesome">LINK NAME</a>
<a href="LINK" class="medium blue awesome">LINK NAME</a>
<a href="LINK" class="medium pink awesome">LINK NAME</a>
<a href="LINK" class="medium magenta awesome">LINK NAME</a>
<a href="LINK" class="medium green awesome">LINK NAME</a>
<a href="LINK" class="medium red awesome">LINK NAME</a>
<a href="LINK" class="medium orange awesome">LINK NAME</a>
<a href="LINK" class="medium yellow awesome">LINK NAME</a>
UKURAN KECIL
<a href="LINK" class="small awesome">LINK NAME</a>
<a href="LINK" class="small blue awesome">LINK NAME</a>
<a href="LINK" class="small pink awesome">LINK NAME</a>
<a href="LINK" class="small magenta awesome">LINK NAME</a>
<a href="LINK" class="small green awesome">LINK NAME</a>
<a href="LINK" class="small red awesome">LINK NAME</a>
<a href="LINK" class="small orange awesome">LINK NAME</a>
<a href="LINK" class="small yellow awesome">LINK NAME</a>
Ganti kata LINK dengan URL yang dituju dan kata LINK NAME dengan nama yang kamu inginkan.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

7 komentar:

  1. Wow! Mantap boss! Ini dia yg ku cari dari kemaren!! I like this Blog, blogseno.com

    BalasHapus
  2. Keren nih tutornya, thanx for share ;)

    BalasHapus
  3. bagus gan, udah kebanyakan widget tapi blog ane hhe

    maen" ya gan d blog saya http://largo-kun.blogspot.com/

    BalasHapus
  4. makasih atas ilmunya gan semoga bermanfaat.

    BalasHapus
  5. kalau mau variasi tombol link downloadnya gimana gan ? maksudnya kode scriptnya ? yang bisa masukin gambar

    BalasHapus
  6. Wah baru tahu saya, makasih mas artikelnya bermanfaat

    jual sepatu

    BalasHapus