How to Add Keyboard Style Symbol in WordPress posts


How to Add Keyboard Style Symbol in WordPress posts

In this tutorial we are going to see about Add Keyboard Style Symbol in WordPress posts Mostly you are seen in Programming blog’s if you are running a blog related to web design and programming it will help to mention the key shortcuts with Keyboard Style Symbol For Example if I publish a post related to Windows mostly we mention some shortcut keys for run and add commands we mention the keyboard shortcut keys in Text will bold letter but this widget help to mention the shortcut key like  Keyboard Style Symbol in our WordPress posts.

Demo

CTRL + F

just follow our Below steps install to add this keyboard style symbol on your WordPress website.

  • Login t0 your WordPress Dashboard
  • Copy and Paste the below CSS code on your Theme Stylesheet

 

 

bawt-key{
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;
}
  • Now copy the Below PHP shortcode Function code and paste in your theme’s functions.php file

 

 

function awts_keystyle($atts, $content = null) {
extract(shortcode_atts(array(
'link' => '#'
), $atts));
return '<bawt-key>'.$content.'</bawt-key>';
}
add_shortcode('keybt', 'awts_keystyle');
  • Now use this below shortcode to display the Keyboard Style Symbol in your WordPress posts
[keybt]Your Text[/keybt]
  • That’s all Successfully we install the Keyboard Style Symbol widget in our WordPress website  🙂

If you Have Any Doubts Please Free to Comment Here our Team will help you.


Was this article helpful?
Thanks!

Your feedback helps us improve Allwebtuts.com



7 Shares
+12
Tweet
Share4
Pin1
Stumble