AjatShare

0
Tombol Keyboard Blog - Pernahkah anda melihat blog yang memakai efek tombol seperti keyboard di blog? jika pernah mungkin anda penasaran "Bagaimana cara membuatnya?". Tenang Sob kali ini saya akan membahas itu semua, Cara nya sangat mudah sekali hanya perlu menambahkan CSS saja diblog Anda.
STEP 1 :
  • Loggin Blogger > Template > Edit Html.
  • CTRL+F atau cari kode ]]></b:skin>.
  • Tambahkan Cascading Style Sheet ini di atas kode tsb.
.keyboard { border: 1px solid gray; padding: 1px 5px; margin: 0px 5px; font-size: 1.2em; text-transform: uppercase; color:#555 !important; box-shadow: 1px 0px 1px 0px rgb(255, 255, 255), 0px 2px 0px 2px lightGray, 0px 2px 0px 3px rgb(51, 51, 51); -moz-box-shadow: 1px 0px 1px 0px rgb(255, 255, 255), 0px 2px 0px 2px lightGray, 0px 2px 0px 3px rgb(51, 51, 51); -webkit-box-shadow: 1px 0px 1px 0px rgb(255, 255, 255), 0px 2px 0px 2px lightGray, 0px 2px 0px 3px rgb(51, 51, 51); border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; background: linear-gradient(left center , white 0%, rgb(226, 226, 226) 25%) repeat scroll 0% 0% transparent; background: -moz-linear-gradient(left center , white 0%, rgb(226, 226, 226) 25%) repeat scroll 0% 0% transparent; background: -webkit-linear-gradient(left center , white 0%, rgb(226, 226, 226) 25%) repeat scroll 0% 0% transparent; } .keyboard:active { background: none repeat scroll 0% 0% rgb(119, 119, 119); } .keyboard:hover { opacity: 0.8; cursor: pointer; text-decoration:none; }
  • Kemudian Simpan Template Anda.
STEP 2 :
Ketika posting anda hanya perlu menambahkan kode seperti ini :
<a class="keyboard">CTRL</a>+<a class="keyboard">F</a>
<a class="keyboard">CTRL</a>+<a class="keyboard">A</a>
<a class="keyboard">F1</a>
<a class="keyboard">F2</a>
<a class="keyboard">F3</a>
<a class="keyboard">F5</a>
Maka hasilnya akan seperti ini :
CTRL+F = Fungsi untuk Mencari (Find).

CTRL+A = Fungsi untuk Seleksi Semua Text.

F1 = Fungsi untuk memunculkan Help.

F2 = Fungsi untuk Rename.

F3 = Fungsi untuk Search.

F5 = Fungsi untuk Refresh.

Demikian tutorial membuat efek tombol keyboard diblog, Jika ada yang ditanyakan silahkan di kotak komentar :D.

Catatan :
1. Silahkan berkomentar dengan sopan
2. Berkomentarlah sesuai topik / judul.
3. Dilarang Spam dan menyertakan link aktif.
4. Ingin Request klick OOT (Out of topic)

NB :
5. Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
6. Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
7. Untuk menyisipkan kode, gunakan tag [code]KODE ANDA[/code]

Konversi Kode

 
Top