Sejauh pengamatan saya, dalam beberapa waktu ini memang marak sekali bertebaran template responsive, seperti halnya SL Style Magz – template SEO killer ini.
Hal ini semakin marak ketika Algortima Google yakni MobileGeddon diluncurkan. Ya karena memang target utama adalah fokus pada blog atau website yang tidak responsive alias user friendly terhadap perangkat mobile. Sobat akan lebih memahami alasannya dengan memahami terlebih dahulu cara kerja search engine Google dalam menentukan kualitas sebuah website atau blog.
Dengan pertimbangan itulah, berikut ini ada beberapa tips, panduan desain SEO oleh Kompi Ajaib dalam membuat template agar responsive.
Cara Mudah Membuat Template Responsive
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
2. Ganti kode di atas dengan kode di bawah ini:
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
3. Cari kode di bawah ini:
<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’/>
</b:if>
4. Ganti dengan kode di bawah ini:
<meta content=’width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0′ name=’viewport’/>
5. Copas kode di bawah ini dan tempatkan tepat di atas kode </head>
<style type=’text/css’>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>
6. Save template
7. Silakan cek blog sobat di perangkat smartphone atau mobile lainnya.
Demikian tips desain blog SEO, khususnya Cara Membuat Template Responsive Ala Kompi Ajaib.
Baca juga top 2 template SEO killer responsive terbaru.
Semoga bermanfaat. Salam.
Source:
http://www.kompiajaib.com/2015/03/cara-mudah-membuat-responsive-template.html
