Add Keyboard Keys Effect To Your Text in Blogger with CSS

Add Keyboard Keys Effect To Your Text in Blogger with CSS - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Add Keyboard Keys Effect To Your Text in Blogger with CSS !! Semoga tulisan dengan kategori Blog Design !! css !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Add Keyboard Keys Effect To Your Text in Blogger with CSS ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->


For many of us the design and the template are the most important, making our readers be more interested and coming back to our blog. There's an HTML element meant for marking up keyboard keys named <kbd> which can be styled with CSS, so why not use it to make those elements look the keyboard keys?

Thus, in this tutorial, I am going to show you how to create a keyboard keys effect with CSS. It doesn't require images so your blog will load faster.

how to add keyboard keys with css in blogger

How to Add Keyboard Keys to Blogger


Step 1. From Blogger Dashboard, select your blog and go to Template > Edit HTML

edit the html of blogger template

Step 2. Click anywhere inside the code area, press the Ctrl + F keys and search for this piece of code:
]]></b:skin>
Screenshot
Click on the arrow to expand the code

Step 3: Just above ]]></b:skin> paste this CSS style:
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;
}
Step 4. To save the changes, press the Save change button.

Finally, we need to add the html <kbd> tags to the text on which we want to apply the keyboard keys style.
From your blogger's dashboard, go to create a New Post, write the text on which you want to apply the style and go to the HTML tab. Before and after the text, add the following HTML tags:
<kbd>Ctrl</kbd> + <kbd>F</kbd>

Screenshot
text with keyboard key effect

This will make it to look like this:

Ctrl + F

Demikian info Add Keyboard Keys Effect To Your Text in Blogger with CSS, Semoga dengan adanya postingan ini, Anda sudah benar benar menemukan informasi yang memang sedang anda butuhkan saat ini. Bagikan informasi Add Keyboard Keys Effect To Your Text in Blogger with CSS ini untuk orang orang terdekat anda, Bagikan infonya melalui fasilitas layanan Share Facebook maupun Twitter yang tersedia di situs ini.

أحدث أقدم