Currently, there are many designers who create templates using responsive features . Why feature this time is very important responsive ? answer I have explained in my article entitled Responsive Blogger Template Recommendation 2013.
How to use a template that has not been responsive feature ? For those who use a blog template that is not responsive , of course, can be made into responsive . How? follow the steps below.
How to Make Being Responsive Template
How to Make Being Responsive Template
All you have to do is add the CSS code in your template . Laying in the code ] ] > < / b : skin> The code like this :
@ media only screen and ( max - width: 480px ) {
# outer - wrapper {width : 100 % ; }
# header - wrapper {width : 100 % ; padding : 0 ; margin : 0 ; }
}
The
intention of the code above is the screen size of 480px , outer-wrapper
set width 100 % so that its size can adjust the screen size of the
gadget , and set the header - wrapper has a width of 100 % in the
boundary and the outer boundary 0px 0px .
All you need to do is find ID Class of preparing the structure of your template . As I explained in my article entitled 6 Element Tags Prepare Layout Templates Blogger.
Not all the same template structure arrangement , different structures different templates . Because of that I was also a bit difficult mejelaskannya here . But I will give Class A common ID in use :
# outer - wrapper
# main-wrapper
# sidebar - wrapper
# header
# footer
The code above is general in life and you just add the code in the @ media only screen as above . See an example
@ media only screen and ( max - width: 480px ) { # outer - wrapper { . . . }
# main-wrapper { . . . }
# sidebar - wrapper { . . . }
# header { . . . }
# footer { . . . }
}
@ media only screen and ( max - width: 768px ) { # outer - wrapper { . . . }
# main-wrapper { . . . }
# sidebar - wrapper { . . . }
# header { . . . }
# footer { . . . }
}
@ media only screen and ( max - width: 800px ) { # outer - wrapper { . . . }
# main-wrapper { . . . }
# sidebar - wrapper { . . . }
# header { . . . }
# footer { . . . }
}
The code above is the size of the various screens that you can employ to make it responsive . And you have to do is fill out the CSS of each of the above css ID . You can watch my video tutorial how to make each class ID using the Google Chrome browser . Video : How Easy Tutorial Blogger Template Editing Part 1 .
Do not forget to add the code <meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> under <head>
Hopefully the article How to Make Being Responsive Template can be understood and useful to all my friends . thank you
Post a Comment