Welcome to pagalcoder.tk
  • Recent Posts

    Keyboard style text effect in blogger using css

    Keyboard style text effect in blogger using css


    Follow these steps to make a text appear as keyboard key


    Step 1 - Open Blogger.com, goto theme, click Edit HTML.
    Step 2 - Press Ctrl + F to search for ]]></b:skin> , now copy the code given below, and paste it above that (]]></b:skin>).
    kbd {
    
        -moz-border-radius: 3px;
    
        -webkit-border-radius: 3px;
    
        border-radius: 3px;
    
        border: 1px solid gray;
    
        padding: 1px 5px;
    
        margin: 0 5px;
    
        font-family: courier new;
    
        font-size: 1.2em;
    
        -webkit-box-shadow: 1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
    
        -moz-box-shadow: 1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
    
        box-shadow: 1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;
    
        background: -moz-linear-gradient(left, #fff 0%, #e2e2e2 25%);
    
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(25%, #e2e2e2));
    
        background: -webkit-linear-gradient(left, #fff 0%, #e2e2e2 25%);
    
        background: -o-linear-gradient(left, #fff 0%, #e2e2e2 25%);
    
        background: -ms-linear-gradient(left, #fff 0%, #e2e2e2 25%);
    
        background: linear-gradient(left, #fff 0%, #e2e2e2 25%);
    
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2', GradientType=1)
    
    }
    
    
    
    kbd.space {
    
        padding: 0 90px
    
    }
    
    
    
    kbd:hover {
    
        cursor: default
    
    }

    3. Click on "Save Theme", this way you have added your CSS Styles to your page.

    Now to activate that effect and implement it on blogger posts, follow these steps carefully.

    Step 1 - Write your desired post.

    Step 2 – Once you have completed writing your post, add this code before and after the text you want to add the effect.

    <kbd>Your text for applying the effect</kbd>

    No comments

    Featured Post

    Aquaman Movie Review

    AQUAMAN Release Date Dec 14, 2018 Cast Jason Momoa, Willem Dafoe, Patrick Wilson, Amber Heard Director James Wan Music Rupert Gre...