Text Efect Tombol Keyboard dengan CSS3 Pada Tulisan Blog

Rasa ingin tahu anda akan membawa anda pada hal-hal yang baru. 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 untuk memasangnya pada blog sobat maka sobat hanya perlu mengikuti langkah-langkah di bawah ini.

1. Login ke blogger
2. Pilih Template » Edit Html » Lanjutkan.
3. Jangan lupa beri centang pada Expand Template Widget.
4. Pilih Template » Edit Html » Lanjutkan.
5. Jangan lupa beri centang pada Expand Template Widget.
6. Klik Ctrl+F kemudian cari code ]]></b:skin>
7. Copy paste code CSS berikut di atas code ]]></b:skin> 

kbr {
    border: 1px solid gray;
    font-size: 14px;
    box-shadow: 1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    margin: 2px 3px;
    padding: 1px 5px;
}

Cara penggunaannya pada postingan adalah sebagai berikut:

 <kbr>Ctrl</kbr> + <kbr>Shift</kbr> + <kbr>Delete</kbr>

Demo Tutorial

Untuk melihat hasilnya silahkan langsung ke halaman demo melalui link di bawah ini.

Tulisan yang berwarna merah silahkan sobat ganti dengan huruf atau kata yang sobat inginkan.
Semoga tutorial kali ini dapat memperindah penampilan blog sobat. Happy Blogging…!!!