Tex Box Dengan Hover Effect Css3
Selamat siang sobat blogger setelah senelumnya kita membahas tentang Membuat Widget TOP Comentator kali ini Kolom Tutorial™ akan mencoba sebuah tutorial sederhana dengan teknik CSS Hover effect, Tutorial kita kali ini adalah tentang pembuatan Tex Box Dengan Hover Effect Css3, freviewnya kurang lebih seperti pada gambar dibawah ini :
VIEW A DEMO
Dan sobat mari kita lanjut ke tutornya :
1. Seperti biasa Login ke Akun Blogger sobat
2. Klik Template Klik Edit HTML
3. Jangan Lupa Centang Expand Widget Template
4. Cari kode ]]></b:skin> dan letakan kode CSS dibawah tepat diatas kode
Keterangan :
Untuk Penulisan dalam postingan atau widget gunakan kode :
3. Jangan Lupa Centang Expand Widget Template
4. Cari kode ]]></b:skin> dan letakan kode CSS dibawah tepat diatas kode
.KTboxmessage
{
color: white;
background-color: black;
width: 500px;
margin: 5px 60px;
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;
}
.KTboxmessage:hover
{
background-color: CornflowerBlue ;
}
.KTboxmessage:active
{
background-color: darkgreen ;
}
5. Klik SaveKeterangan :
Untuk Penulisan dalam postingan atau widget gunakan kode :
<div class="KTboxmessage" style="font-family: "Courier New",Courier,monospace;">LetakanTulisan Atau Kode Disini</div>
Ok soba, selamat berkreasi sekian artikel tentangmembuat Tex Box Dengan Hover Effect Css3, happy blogging and enjoy.
Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.
wah keren nih sobat tutornya,,,,sip dan lanjutkan kawan. salam sukses
ReplyDeleteSalam sukses juga sobat, thank atas kunjungannya
Deletetextbox ternyata bisa dikasih effect ya??
ReplyDeleteterimakasih infonya sob :)
Iya mas bisa, hehheheh, sama2 gan thank atas kunjungannya
Deletewuih keren sob, nggak perlu lagi JS buat bikin efek2 keren, tapi kalau mw ganti warna sama bentuk misalnya, gimana caranya sob? :)
ReplyDeleteyap betu, kalau mau diganti warna silakan tinggal di edit aja kode CSS nya mas.
DeleteWaaah keren gan tutornya :)
ReplyDeleteMakasih gan, makasih juga atas kunjungannya
Deleteboleh nie tutorialnya sob, coba dlu, terima kasih
ReplyDeleteSilakan mas, thank atas kunjungannya
Deletehallow sobat hadir lagi dimari ,,,masih seputar tex box sob makasih sudah berbagi.
ReplyDeletesukses selalu dan happy blogging
Makasih banyak sob, atas kunjungannya, sukses juga buat mas cahyo
DeleteKeren text box nya sob, penampilan nya seperti terminal /cmd gitu! Nice :)
ReplyDelete@mas Daniel, hahhaha bisa aja ni mas, terimakasih atas kunjungannya, sukses selalu.
Deletenambah css takut gemuk loadingnya :D .
ReplyDeleteBisa aja ni mizz, masukin css nya sambil diet aja mizz, hehehhhe
Deleteasyk dan keren da tutor baru lagi neh ... sip kang nanti saya coba dah
ReplyDeleteok mas silakan , terimakasih banyak atas kunjungannya
Deletenice,ijin sedot gan.
ReplyDeleteSilakan mas, terimakasih banyak atas kunjungannya.
Deletekeren sob... boleh tak coba gak??
ReplyDeleteSilakan Mas, terimakasih atas kunjungannya
DeleteGOOD
ReplyDeleteGan Followers Dong Blogger Saya
www.mikaruholic.blogspot.com
Ok........................
Deletethank kunjungannya
textarea,y keren..ijin pake ya sob...
ReplyDeletesilakan mas, thank kunjungannya
DeleteTutorial yang sangat menarik, terima kasih anda sudah share..Salam kenal. :-d
ReplyDeletesama2 mas, salam kenalkembali..........
Delete