How To Create a Template Responsive, Seiring semakin pesatnya pengguna smartphone saat ini maka semakin banyak pula yang mengakses internet melalui perangkat ini. Coba Anda cek persentase pengakses pencarian di Google menggunakan sarana mobile semakin hari semakin meningkat dibandingkan pengguna Laptop/PC. Oleh Karena pada artikel ini saya akan mencoba membahasa bagaimana cara membuat template Anda Responsive.
Sebelum saya menjelaskan lebih jauh, pertama yang saya akan jelaskan terlebih dahulu apa yang dimaksud dengan Responsive tersebut.
Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalui SmartPhone misalnya, itu akan berbeda tampilannya. Responsive Web Design untuk mengetes tampilan yang menggunakan teknik Responsive tersebut tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup dengan meminimize browser saja ke dalam ukuran mobile device yang diinginkan kita sudah dapat melihat tampilan website pada layar mobile device.
Baca juga : Membuat Template Seo Friendly
Sebelum melangkah pada tutorial pemasangan script responsive pada template yang Anda harus lakukan adalah cek terlebih dahulu template Anda, apakah sudah reponsive atau belum, untuk mengecek template responsive telah banyak website penyedia layanan ini seperti,
responsinator.com,
mattkersley.com dan masih banyak lagi. Jika belum maka ikuti tutorial berikut :
1. Pengaturan Responsive Pada Halaman Post Tage
Biasanya kode CSS Postage berada di dalam
]]></b:skin>
atau di bawah
</style>
jadi silahkan masukkan kode responsive di bawah ini tepat di dalam kode diatas
@media screen and (max-width:1216px){......................................
......................................}
@media screen and (max-width:1024px){......................................
......................................}
@media screen and (max-width:992px){......................................
......................................}
@media screen and (max-width:880px){......................................
......................................}
@media screen and (max-width:800px){......................................
......................................}
@media screen and (max-width:600px){......................................
......................................}
@media screen and (max-width:480px){......................................
......................................}
@media screen and (max-width:400px){......................................
......................................}
@media screen and (max-width:375px){......................................
......................................}
@media screen and (max-width:320px){......................................
......................................}
@media screen and (max-width:240px){......................................
......................................}
Keterangan :
Silahkan pelajari CSS pada template Anda karena setiap kode CSS template ada yang berbeda, sedangkan pengaturan lebar biasanya menggunakan
.main-wrapper width:1024px jadi kesimpulannya silahkan ganti ukuran PX-nya dengan angka % contoh
.main-wrapper width:100% begitupun berlaku pada ukuran CSS yang lain.
2. Pengaturan Responsive Pada Halaman HomePage
Biasanya kode CSS
HomePage berada di bawah
</style>
, contoh seperti berikut :
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post{margin:8px 5px;padding:5px 15px}.post h1,.post h2{font-family:'Oswald',sans-serif,Segoe UI,Arial,Tahoma;font-size:135%;line-height:1.2em;margin:19px 0 3px;padding:0;font-weight:normal;margin-bottom:15px}
.post-body{border-top:none;padding-top:0;background:none;line-height:1.8em;margin-bottom:1px;padding-bottom:1px;text-align:justify;color:#777}.post{margin:10px 5px}.post-footer{display:none}
.postmeta{;padding:5px 0 10px}
.thumbnail{float:left;width:280px;height:140px;margin-right:0px;margin-left:-8px;background:#4bacc6;overflow:hidden;right:0;border:transparent solid 15px;border-color:transparent #fff transparent transparent;margin-top:3px}
.thumbnail img{width:110px;height:110px;border-radius:100px;margin:10px 75px;border:rgba(255,255,255,0.4) solid 8px;opacity:0.8}
.thumbnail a:hover img{border:rgba(255,255,255,0.7) solid 8px;opacity:10;transition:all 0.2s ease-in-out}
@media screen and (max-width: 1024px){
....................................
....................................
}
@media screen and (max-width:600px){
....................................
....................................
}
@media screen and (max-width:480px){
....................................
....................................
}
Code Responsive dst.................
</style>
</b:if></b:if>
Masukkan kode di bawah ini tepat didalam kode HomePage Template Anda, seperti diatas
@media screen and (max-width: 1024px){
....................................
....................................
}
@media screen and (max-width:600px){
....................................
....................................
}
@media screen and (max-width:480px){
....................................
....................................
}
@media screen and (max-width:400px){
....................................
....................................
}
@media screen and (max-width:375px){
....................................
....................................
}
@media screen and (max-width:320px){
....................................
....................................
}
@media screen and (max-width:240px){
....................................
....................................
}
Keterangan :
Pelajari Kode CSS pada template Anda karena setiap kode CSS template ada yang berbeda, sedangkan pengaturan lebar biasanya menggunakan
.main-wrapper width:1024px jadi kesimpulannya silahkan ganti ukuran PX-nya dengan angka % contoh
.main-wrapper width:100% begitupun berlaku pada ukuran CSS yang lain dan gunakan (
display:none) jika suatu element tidak dimunculkan pada halaman device.
Jika sudah Anda lakukan dengan metode responsive diatas maka didalam search engine nanti artikel Anda akan mengalami
duplikat content, contoh seperti ini
http://lagioke.blogspot.com/2014/05/the-fiseo-magz-responsive-blogger.html
http://lagioke.blogspot.com/2014/05/the-fiseo-magz-responsive-blogger.html?m=0
http://lagioke.blogspot.com/2014/05/the-fiseo-magz-responsive-blogger.html?m=1
Untuk mengatasinya, kita harus membatasi halaman yang di indeks oleh robot pencari dengan metode berikut :
Masukkan script berikut pada halaman
setelan - Preferensi - Robots.txt khusus
User-agent: Mediapartners-Google
Disallow:
User-agent: Googlebot
Disallow: /search
Disallow: /?m=1
Disallow: /?m=0
Disallow: /*?m=1
Disallow: /*?m=0
User-agent: *
Disallow: /search
Sitemap: http://lagioke.blogspot.com/feeds/posts/default?orderby=UPDATED
Keterangan :
Ganti Url yang di blok dengan Url Anda