As we had previously discussed or shared an
amazing Widget that is Professional style if you're miss this post then click this link after completely this tutorial
Add Professional looking author bio box with hover picture for blogger blog but today I going to teach you that how to make your blogger blog more responsive in other words that how to make your blogger blog supported with all device laptop to desktop and tablet to Mobile also include
Portrait and
Landscape mode. If you're successfully to make your blogger template responsive then you will understand that you are not a newbie, you're a
Pro Blogger. So today we're gonna discuss that how to design a responsive blogger template or how make your blogger blog template fully responsive. After fully responsive blogger template then your blog are auto adjust it's widths and heights according to visitors's devices. I would like to explain it and it's features.
What Is Responsive Template?
In my words responsive template is a
fluid flexible blogger template which adjusted it widths and height according to their device sizes and screen resolutions. This responsive template look different on desktops and much different in smartphones and tablets includes portrait and landscape modes. It will adjust itself perfectly to give a clean easy user interface.
But in today's technology world , people uses Tablets and Smartphones more than Desktops and laptops because these types types are easy to use and it's navigation are very easy specially for touch screen devices like iphones like smart phones and ipad like tablets with motion sensors because people are using different device for surf the web. So in today's time every blog and website are compulsory to make it's fluid and flexible for all devices.
Why Choose Responsive Design?
These days, almost every people have updated their website template to fit in every devices resolutions but some new websites and professional designer like me have updated yet.
Next Blogger Tricks is a responsive website to fit in every devices and according to users devices width and heights. because
prajjwal rajput is the designer of Next Blogger Tricks this reason are to Next Blogger Tricks is responsive design.
These are common reasons for making our blogger theme responsive, the first is it improve the user experience on their own device, it can be increase more tablet and smart phones users. If you've adsense account then you will make more money with it if we display responsive adsense ads that can appera in every resolution sizes.
How To Make Blogger Template Responsive?
Let's time to learn about responsive design and well take a lot of time you because I'm going to share this tutorial as long as.
Do you know? that responsive layout design built with CSS and there is an special tag in CSS that I can use this tag to made this responsive tricks. I can use
Media Queries (@media) I will found this tag in most popular web designing site the W3 school.org this site provide all types of tutorials like JavaScript, CSS, HTML and Much more. This @media tag just like {if else} statements in JavaScript and C++ languages and also conditional tag this tag represented in C++ such as {
&& and
||}. I can make each media queries tag for each devices screen sizes this tags work on all devices screen sizes.
There is important thing to remember you before working with @media, we should add meta viewport tag below the
<head> that helps the browser to detect the devices screen sizes and adjust itself though the media queries tags.
Adding Meta Viewport Tag
- Go To Blogger>>Template>>Backup Template
- Click On Edit HTML>>Find this <head>
- Paste the following code below it.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Now you will finished this tutorial first part that is very easy now let's jump to it's second part read carefully.
and follow careful.
Adding CSS3 Media Queries @media
Now I have ready the following media queries and you can add this in your template for responsiveness for all devices and all resolutions.
- Find the Below code Using (Ctrl+F)
]]></b:skin>
- Paste the below code above it.
/*****************************************
Responsive styles By Www.NextBloggerTricks.Com
******************************************/
@media screen and (max-width: 1024px) {
#header, .header-right { float: none; text-align: center; width: 100%; }
.header-right .widget-content { margin: 0; }
}
@media screen and (max-width: 960px) {
.ct-wrapper{ padding:0 15px; }
.main-wrapper, .opt-in .opt-in-wrap{ margin-right:0; width:100%; }
.sidebar-wrapper{ float: left; width: auto; margin-left: 20px; }
.nav-menu ul { text-align: center; }
.nav-menu ul li { float: none; }
.opt-in .inner .ct-wrapper { padding: 0 48px; }
.opt-in .info { text-align: center; }
.opt-in .signup-form { margin-top: 30px; width: 95%; float: left; }
#subbox { width: 60%; }
}
@media screen and (max-width: 768px){
#header p.description { margin: 0; }
.header-right { display: none; }
#comment-editor { margin:10px; }
.footer { width: 50%; }
}
@media screen and (max-width: 500px){
#header img { width:100%; }
.opt-in .inner .ct-wrapper { padding: 0 10px; }
}
@media screen and (max-width: 420px){
.comments .comments-content .datetime{ display:block; float:none; }
.comments .comments-content .comment-header { height:70px; }
}
@media screen and (max-width: 320px){
.footer { width: 100%; }
.ct-wrapper{ padding:0; }
.post-body img{ max-width: 230px; }
.comments .comments-content .comment-replies { margin-left: 0; }
}
- Now, again save your Template.
Look, how your template appear in different devices. Its simple its starting with @media screen and . I'll adding screen size (max-width:1024px) and brackets where CSS will stored it simply tells the browser or any device screen size is less that max-width than apply the code in brackets. If the screen size will be exact max-width or less than it will work until it reaches so you can also change its max-width according to your wish.
Final words
So friends I hope this tutorial are really helped you if you're facing problem or getting error during this process so leave comments for solutions and don't forget to like our Facebook page ans also share this tutorial in social networking sites with your friends.
Happy Bogging!
