Langsung ke konten utama

Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS

Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSSTag script kbd biasanya di gunakan untuk menampilkan teks dalam bentuk penulisan kode. Kode ini biasa digunakan para pengembang untuk membagikan cara-cara tentang pemrograman. Untuk itu kali ini saya akan membagikan artikel tentang cara membuat efek tombol keyboard di blogger dengan css.

kenapa dari awal saya bilang tag script kbd, memang untuk memanggil tombol keyboard ini, kita harus menggunakan tag kbd tersebut. sama seperti pada saat memanggil tag pre ataupun code.

(Baca juga : Cara Membuat Prism Syntax Highlighter untuk Menampilkan Script Code di Blogger)

Untuk yang ingin tahu bentuknya, berikut ini adalah contohnya.
Menambahkan Efek Tombol Keyboard Untuk Teks di Blogger dengan CSS
Contoh tag kbd dengan efek tombol keyboard
Gimana, keren kan?
Bagi yang ingin tahu cara memasang script kbd ini, ikuti langkah-langkah dari saya berikut ini.


Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS

1. Cara Memasang Efek Tombol Keyboard Dengan CSS di Template Blogger

  • Langkah pertama masuk ke akun Blogger kalian
  • Pilih menu Tema, kemudian pilih Edit HTML
  • Cari kode ]]></b:skin>, Kemudian masukan skrip di bawah ini tepat di atasnya
kbd{
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;
}
  • Setelah selesai pilih Simpan tema.


2. Cara Memasang Efek Tombol Keyboard di Artikel

  • Masuk ke menu POS lalu pilih Entri baru
  • Pilih tab HTML kemudian masukan tag script kbd nya seperti ini
<kbd>masukan teks kalian di sini</kbd>
  • Setelah selesai membuat artikel, pilih Publikasikan
  • Jika berhasil maka tampilannya akan seperti ini.
Membuat Tombol Keyboard Pada Postingan Blog
Contoh teks apabila kbd berhasil

(Baca juga : Cara Membuat Tombol Share Bergaya Flat di Blogger)

Demikian tutorial dari saya mengenai cara membuat efek tombol keyboard di blogger dengan css. Jika ada pertanyaan tentang cara memasangnya, atau tentang efek tombol keyboard tersebut, silahkan masukan di kolom komentar.

Terima kasih sudah berkunjung di blog saya ini. Untuk tutorial yang lainnya dari saya, silahkan tetap kunjungi blog Tutorial Umum.

Postingan populer dari blog ini

Cara Memasang In-Article Ads Google AdSense Secara Otomatis

Baru-baru ini Google AdSense memunculkan fitur iklan yang terbaru. Fitur iklan ini terbilang lebih efektif di bandingkan fitur iklan sebelumnya, karena lebih responsive dan memudahkan pengunjung untuk melihat iklan yang di munculkan di sebuah blog atupun website. Fitur iklan ini antara lain adalah In-feed ads , dan In-article ads . Dimana In-feed ads digunakan untuk memasang iklan di tengah pilihan artikel. Dan In-article ads di gunakan untuk memasang iklan di tengah artikel yang ada. (Baca juga : Download Template Premium Paling Laris 2017, Hijau Magazine V1.0 Template ) Namun pada kesempatan kali ini, saya hanya akan memberikan cara memasang In-articel Ads secara otomatis . Kemudian untuk langkah pemasangannya ikuti langkah-langkah dari saya berikut ini. Cara Memasang In-Article Ads Google AdSense Secara Otomatis L angkah pertama masuk ke akun Google AdSense anda Pilih menu My Ads , kemudian pilih Content , pilih Ad units , pilih tombol Unit iklan baru Masuk ke Unit iklan baru Ke...

Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger

Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger - Setelah sebelumnya saya membagikan tutorial cara membuat widget recent comments ringan di blog, kali ini saya akan membagikan widget yang sama tapi dalam bentuk yang berbeda. Apa bedanya ? Di dalam widget komentar terbaru ini sudah ada judul postingannya, jadi akan terlihat artikel apa yang terakhir di komen oleh pengunjung blog. Untuk masalah kecepatan, widget ini tidak akan menggangu kecepatan blog, jadi kalian tidak perlu khawatir untuk memasang widget ini. (Baca juga : Cara Membuat Widget Recent Comments Ringan di Blog ) Widget ini saya temukan di blog Kang Ghani yang sering membagikan berbagai tutorialnya. Bagi yang ingin tahu bagaimana cara memasangnya, ikuti langkah-langkah berikut ini. Cara Memasang Widget Komentar Terbaru Dengan Judul Postingan di Blogger Langkah pertama masuk ke akun blogger kalian Kemudian pilih menu Tata Letak , kemudian pilih lokasi widgetnya Pilih Tambahkan Gadget , kemudian pili...

3 Langkah Mudah Download Video Youtube Tanpa Plugin

Youtube adalah sebuah situs web yang memungkinkan para penggunanya untuk mengunggah, menonton, dan membagikan video . Situs youtube ini bahkan termasuk 3 situs yang paling sering di kunjungi di dunia. Lalu bagaimana cara download video melalui Youtube? Padahal Youtube tidak menyediakan tombol download. Untuk itulah kali ini saya akan memberikan tutorial 3 langkah mudah download video youtube tanpa plugin . (Baca juga : Cara Menyembunyikan File dan Folder yang Ada di Komputer ) Di sini saya menggunakan situs savefrom.net untuk mendownload video youtube tersebut. Sebetulnya dari savefrom.net , kita sudah bisa mendapatkan plugin untuk mendownload youtube tersebut, tetapi untuk langkah yang lebih mudahnya kita akan melangsungkan cara download video youtubenya. Bagi yang masih penasaran cara mendowload videonya, ikuti lagkah-langkah dari saya berikut ini. Langkah-langkah Download Video Youtube Tanpa Plugin Buka situs Youtube , Buka video yang ingin di download Ketikan ss sebelum link yout...

Cara Membuat Widget Recent Comments Ringan di Blog

Widget recent comments berfungsi untuk memperlihatkan komentar terakhir dari para pengunjung dan admin. Widget Recent Comments adalah widget yang di perlukan di setiap blog. Karena dengan widget ini menandakan bahwa blog tersebut masih aktif dan memiliki banyak pengunjung. Widget ini masih terbilang simple dan ringan, sehingga kalian tidak perlu takut dengan loading blog kalian. (Baca juga : Cara Membuat Widget Komentator Terbaik di Blogger ) Untuk cara memasangnya ikuti langkah-langkah dari saya berikut ini. Cara Memasang Widget Recent Comments Ringan di Blog Langkah pertama masuk ke akun blogger kalian Pilih menu Tema, lalu pilih Edit HTML Masukan skrip di bawah ini sesudah kode <head> atau sebelum kode </head> <script type='text/javascript'> //Recent Comments Settings var numComments = 5 ; var characters = 60; </script> <script type='text/javascript'> //<![CDATA[ //Recent Comments var numComments=numComments||5,characters=characte...

Cara Membuat Widget Artikel Terbaru Super Ringan di Blog

Widget artikel terbaru adalah widget yang paling penting dalam sebuah blog, karena pengunjung blog harus tahu apa saja artikel yang sedang kita update. Widget artikel terbaru juga sangatlah penting jika kita sedang ingin mendaftar menjadi publisher di Google Adsense . Widget ini sangat di rekomendasikan bagi kalian dalam tahap review adsense. Untuk itulah kali ini saya akan memberikan cara membuat widget artikel terbaru . Baca juga :  Cara Mudah Membuat Widget Artikel Pilihan Di Blog Widget yang saya berikan ini adalah widget yang ringan, jadi tidak perlu takut untuk memasang widget ini. Baiklah untuk cara memasang widget artikel terbaru di blog, ikuti langkah-langkah dari saya berikut ini. Baca juga :  Cara Membuat Widget Recent Comments Ringan di Blog Cara Memasang Widget Artikel Terbaru Super Ringan di Blog Langkah pertama masuk ke akun Blogger kalian. Pilih menu Tata Letak . Kemudian pilih lokasi widget yang kalian inginkan, pilih Tambahkan Gadget . Lalu pilih HTML/Javasc...