Cara Membuat Template Responsive Ala Kompi Ajaib - Tips Design SEO Blog

Cara Membuat Template Responsive Ala Kompi Ajaib - Tips Design SEO Blog
Cara Membuat Template Responsive Ala Kompi Ajaib

Siapa sih yang tidak ingin mempunyai sebuah template responsive? Semoa blogger pasti sudah tahu manfaat menggunakan template blog SEO killer responsive.

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

Silakan perhatikan dengan seksama dan coba terapkan pada template blog sobat. Namun untuk lebih berhati-hati, silakan backup terlebih dahulu blog sobat. Nah jika sudahm silakan lakukan langkah berikut ini:

1. Cari kode di bawah ini di dalam template (mode html) blog sobat:
.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

0 Response to "Cara Membuat Template Responsive Ala Kompi Ajaib - Tips Design SEO Blog"

Post a Comment

Silakan masukkan komentar Sobat di sini!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel