Membuat Button CSS Keyboard Shortcut Di Blogger

CSS Keyboard Shortcut

Button CSS Keyboard Shortcut

Cara Memasang Button Keyboard Shortcut Di Postingan Blogger Dengan Css, Apa kabar sobat blogger tamvan, kali ini saya akan membagikan tutorial cara memasang kotak pilihan untuk shortcut keyboard di blogger...

Keyboard Shortcut fungsinya untuk membedakan mana tulisan dan mana perintah pada sebuah blog tutorial, dengan menggunakan tombol ini mungkin pengunjung akan mudah memahami istilah dari tulisan yang kalian maksud..

Untuk memasang Keyboard Shortcut ini sangat mudah, kita hanya menggunakan css saja, nah untuk tutorialnya mari kita langsung saja menuju tips n triknya...

Cara Membuat Tombol Keyboard Shortcut Di Blogger Dengan Css


  • Pertama agan login dulu ke blogger.com
  • Setelah login kalian masuk ke Template, Edit HTML
  • Lalu cari kode </head> Gunakan Kombinasi Keyboard Ctrl + f Untuk Mempercepat Pencharian
  • Setelah ketemu, kalian copy kode dibawah ini terus masukan di atas kode tadi
    • 
<style type='text/css'>
/*keyboard shortcut*/
kbd{position:relative;border:1px solid gray;font-size:1.2em;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;border-radius:3px;margin:2px 3px;padding:1px 5px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
kbd:active{border:2px solid gray;font-size:1.2em;box-shadow:2px 0 2px 0 #eee,0 3px 0 3px #ccc,0 3px 0 4px #444;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;margin:3px 4px;padding:2px 6px;transform:translateY(4px)}
</style>
  • Setelah di pasang, Save Template n selesai
  • Sekarang kita tinggal menampilkan kode tersebut di postingan blogger
  • Silahkan bikin postingan baru yang ingin di pasang Tombol Keyboard Shortcut
  • Kalo sudah pilih bagian edit HTML, jangan compose nanti htmlnya g bakalan bekerja!! Tampilannya seperti berikut...

  • Kalo sudah kalian masukan kode dibawah ini ke dalamnya..!!
    • 
<kbd>Ctrl</kbd> + <kbd>F</kbd>
    Silahkan rubah tulisan CTRL dan F Dengan tulisan yang kalian masu
    Contoh Penulisan Sebagai Berikut 
    
Gunakan Kombinasi Keyboard <kbd>Ctrl</kbd> + <kbd>f</kbd> Untuk Mempercepat Pencharian
  • Nah kalo sudah, kalian tinggal publikasikan dan selesai... :)
  • Done n Terima Kasih Sobat

Cukup sekian dan terima kasih, semoga artikel tentang Tutorial Membuat Button CSS Keyboard Shortcut Di Blogger ini bermanfaat bagi semuanya :)

Jangan lupa tinggalkan jejak kalian di kolom komentar ya :)
15 komentar
  1. UnknownAugust 22, 2016 at 11:52 AM

    klakuan mastah :v slu minder dah ngalihat post baru" na :D
    bokmard dulu ya a :V bgus pisan teu a

    ReplyDelete
    Replies
    1. Mas TamvanAugust 22, 2016 at 11:55 AM

      Wah si akang mah sok ngarendah :3 padahalmah lebih jago ti saya :)
      Mangga atuh kang, moga bermanfaat :)

      Delete
  2. AnonymousSeptember 23, 2016 at 5:08 AM

    Mas kalo untuk membuat yang ini bagaimana ya, yang di kotak blogger nya itu : https://2.bp.blogspot.com/-mjBj8R4as7s/V-Ua_BNXnHI/AAAAAAAAAvw/YCj1CQDmxpAuxfF_rOMjlr84D5_AYVm6ACLcB/s1600/CARA%2BMEMBUAT%2Btombol%2Bkotak.png

    ReplyDelete
    Replies
    1. Mas TamvanSeptember 23, 2016 at 5:19 AM

      kalo yg ini lebih simple gan, tinggal kasih border, pading doang.

      Delete
    2. Ini RizkyApril 9, 2017 at 2:37 AM

      tutorialnya mas bikin donk

      Delete
    3. Mas TamvanApril 9, 2017 at 4:25 AM

      Nih gan, pemasangannya sama seperti di atas ↑

      https://jsfiddle.net/yrkvfLkh/

      Delete
  3. UjangJuly 10, 2017 at 8:58 PM

    Gan punya ane kan juga anti kopas. Nah biar yang di dalam kotak itu jadi bolah di kopas gimana? Hanya yang didalam kotak itu aja yg bisa di kopas. Yg diluar masih tetep anti kopas. Gimana gan mastamvannnnn, bantuiiiinn

    ReplyDelete
    Replies
    1. Mas TamvanJuly 10, 2017 at 9:02 PM

      Coba Pake Tutorial Ini.
      Kalo Bisa Anti Copasnya Jangan Pake js ↓
      http://mastamvan.blogspot.com/2016/05/cara-agar-blog-tidak-bisa-di-copy-paste.html

      Delete
    2. UjangJuly 10, 2017 at 9:06 PM

      Anti kopas yang lama di hapus ya?

      Delete
    3. Mas TamvanJuly 10, 2017 at 9:24 PM

      Tergantung, Kalo agan pakenya CSS ga usah d ganti, cukup tambahkan Css Untuk Mencopy Bagian Tertentunya saja.
      Kalo pake Javascropt/ jquery harus d ganti.

      Delete
    4. UjangJuly 11, 2017 at 6:29 AM

      Kata yg di blockquote emang bisa di copy gan, setelah ane nyoba anticopas dari blog agan (http://mastamvan.blogspot.com/2016/05/cara-agar-blog-tidak-bisa-di-copy-paste.html). Ane musti nyopot dulu anti copasnya yg dari JS. Tapi untuk kata yg di keyboardin masih anti copas gan. Gimana ini?

      Delete
    5. UjangJuly 11, 2017 at 6:32 AM

      Apa ane tambahin kalimatnya di Css gan? kek .post blockquote,.comment_body p,. post pre, dll gan. Tapi kalimatnya apa yaa buat kata yang dikeyboardin ntu? Terima kasih sekali mas tamvan. Blog agan keren dan bagus buat para blogger yang suka ngotak ngatik. Ane bantu share di facebook ntar lah sebagai tanda terima kasih ngiyahaha

      Delete
    6. Mas TamvanJuly 11, 2017 at 7:13 AM

      ya gan tambahin juga kode html ini ↓

      kbd

      Delete
  4. RezaJuly 10, 2017 at 9:04 PM

    Berarti anti kopas yg lama harus di hapus dulu gan?

    ReplyDelete
    Replies
    1. Mas TamvanJuly 10, 2017 at 9:25 PM

      Anti Copas yang mana gan? Ini hanya css button aja ga ada anti copasnya.

      Delete