Make Blogger Blog Fully Responsive And Mobile Friendly
Blogspot blogs bring fun and coding twerk for its users especially web designers like myself. About two years ago, I could not even create my own template but today I have created numerous template and I am teaching you how to create your own blogger template.
While creating our own template, we have to put into consideration that our blog is viewed by both laptop users, tablet users and mobile phone users. Therefore we have to create a template that will look neat on both laptops, tablets and smartphones.
Responsiveness is what I meant when I said a template that is neat on all devices. At first, when we design templates, they are generally static. Meaning not flexible and do not adjust to different viewpoints, therefore, need to add a few codes and also remove a few codes to make our template fit into any device size.
Doing this does not only make our template look neat, it also adds some power to our blog rank by improving our SEO. Now, how true is this? - In other to get an increase in search engine optimisation, your blog needs to get the mobile-friendly tag attached to it on search engines because google adds more preference to blogs and website that are mobile friendly.
This is the same reason while over 90% of latest premium templates are made flexible and also while top blogs from Wikipedia, BBC and many other blogs are made responsive so as to get a 100/100 score on user experience and also get a high mark on mobile friendliness.
By making your blog responsive, I am not referring to activating on of those mobile templates provided by BlogSpot. what I actually mean is creating your own mobile template from your desktop template. Which means you get to show to mobile users everything that is being shown on the desktop only that your template will look better and adjust to all device width. Now let's get started!.
Defining Device Breakpoints for Blogspot Templates
What Is Device Breakpoints: Responsiveness, it simply means your blogger template adjust to certain rules at a certain screen. Breakpoints are CSS3 Media Queries that tells the browser which Layout to load for your website based on the screen size (viewport). It controls the display of your user interface (UI) on mobile devices.
Without break points, your template is bent to crash because the breakpoints are values that let you set various rules to the different device screen. Let for mobile devices, the screen size might be 580px, so setting a set of rules to be obeyed while the screen gets to 580px, is called setting breakpoints. They are the bones of creating a responsive blogger template.
Lets Disable Default Blogger Template
Like I earlier said, we are removing default templates created by BlogSpot and designing our own mobile templates. So first let's disable the custom templates and activate ours.
Step 1 - Disable Default Blogger Template
- Visit blogger and then navigate to template
- Clink on the Gear icon shown below the mobile template
- And then Choose "No, Show desktop template on mobile devices"
- Now save.
Step 2 - Set Breakpoint Rules To The Browser
Click on the Edit HTML right below the template preview and search for the code below using CTRL + F - Note: this code is found at the top of your template codes, right before the "<head>" tag.
<b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/>
Replace the above code with the below code. - This code will help us set the rules and the template what to show on certain devices.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Save the template. This is just the first few steps and this code above gives information to the web browser about the screen size of the mobile device or tablet.
Now let's add the Breakpoints!!
Adding Mobile Friendly Breakpoints For Blogspot blogs
After disabling the default mobile templates, and setting the browser breakpoint rules, now it's time to make our template fit into all screen sizes and do note that whatever to add to the below breakpoints will on work at that breakpoint. e.g when you set a breakpoint on 1024px, any code you add will work on all breakpoints below 1024px except you set a lower breakpoint to let us say 580px which will then exclude CSS and codes below 580px from the earlier rule of 1024px.
Note that we have used CSS3 Media Queries by Keeping Apple Devices as a standard for simplicity but the breakpoints below cover all major brands like Samsung, Blackberry, Nokia, Windows Phone, Kindle, Nexus and so on.
1. Go To Blogger >> Template >> Backup your template
2. Click Edit HTML
3. Search for "]]></b:skin"
and paste the following CSS Code just below it:<style>
/* ######## Responsive Cheat Sheet ########### */
/*-----Mobile Devices ZONE1 ----------*/
@media only screen and (max-width:320px) {
}
/*-----Tablet Devices ZONE2 ----------*/
@media only screen and (max-width:480px) {
}
/*-----Small Laptops ZONE3 ----------*/
@media only screen and (max-width:568px) {
}
</style>
Now will have added the general script. All we need to do now is set rules for each breakpoint. I will setup the basics for mobile devices and tablets. You can later decide whether to add more CSS or leave it basically responsive.
Make BlogSpot Template Fit Mobile Devices.
Now in the device breakpoint above, we are going to be selecting ZONE2 which is for mobile devices with big screens like the iPhone 5, 6, blackberry 10 devices, Nokia Lumia and any other device with a big screen.
So now, I have configured my test blog to fit perfectly to the size 568px. Now all you have to do is replace the unit for Mobile phones (ZONE2) with the below codes.
/*-----For Mobile Devices ZONE1 ----------*/
@media only screen and (max-width:568px){
}.post{height:auto;width:100%!important;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}.main-inner .column-right-outer{width:100%!important;padding-bottom:50px!important;padding-top:50px}}
}
Make BlogSpot Template Fit Tablet Devices.
After mobile devices, the next zone is for Tablets which are ranked at ZONE2. The codes below will make any blogger template fit into all kinds of templates. Simply use the below codes to replace the unit in ZONE2 above.
/*-----Tablet Devices ZONE2 ----------*/
@media only screen and (max-width:800px){
.main-inner .column-center-inner {padding: 0px;}
.main-inner .columns{padding-left:0;padding-right:310px;width:100%!important;position:relative;right:0!important}
.main-inner .column-right-outer{width:310px!important;margin-right:0!important;position:relative;right:10px!important}
.main-inner .column-right-outer{padding-top:50px!important;padding-bottom 50px!important}}
Make BlogSpot Template Fit Small Laptops
Final zone works well for small laptops and tablets in horizontal view. Simply replace the unit with ZONE3 above with the following codes.
./*-----SmaLL laptops ZONE3 ----------*/
@media only screen and (max-width:1010px) {
body .navbar {height: 0px !important;}
body{min-width:0!important;width:100%!important;padding:0!important}
.content{width:100%!important;min-width:0!important;overflow:hidden!important}
.header-outer{width:100%}
.fauxborder-left{width:100%!important}
html body .region-inner{min-width:0!important;max-width:100%!important;width:100%!important;padding-left:0}
.header-inner .section{margin:0;width:100%!important}
.footer-outer{width:100%!important}
.content-outer,.content-fauxcolumn-outer,.region-inner{min-width:0!important;max-width:100%!important}
#sidebar-right-1{width:100%!important}
.main-inner .column-right-outer{width:45%!important;margin-right:-310px;position:relative;right:10px!important}
.main-inner .columns{padding-left:0;padding-right:310px;width:70%!important;position:relative;right:20px!important}
#sidebar-right-1 a img{max-width:100%!important}
.post-body img, .post-body .tr-caption-container {
max-width: 100%;
height: auto;
}
}
Final Words
These are the basic CSS and codes you need to make your Blogspot blogs 100% fully responsive and mobile friendly. I have tried to make the implementation very easy and should in case you want to add a different background colour to the mobile view, just locate the appropriate ZONE and add your code.
Be careful not to mess up the codes. This post is for those who are using default blogger template. If you bought your template from a designer, you can verify from me to see if it is default responsive or not by simply placing a question below.
Happy Blogging!!
BERITA LENGKAP DI HALAMAN BERIKUTNYA
Halaman Berikutnya
0 Response to "Make Blogger Blog Fully Responsive And Mobile Friendly"
Posting Komentar