Text Efect Tombol Keyboard dengan CSS3 Pada Tulisan Blog

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.

efek keyboard

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 atau klik disini»
2. Pilih Template » Edit Html » Lanjutkan.
3. Jangan lupa beri centang pada Expand Template Widget.

4. Klik Ctrl+F kemudian cari code ]]></b:skin>

5. 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>

 
Catatan:
  • Tulisan yang berwarna merah silahkan sobat ganti dengan huruf atau kata yang sobat inginkan.

Lihat Demo

Semoga tutorial kali ini dapat memperindah penampilan blog sobat. Happy Blogging…!!!

4 komentar:

  1. keren sob infonya..
    thx ya sob udh di share..

    kunjungan baliknya saya tunggu, dan jangan lupa join back blog saya ya sob..
    ^_^
    http://lavixtastar.blogspot.com/

    BalasHapus
  2. Balasan
    1. Weish keren bgt nih tutorialnya...... sedot lagi hehe

      Hapus
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