25 February, 2012

Membuat tombol, button download jadi lebih gaya

He he hei dah lama ga posting nih, kangen juga pengen posting kira-kira poasting apa yah!! hmm saya tahu gimana kalau cara membuat tombol atau button download atau demo anda jadi lebih gaya dan keren.

Gi mana?? mau oke let's go..

Nah trik dan tips berikut sangat cocok di terapkan untuk blog - blogspot anda yang berhubungan dengan download, baik template, sofeware, lagu, film atau apaupun yang berhubungan langsung dengan download mendownload, supaya penampilan blog anda jadi gi mana gitu (he he he).

Untuk sample button yang sudah jadi anda bisa melihat di : http://kontak07.blogspot.com/2012/02/sample-tombol-button-css.html

Seep cukup sederhana sebenarnya kita hanya memanfaatkan html sederhana dan pengaturan css yang sederhana pula.

caranya :
Login ke dasbor blogger kamu
KLIK template --- Edit Html --- Lanjutkan

cari kode : ]]></b:skin>

dan copy paste kode style css di bawah ini tepat di atas kode ]]></b:skin>


/* download button */
.download { -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7; -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7; box-shadow:inset 0px 1px 0px 0px #bbdaf7; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #84bbf3; display:inline-block; color:#ffffff; font-family:arial; font-size:16px; font-weight:bold; padding:11px 30px; text-decoration:none; text-shadow:1px 1px 0px #528ecc; }

.download:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5; }

.download:active { position:relative; top:1px; }

/* demo button */
.demo { -moz-box-shadow:inset 0px 1px 0px 0px #fce2c1; -webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1; box-shadow:inset 0px 1px 0px 0px #fce2c1; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) ); background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25'); background-color:#ffc477; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #eeb44f; display:inline-block; color:#ffffff; font-family:arial; font-size:16px; font-weight:bold; padding:11px 50px; text-decoration:none; text-shadow:1px 1px 0px #cc9f52; }

.demo:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) ); background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477'); background-color:#fb9e25; }

.demo:active { position:relative; top:1px; }


Sudah kemudian save / simpan template anda.

Sekarang buat postingan baru. Perhatikan pada tab HTML (ingat bukan Tab Compose yap! ingat..ingat he he he!!)

Buat link dengan pengaturan class css dengan memanggil fungsi link dan css yang telah kita buat sebelumnya :


<a href="#" class="demo">demo</a>
<a href="#" class="download">download</a>

Ganti # dengan link dari demo atau link download tujuan anda, beres dan terbitkan entri.

Kamu juga bisa membuat sendiri tombol atau button sesuai dengan style anda sendiri silahkan gunakan css button generator untuk mempermudah. Silahkan ngacir aja langsung ke www.cssbuttongenerator.com

Seep selamat mencoba.. salam

ilustrasi gambar download Paket ikon: Litho System, Desainer : Anthony Piraino

5 comments

  1. Info yg kk gini yang ku cari.cool! thanks ya..

    ReplyDelete
  2. rifkiafrizal09:55

    trimakasih yaa atas tutornya,,,
    oh yaa itu cara ganti color sama font nya gimna,,,
    mohon penjelasan,,,

    ReplyDelete
  3. hallo bro, tombol download di atas aku ngambil pengaturan warna link dan fontnya dari style global yg sudah ada di CSS nya bro.


    kalo di blogspot di CSSnya cari pengaturan link biasanya di kode a, a:hover, a.hover (pokoknya yang sejenis itu) kemudian di beri { font-family: ganti dengan font famili yg di kehendaki; }


    atau kalo pengaturan globalnya nggak mau di pake bikin class baru aja di dalam div class tombolnya,


    Contoh div tombol di atas


    demo
    download


    Berarti CSS nya :


    a.demo { font-family:isi dengan font yg di kehendaki; font-size: 18px; color: #warna yg di kehendaki; }


    a.download { font-family:isi dengan font yg di kehendaki; font-size: 18px; color: #warna yg di kehendaki; }


    spt itu kurang lebih.

    ReplyDelete
  4. suhendartkj09:15

    thanks gan , artikel sangat menarik

    suhendartkj.blogspot.com

    ReplyDelete
  5. Tyasmahardhika00:28

    makasih infonya gan.

    ReplyDelete


Copyright © 2016 Photoshop blog dan Blogger