Membuat Tombol Dengan CSS Button Maker

 

Wow, Kereenn gan ..  Tombol dengan CSS3.

Contoh Button Gaol

#salah gaul 

Untuk membuat Button entu pertama-tama, Login Blogger, trus pilih Rancangan, Edit HTML ..

Lalu agan Copy paste CSS berikut, taruh di atas kode ]]></b:skin>

 .button {

   border-top: 1px solid #6e6e6e;
   background: #142d78;
   background: -webkit-gradient(linear, left top, left bottom, from(#349ad9), to(#142d78));
   background: -webkit-linear-gradient(top, #349ad9,#142d78);
   background: -moz-linear-gradient(top, #349ad9, #142d78);
   background: -ms-linear-gradient(top, #349ad9, #142d78);
   background: -o-linear-gradient(top, #349ad9, #142d78);
   padding: 3.5px 7px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #e8e8e8;
   font-size: 13px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #455fad;
   background: #455fad;
   color: #adadad;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

Keterangan,

• kode warna itu bisa di ganti dengan kode warna sesukamu.

#bingung ya .. XD. pasti tau lah.

Trus klick Simpan

untuk memakainya di link, tambahkan class='button' di kode linknya.. contohnya spt ini :

<a class="button" href="http://d-efr.blogspot.com/">Link</a>

Mudahh bukann.. hehehe

mau yang lebih mudah lagiii ??

Membuat tombol generator secara online sailahkan buka Button Maker

Setelahh itu silahkan buat tombol sesuai dengan selera agan uheuheue...

Selamat Mencoba ^_^

Read More

CARA MEMPROTEKSI CSS BLOG

Miris ngelihat banyaknya blog-blog teman yang di Plagiatin sama Plagiator. Karena itulah saya buat postingan ini, kalau di copas sertakan sumber yah ^_^. Ikutin Step by Step :)

Sebelum memulai, kamu harus menyiapkan sebuah hostingan, Saya sarankan gunakanGoogleCode karena servernya cepat. Jangan gunakan hostingan gratisan, servernya suka naik turun soalnya :)

1. Compress terdahulu CSS blog anda dihttp://www.cssdrive.com/index.php/main/csscompressor

2. Ambil kode CSS mu, lalu encrypt di http://tools.irvankadhafi.com/jsencrypt/, Sebelum di encrypt jadikan css mu menjadi HTML seperti ini

<style>Isi CSS blog mu</style>

Jika masih gak ngerti ini aku kasih contohnya. Misalkan css blogmu

body{background:url(blablabla);font-family:verdana}
#wrapper{border:2px solid #000;color:#fff;border-radius:8px}

Dijadikan HTML, maka :

<style>body{background:url(blablabla);font-family:verdana}#wrapper{border:2px solid #000;color:#fff;border-radius:8px}</style>

3. Setelah di encrypt, copy hasil encrypt itu ke notepad, dan simpan dengan format .js  misalnya cssku.js (Bisa juga tanpa format)
4.  Upload file yang disimpan itu ke GoogleCode
5. Copy link js nya, lalu jadikan linker, seperti ini

<script src='link-js-kamu' type='text/javascript'>

6. Setelah itu taruhlah linker tersebut diatas html </head>
7. ^_^ Blog anda sudah terproteksi

Jika ada css yang tidak bekerja setelah anda proteksi, lebih baik css itu tidak usah ikut di encrypt :)

NB : Walaupun kamu sudah memproteksinya seaman-aman pun semuanya tetap bisa dibongkar, tapi cara ini hanya untuk mengakali perbuatan Plagiator agar tidak gampang menyuri css anda ^_^

Read More

Cara Membuat CSS Border Triangle

CSS ini paling saya sering pakai dan saya suka gabungkan dengan elemen :before dan :after cuma saya suka kelupaan kode-kodenya, oleh karena itu saya postkan sebagai dokumentasi di blog ini biar tidak bolak-balik search tentang CSS Border Triangle. referensi css ini saya baca dari hompimpaalaihumgambreng.

1. Pmbentukan Triangle(Segitiga)
bisa dilihat pada demo Div dibawah ini:

Div diatas terbentuk dengan css style dibawah ini:

.coba {
  width:0px;
  height:0px;
  border-width:150px;
  border-style:solid;
  border-color: red green blue yellow;
}

dengan kode html :  

<div class="coba">
</div>

Untuk ukuran dari bordernya bisa kamu atur pada kode css border-width, jika belum mengerti pembentukan tampilan dari css triangle ini bisa di ilustrasikan dengan gambar dibawah ini:

2. Menghilangkan sebagian atau semua Border color 
kamu juga bisa membuat tampilan lain menggunakan css border triangle seperti ini :

dengan menambahkan kode transparent pada border-color css stylenya untuk menghilangkan bagian yang diinginkan :

.coba2 {
  width:0px;
  height:0px;
  border-width:50px;
  border-style:solid;
  border-color: black black black transparent
}

Juga seperti ini tinggal kreasikan pemilihan warna dan transparent -nya.

.coba3 {  width:0px;  height:0px;  border-width:50px;  border-style:solid;  border-color: #fc0 #fc0 transparent #fc0}

oke cukup sampai sini saja
semoga artikel ini bermanfaat untuk anda, terimakasih :)

Read More