Cara Paling Mudah Membuat Blog Jadi Responsive Mobile

Translate this Article...

Cara Blogger - Dewasa ini, seiring dengan berkembangnya zaman, produk-produk teknologi juga ikut berkembang dengan pesat. Secara tidak sadar hal tersebut sangat berpengaruh dalam dunia blogger. Bukan hanya melalui PC, sekarang semua orang dengan mudahnya dapat mengakses internet untuk mencari informasi melalui gadget-gadget canggih miliknya. Dari itu para blogger harus pandai menciptakan website atau blog yang memiliki tampilan konten yang dapat menyesuaikan dalam segala tampilan baik di Pc maupun di gadget smarthphone.

Dalam hal ini, sesuatu yang berperan penting yaitu template blog yang digunakan pada website atau blog tersebut. Menggunakan Template Responsive merupakan solusi terbaik dalam mengatasi masalah ini. Agar lebih jelasnya simak postingan kami di bawah ini tentang pengertian dan manfaat template blog responsive.

Pengertian Template Responsive
Template Responsive adalah template yang dapat menyesuaikan segala jenis tampilan secara otomatis dengan baik bila di akses melalui berbagai macam perangkat. Dari itu tampilan website atau blog dapat sempurna, dan membuat para pengunjung tidak perlu bersusah payah untuk membaca isi website dengan mencubit atau menggeser pada layar perangkat.

Adapun manfaat bila menggunakan template responsive adalah membuat tampilan blog atau website kita sempurna dalam segala tampilan bila di akses melalui berbagi macam perangkat. Dan tentunya dapat membuat pengunjung merasa betah dengan melihat tampilan blog atu website yang dikunjunginya. Sebab pengunjung tidak perlu bersusah payah mencubit atau menggeser layar untuk membaca.

CARA MEMBUAT BLOG RESPONSIVE
Cara membuat blog menjadi Responsive cukup mudah, tujuannya tak lain dan tak bukan agar blog agan dapat diakses secara responsive melalui akses handphone atau mobile.

1. Silahkan cari kode ini di html blog agan :
<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>

2. Lalu ganti dengan code ini :
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

3. Selanjutnya letakkan code ini tepat diatas code </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:800px){
.sidebar .widget,.sidebar .widget img {width:100%}
#menu {width: 95%;}
.main-inner .columns {padding-left: 0px;padding-right: 240px;}
.main-inner .fauxcolumn-right-outer {width: 230px;}
.main-inner .column-center-inner {padding: 0;}
.main-inner .column-right-outer {width: 250px;margin-right: -250px;}
}
@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;}
.content {position: relative;word-wrap: break-word;width: 97%;margin: 0 5px;}
body {background:#fff}
}
@media screen and (max-width:400px){
.main-inner .column-center-inner {padding: 0 15px 0 0;}
.sidebar {margin:10px 0 5px}
}
</style>

4. Setelah itu save template dan lihat hasilnya.

nb. Silahkan modifikasi code css diatas sesuai code panggil blog agan, seperti penggunaan code :
#header, #main-wrapper, #footer, #sidebar dll (sesuai dengan css template blog anda)

5. Jika cara diatas kurang berhasil coba gunakan code css dibawah ini :
<style>
@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}
}
@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}
}
@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;}
}
</style>

PERHATIAN! ..CARA MELETAKKAN CODE DIATAS KE DALAM BLOG :