Blogger Template Ko "Screen Fit" Responsive Kaise Banaye


Hello Bloggers,Blogging ke liye sabse important hota hai SEO but SEO tabhi best hoga jab aap apne blog ko Responsive banayenge it means blog ka design kuch is type ka ho ki vo All type ki devices -Mobile,Laptop,Tablets sabhi ki screen me fit aaye.

Friends aaj ke time me smartphones ka use almost sabhi log karte hain is vajah se Blog ka 60% traffic mobile phone se hi aata hai lekin hamari site/blog ka design/Tempalte agar Responsive nahi hoga to traffic bhi na ke barabar milega.Responsive template ke liye hamare paas 2 options hote hai hain.First bloger ki default templates ka use karen & second, template ko khud hi design karen.

Ham sab jante hain ki blogger ki default templates khud jyada better nahi hoti isliye ham koi new/custom template ko install kar lete hain but vo kuch hi esi templates hoti hai jo Responsive hoti hai joki sabhi types ki screen me fit aajaye.Agar basic codings ki knowledge ho to ham bhi apni blog ki templates ko Responsive bana kar ek Best look de sakte hain agar aapko coding ki Knowledge nahi hai to koi baat nahi me aaj aapko bataunga ki kaise blogger ki kisi bhi template ko Responsive bana kar sabhi devices ke liye fit kar sakte hain lakin sabse pehle ham ye jaan lete hain ki responsive blog ke kya kya fayde hain.

Blogger template ko mobile friendly kaise banaye

-)  Blogger Template Ko Mobile Friendly Kaise Banye?  

1) Responsiveness

Responsive ka matlab hota hai hai ki website ko Better look dena aur is tarah se design karna jisse ki sabhi devices me uska look same rahen. Sabse pehel jab ham koi template blogger me install karte hain to vo static hoti hain it means diiferent viewpoints/devices me adjust nahi ho paati hai isliye kuch new codes ko add karke template ko responsive banana hota hai.Esa karne par only blog ka look hi better nahi hota balki blog ka SEO improve hota hai aur rank high hoti hai kyuki google un hi websites/blogs ko importance deta hai jo mobile friendly hoti hai.

Agar aapko bhi apne Blog ko Responsive banana hai to sabse pehle to aapko  Blog ki Default mobile template ko Disabled  karna hoga.

       

2) Set Device Breakpoints For Blogger Template

Device Breakpoint means template me kuch is type ki coding karna ki joki template ko sabhi devices me adjust kar sake aur sath is browsers screen ke size ke hisab se aapki website ko load kar sake.so lets start now-

Precaution-Sabse pehle to Template section me jayen or Right side me sabse top par Backup/Restore option par click karen aur Download template par click aur kisi safe place par apne template ke backup ko save kar len.Because agar koi problem hui to aap template ke backup se purani template ko install kar sakte hain.

Step1-Set Breakpoint 
Sabse pehle to Blogger ke Template section me jayen aur Edit html par click karen.Ctrl+F dabakar below code ko find karen or  or ye code aapko <head> section ke just below mil jayega.
 Template→Edit html→Ctrl+f→Search below code
<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'/>
Ab save Template par click kar den. Let's Add  the Breakpoints Ab upar diye code ko is code ke sath replace karna hai
 <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Ab save Template par click kar den. Let's Add  the Breakpoints

3) Blogger ke Liye Mobile friendly/Responsive Breakpoints

Blogger template section me jayen fir Edit html par click karen and Search for  ]]></b:skin 

1.Blogger →Template→Edit html→Search for ]]></b:skin 


/* ######## 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) { }
2. Ab ]]></b:skin  just below  is code ko paste kar den.

Friends ye ek General code hai jo aapki template ko Responsive bana dega aur sabhi Mobile Brands me adjust ho jayega  agar aap Template ko more Responsive banana chahte hain to iske liye aapko kuch aur codes add karne honge.

4) Blogger Template ko Mobile Devices Ke Liye More Responsive Bananye

Upar diye code me Mobile device ko  Zone1 me Rakha gaya hai jo Mobile Big screens ke liye h Responsive hai.So ab ham Small screen size ke mobiles ke liye bhi Template ko Responsive banayenge.
Niche diye code ko Mobile(Zone1) code ke sath replace kar den.
*-----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}} }

5) Blogger Template Ko Tablet Devices Ke Liye More Responsive Banayen

Tablet Devices ke liye Zone2 me rakha gya hai.Niche diye code se Template All types ke tablet devices me Fit ho jayegi. Tablet Zone2 ki Jagah niche diye code ko Replace kar den.

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}}


6) Blogger Template ko Laptops Ke liye Responsive Banayen

Template ko sabhi laptops screen me fit karne ke liye laptop Zone3 ki jagah niche diye code ko replace kar den.

/*-----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; }

Conclusion

To Friends ye code Basic Css codes hain jinki help se aap apne Blogger Blog ko 100% Responsive and Mobile Friendly Bana sakte hain.Jo aapke Blog ko SEO ko Increase karne me bhi help karega agar aapko post Pasand aayi ho to Post ko Share karna mat bhuliyega Thanks.

2 comments

bro ye jo codes mai template mai save kr rha huiin to view blog krney pr wo code sabsey upar ki or show kr rhey hai isko kaisey solve krun

Prateek iska reason ye hai ki aap codes ko sahi se blog me add nahi kar rahe hai..sabhi steps ko achi tarah se follow kijiye


EmoticonEmoticon