Responsive Web Design (RWD) a devenit parte integranta pe web cu Internet,acum accesibil prin mai multe platforme de dimensiuni multi-screen, cum ar fii telefonie mobila, TV si tablete / iPad.Cu o singura versiune în HTML și CSS se acoperă toate rezolutiile de ecran, adică, blogul web creat va fi optimizat pentru toate tipurile de dispozitive: PC, tablete, telefoane mobile, etc. Acest lucru va îmbunătăți experiența utilizatorului spre deosebire de ceea ce se întâmplă cu site-urile fixe atunci când sunt accesate de pe dispozitive mobile. Asa cum vorbim despre web receptiv,sunt milioane de Bloggeri si bloguri,care au o caracteristica distincta a siteului mobil si esueaza lamentabil atunci când vine vorba de alte dimensiuni, cum ar fi ecran mai mare Tablet, TV, etc.
În acesta postare vom imvata cum putem face blogul Blogger responsive folosind CSS interogari media. Acestea va permit sa personalizati blogul dvs.,aspectul blogului si pentru a ajusta automat rezolutia la ecranul dispozitivului cat si ascunderea elementelor sidebar atunci când dimensiunea ecranului detecteaza o platforma mobila.
Foarte multe bloguri sunt create pe sabloanele vechi,de pe vremea cand inca nu erau create sabloanele de tip responsive,iar acum pentru a schimba tema sablonului cu o tema responsive va trebui sa refacem de la capat toate modificarile in sablon. Nu cred ca-si doreste asta nimeni. Pentru a nu fii nevoiti s-o luam de la capat am facut aceasta postare.
Cum fac blogul responsive?
Testeaza blogul tau si vezi daca acesta este deja responsive.
Acum, daca nu sunteti sigur de reactie, mergeti la blogul dvs si schimbati dimensiunea ferestrei browser-ului prin glisarea pe capete si veti vedea daca continutul dvs. se potriveste pe ecran sau continutul apare partial care trebuie sa fie derulat pe orizontala pentru a accesa continutul complet. Daca continutul dvs. se potriveste pe ecran, blogul dvs. este deja responsive,iar daca continutul apare partial care trebuie sa fie derulat pe orizontala pentru a accesa continutul complet, atunci este non-responsive si trebuie sa procedam ca în aceasta postare pentru a-l face responsive. O alta varianta de testare a blogului este de a merge pe acest site: MobileTest.me
Urmati pasii de mai jos:
Interogari Media pentru ecrane TV,Desktop,Laptop,Tablete/Ipad-uri,Smartphone si alte dispozitive mobile.
Pentru a face blogul potrivit pentru toate dispozitivele enumerate mai sus,utilizai pasii de mai jos.
Mergeti la tablonul Blogger;
Faceti clic pe Sablon;
Inainte de a face orice modificare,faceti o copie de rezerva a sblonului;
Acum dati clik pe rotita personalizati sablonul pentru mobil;
Bifati casuta
Apasati simultan tastele CTRL+F;
In casuta care apare cautati aceasta linie de cod:
<meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/>
Acest cod ar trebui sa se afle exact sub tagul <head>
Dupa ce la-ti gasit inlocuitil cu acesta:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
Mai departe copy-paste acest cod </b:skin> in casuta de cautare;
Dati enter si imediat sub acesta puneti codul de mai jos.
<style type="text/css">
@media(max-width:1960px){
/*For TV screen */
body{min-width:1660px;}
h1{font-size:60px;}
img{max-width:100%; height:auto;}
.sidebar .sidebar.section .widget{width:280px;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:1660px;max-width:1660px;_width:1900px;}}
@media(max-width:1380px){
/* For Desktop Screen */
body{min-width:1120px;}
h1{font-size:50px;}
img{max-width:100%; height:auto;}
.sidebar .sidebar.section .widget{width:240px;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:1120px;max-width:1120px;_width:1300px;}}
@media(max-width:1295px){
/* For Laptop Screen */
body{min-width:1020px;}
h1{font-size:35px;}
img{max-width:100%; height:auto;}
.sidebar .sidebar.section .widget{width:215px;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:1020px;max-width:1020px;_width:1200px;}}
@media (max-width:1050px){
/* For Tablet/Ipad screens */
body{min-width:880px !important;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:840px !important;max-width:880px !important;_width:880px !important;}
img{max-width:100%; height:auto;}
h1{font-size:21px;}
}
@media (max-width:800px){
/* For Smartphone/high end mobile devices */
body{min-width:100% !important;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:100% !important;max-width:100% !important;_width:100% !important;}.sidebar .sidebar.section .widget, .main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {display:none !important;}.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
img{max-width:100%; height:auto;}
h1{font-size:18px;}
h5{font-size:12px;}
}
</style>
Ca sa nu va afecteze blogger mobile site.
Ultimul cod de smartphone-uri și alte dispozitive mobile va afecta aspectul blog-ului, mobil blogger numai dacă aveti temă particularizată.Pentru a evita schimbarea aspectului blog-ului tau pe mobil ( în tema particularizata ), anexati codul de mai jos intre tagurile condiționate pentru Blogger care va arata ceva de genul codul-ui de mai jos .
<b:if cond='data:blog.isMobile != "true"'>
<style type="text/css">
/*code for TV*/
/*code for Desktop*/
/*code for Laptop*/
/*code for Tablets/Ipad*/
/*code for Smartphone/other mobile devices*/
</style>
</b:if>
Scoateti codul marcat cu albastru în cazul în care nu utilizati tema personalizata pentru blogul dvs. mobil.
Asta e tot salvati sablonul si verificati cum arata blogul dvs. Veti vedea ca se potriveste la orice rezolutie de ecran în care comutati.
Metoda suplimentara:
Folosirea codului de mai sus intr-un fisier css.
Puteti pune,codurile de mai sus într-un fisier CSS (numai daca utilizati un fisier CSS extern).Plasati codurile într-un document notepad si salvati cu extensia .css,apoi încarcati-l intr-un cont de stocare a fisierelor,cum ar fi Google drive si apoi conectati-l folosind tag link ca în codul de mai jos, amplasand-ul imediat dupa tag-ul </b:skin> .
<link href='url-ul fisierului css' type='text/css' rel='stylesheet'/>
Pentru cei care nu se descurca cu CSS-ul hostat, folositiva de cel de mai jos.
Atentieee,acest url va fii disponibil doar o perioada de timp.! In acest timp va trebui sa va hostati propriul vostru CSS.
<link href='https://e176206c78a0f8d94a1ada4731e2f0c7658b146c.googledrive.com/host/0B5T2v-Ud3cAdemR4SnowS0dEUDQ/Responsive%20share.css' rel='stylesheet'/>
Asta e tot,doar sa urmati pasii de mai sus si va veti face blog-ul responsive.
Niciun comentariu:
Trimiteți un comentariu