Cara Membuat Efek Tombol Keyboard dengan CSS3 pada Tulisan di Blog - Ini bermula ketika saya mampir di sebuah blog yang mana saya melihat suatu tampilan yang amat menarik pada tampilan tulisan di blog tersebut yakni terdapat efek tombol keyboard di salah satu postingan.
Karena merasa tertarik akhirnya saya searching di google tentang cara membuat efek tersebut dan ternyata benar dugaan saya ternyata efek itu di peroleh dari CSS3 dan kini keterapkan pada blog saya.
Jika sobat tertarik dengan tutorialnya, silahkan sobat ikuti langkah2 berikut ini:
- Login dulu ke Blogger.com
- Pilih Template > Edit Html
- Lalu Klik Tombol Ctrl+Fkemudian cari code
]]></b:skin> - Copas code Css dibawah ini dan letakan tepat diatas code
]]></b:skin>
/* CSS Keyboard zonayahya.com */
.kbrd {
border-radius: 3px;
border: 1px solid #A3A3A3;
box-shadow: 1px 0px 1px 0px #FFF, 0px 2px 0px 2px #D3D3D3, 0px 2px 0px 3px #888;
box-sizing: border-box;
display: inline;
font-family: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
line-height: inherit;
margin: 0px 5px;
padding: 1px 5px;
text-transform: capitalize;
vertical-align: baseline;
}
Cara penggunaan pada postingan Blog :
<div class="kbrd">Ctrl</div>+<div class="kbrd">F</div>
Catatan :
- Tulisan yang berwarna
merahganti dengan huruf atau angka yang sobat inginkan.
Sekian Postingan dari saya
Semoga Bermanfaat dan Berguna
Jika anda ingin Copy + Paste Camtumkan Link Sumbernya,
tolong hargai saya, Jika anda ingin di hargai maka hargailah orang lain....
Selamat mencoba !!!
dan Semoga Berhasil.
Diposting oleh
Yahya Suteja
di
Pertamaxx
ReplyDeletewah mantap tuh gan tompol keyboard nya, izin coba yah :D
Pertamaxx
ReplyDeletewah mantap tuh gan tompol keyboard nya, izin coba yah :D
haha iya, silahkan dicoba :)
Deletesangat bermanfaat gan :D
ReplyDeleteSangat Bermanfaat gan :D
ReplyDeletewah kren nih mau dicoba dlu nih kayaknya nice
ReplyDeletethanks for sharing
silahkan gan dicoba semoga seskes ya blog nya :D
ReplyDeleteKeren gan ...
ReplyDeleteThanks Gan :thumbup (y)
Deletewah, mantap ni gan cra nya !
ReplyDeletebisa lgsung diprktekin nh.....thanks
kerreeen gan haha ane coba ntar
ReplyDeletemanteb nih mas yahya. izin coba dulu ya mas, hehe.
ReplyDeletekeren mas saya coba dulu deh :3
ReplyDelete