Header Ads

  • Breaking News

    How To Make My Blogger Template Responsive


    What is Responsive Web Design?

    Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)

    These days, almost everyone have updated their web themes to fit in every screen but some old websites and lazy designers like me don't have updated yet. Yeah! Blogger Yard is not yet responsive because we're busy right here but soon we'll introduce the totally new version of Blogger Yard which will also be responsive.



    1. Navigate to Blogger Dashboard → Template.
    2. Click the gear icon for the mobile.
    3. Now select “Yes. Show mobile template on mobile devices.” and choose your theme.
    4. Click the save button.




    Option 2: Make Your Template Responsive

    Things To Know Before

    Before we start the tutorial, let me know either you will be able to turn responsiveness in your blogger template or not.

    1. CSS Skill: Do you have cascading style sheet skill? Yes? Great! Bringing responsiveness to blogger template is all CSS work and if you've skill in it than you might not face any issue in it.
    2. Template Structure: Do you know the structure of your blogger template? If the template is designed by you than you must know how you've wrapped the header, content and other sections. While making responsive blogger template, we play with each HTML element and for that we must know how the template is structured. If the the template is not designed by you than you can take a look on its structure and study it than you may continue making it responsive.
    3. Useful Chrome Extension: This is not the thing to be known before but we're recommending a useful chrome extension here that will help you a lot to work on responsiveness. Its Resize Window chrome extension that will help you to resize browser window with the size of different device screens. I recommend to work on every screen size that is listed in this extension.


    Adding Meta Tag For Responsiveness

    1. Go To Blogger  Template → Backup Your Template
    2. Click Edit HTML → Search For <head>
    3. Paste The Following Code Below It.
    Save!
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

    There is nothing much difficult with this viewport meta tag. You have to just add it below your <head> and it will start working.

    Working With Media Queries
    Simple css code will render both - on desktop and phone. So we need to specify that the code should be rendered only in specific devices. In this case, we will need to use CSS3 @media Query. Here are  created basic @media query css structure:
    At last click “Apply to Blog”.

    @media screen and (max-width : 1280px) {
    /* For Screen Width Less than Or Equal To 1280 ---*/
    /* CSS CODE HERE FOR DESKTOP DESIGN ---*/
    }
    
    @media screen and (max-width : 1024px) {
    /* For Screen Width Less than Or Equal To 1024 ---*/ 
    /* CSS CODE HERE FOR TABLETS DESIGN ---*/
    }
    
    @media screen and (max-width : 768px) {
    /* For Screen Width Less than Or Equal To 768 ---*/ 
    /* CSS CODE HERE FOR SMALL TABLETS DESIGN ---*/
    }
    
    @media screen and (max-width : 640px) {
    /* For Screen Width Less than Or Equal To 640 ---*/
    /* CSS CODE HERE FOR IPHONE ---*/
    }
    
    @media screen and (max-width : 480px) {
    /* For Screen Width Less than Or Equal To 480 ---*/
    /* CSS CODE HERE FOR SMARTPHONES ---*/
    }
    
    @media screen and (max-width : 320px) {
    /* For Screen Width Less than Or Equal To 320 ---*/
    /* CSS CODE HERE FOR SMALL MOBILES ---*/
    }


    Replace the example text inside /* with the CSS rules you want to use for the above above device types according to their screen widths.
    In the above queries, max-width is used to specify the screen width up to which the CSS codes will work. In the above example we have set max-widths for nearly all type of devices. By using separate coding for each class of devices, we make sure that they don't interfere each other and responsive design works properly on each device.
    For example CSS coding for max-width 480px in above quries will work upto 480px but will not work below 321px because we have placed separate CSS for device sizes up to 320px.

    Tips for writing responsive css:
    Change all the main element’s width from pixel (px) to percent (%). So the width will respond according to the width.

    Example:
    .class {
         width: 100%;
    }
    If any unwanted scroll bar appears, you can use overflow in your css.
    Example:


    .class {
         overflow: hidden;
    }

    If you think making the current template responsive is quite harder, you can use free or premium blogger templates which are already made by the developers. For premium themes, you can check HERE



    No comments

    Post Top Ad

    Post Bottom Ad