How to add keyboard style key symbol in Blog post by CSS

Step by step instructions to include console style key image in Blog post by CSS While we go for posting instructional exercise at that point regularly we utilize some console alternate route key in test structure. For instance: Press Ctrl+F , Ctrl+C, Ctrl+V. Those guidance in text structure really not looking proficient. Furthermore, some blogger use picture rather than text and that may influence blogger layout stacking time. The arrangement of this alternative is to use CSS coding accordingly you can show console key picture by utilizing basic CSS code. Here I will show 2 sort of key style light and dull. So we should continue to the instructional exercise- 1. Light shading console style key image For incorporating CSS code of light shading key image you can follow the underneath steps- Step 1Sign into your blogger account and go toblogger dashboard Step 2On Blogger Dashboard Click-Template - Edit HTML Step 3Now discover the/b:skinby squeezing Ctrl+F (Windows) or CMD+F (Mac) Step 4Paste the beneath CSS code above/b:skinand hit theSave templatebutton. kbd{ border:1px strong dark; text style size:1.2em; box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444; - webkit-fringe radius:3px; - moz-fringe radius:3px; fringe radius:3px; margin:2px 3px; padding:1px 5px; } Step by step instructions to Implement the light shading code in post Subsequent to including the CSS code now we will make the code work in blog entry. So to do this simply follow the underneath steps- Step 1Sign into your blogger account and go toblogger dashboard Step 2On Blogger Dashboard Click-New post Step 3Now switch the post editorial manager in HTML mode at that point reorder any code from underneath kbdCtrl/kbd+kbdF/kbd kbdCtrl/kbd+kbdC/kbd kbdCtrl/kbd+kbdV/kbd Stage 4 presently go to Compose mode and in the wake of completing your substance composing distribute it. 2. Dim shading console style key image For coordinating CSS code of dim shading key image you can follow the beneath steps- Step 1Sign into your blogger account and go toblogger dashboard Step 2On Blogger Dashboard Click-Template - Edit HTML Step 3Now discover the/b:skinby squeezing Ctrl+F (Windows) or CMD+F (Mac) Step 4Paste the beneath CSS code above/b:skinand hit theSave templatebutton. kbd{ border:1px strong dark; text style size:1.2em; box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #4d4d4d, 0 2px 0 3px #444; - webkit-fringe radius:3px; - moz-fringe radius:3px; fringe radius:3px; margin:2px 3px; padding:1px 5px; } Step by step instructions to Implement the dull shading code in post Subsequent to including the CSS code now we will make the code work in blog entry. So to do this simply follow the underneath steps- Step 1Sign into your blogger account and go toblogger dashboard Step 2On Blogger Dashboard Click-New post Step 3Now switch the post proofreader in HTML mode at that point reorder any code from underneath kbdCtrl/kbd+kbdF/kbd kbdCtrl/kbd+kbdC/kbd kbdCtrl/kbd+kbdV/kbd Stage 4 presently go to Compose mode and subsequent to completing your substance composing distribute it. Customization You can alter the key letter by changing Ctrl and F. You can compose anything you like. To change the shading simply supplant the shading code from - box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444; or then again - box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #4d4d4d, 0 2px 0 3px #444; On the off chance that you have any inquiry respect this, at that point don't hesitate to leave a remark beneath. Ideally I will answer you at the earliest opportunity. Much obliged.