Cara Membuat TextBox dengan Efek Hover dengan CSS3

Cara Membuat TextBox dengan Efek Hover dengan CSS3 – Sudah lama tidak update tentang Tutorial blogging. Oleh karena pada kesempatan kali ini saya akan share ke sobat tentang sebuah trik blogging yang bisa dibilang wah…!! Yakni kita akan membuat sebuah textbox dengan efek hover dengan CSS3.

Tidak seperti texbox pada umumnya yang menjenuhkan dan membosankan maka textbox ini terkesan menarik karena dibuat dengan efek hover apalagi ditambah atau dibangun dengan CSS3.

Mau tau seberapa menarik textbox yang saya maksud? Monggo langsung dicoba aja.

1. Login ke blogger atau klik disini
2. Pilih Template » Edit Html
3. Jangan lupa centang Expand Template Widget.
4. Tekan Ctrl+F  kemudian cari code ]]></b:skin>
5. Copy paste code di bawah ini dan letakkan di atas code ]]></b:skin>

/* TextBox */
.junedalbughisybox{
color: white;
background-color: black;
width: 500px;
margin: 5px 5px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}
.junedalbughisybox:hover{
background-color: CornflowerBlue ;
}
.junedalbughisybox:active{
background-color: darkgreen ;
}

6. Simpan template.

Cara penggunaan pada postingan adalah sebagai berikut:

<div class="junedalbughsiybox" style="font-family: &quot;Courier New&quot;,Courier,monospace;">
LetakanTulisan Atau Kode Disini
</div>

Catatan:

  • Untuk tulisan yang berwarna merah silahkan ganti dengan tulisan yang sobat inginkanKlik link Demo untuk melihat hasilnya


Lihat Demo


Semoga tutorial kali ini dapat membantu memperindah tampilan postingan blog sobat.

Salam Blogging…!!!

Tidak ada komentar:

Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top