Add Keyboard Keys Effect To Your Text in Blogger with CSS

Discussion in 'Blogging Tips' started by Ben [email protected], Jun 29, 2014.



  1. 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. Ever Wondered, 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.

    [​IMG]
    How to Add Keyboard Keys to Blogger
    Step 1. From Blogger Dashboard, select your blog and go to Template > Edit HTM
    [​IMG]

    step 2. Click anywhere inside the code area, press the Ctrl + F keys and search for this piece of code:
    ]]></b:skin>


    [​IMG]

    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>

    [​IMG]

    this will make it to look like this:

    Ctrl + F

    This is the most commonly used element in Blogs providing tutorials and tips, Like My Post. Hope you'd have liked this Post.



     


    RELATED POSTS


  2. ĐÏĠÏȚÄĻMÄŹÄ

    ĐÏĠÏȚÄĻMÄŹÄ Administrator Staff Member Administrator

    Joined:
    Jun 13, 2014
    Messages:
    1,685
    Likes Received:
    6,259
    Trophy Points:
    113

  3. ★ Spider ★

    ★ Spider ★ Well-Known Member

    Joined:
    Jun 14, 2014
    Messages:
    24
    Likes Received:
    729
    Trophy Points:
    83

  4. Dpagla

    Dpagla Member

    Joined:
    Jun 29, 2014
    Messages:
    70
    Likes Received:
    6
    Trophy Points:
    18


    would you please tell me how can i do it in wordpress please?
     



  5. Ok we will post this wordpress tutorials as soon as possible
     
    Dpagla likes this.

  6. • ȡɦąɲąɲǰą¥ •

    • ȡɦąɲąɲǰą¥ • Well-Known Member

    Joined:
    Jul 11, 2014
    Messages:
    462
    Likes Received:
    563
    Trophy Points:
    113


    useful post....nice kept it up..........
     

  7. jani128

    jani128 New Member

    Joined:
    Nov 9, 2014
    Messages:
    15
    Likes Received:
    0
    Trophy Points:
    3


    keep it up dear and share more gadgets
     

  8. jani128

    jani128 New Member

    Joined:
    Nov 9, 2014
    Messages:
    15
    Likes Received:
    0
    Trophy Points:
    3


    can you please post how to make announcement type post on blog ?
     

  9. Ravi Prakash Singh

    Ravi Prakash Singh New Member

    Joined:
    Oct 14, 2014
    Messages:
    6
    Likes Received:
    0
    Trophy Points:
    1


    Seo kese krte h blog ki
     

Similar Threads: Keyboard Keys
Forum Title Date
Blogging Tips 5 Keys to Building a Clear & Usable Website Mar 21, 2016

Share This Page