Xivanki Share !!: Cara Jitu Membuat Template Default Blogger Menjadi Responsive

Cara Jitu Membuat Template Default Blogger Menjadi Responsive - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Jitu Membuat Template Default Blogger Menjadi Responsive !! Semoga tulisan dengan kategori Tutorial Blogger !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Jitu Membuat Template Default Blogger Menjadi Responsive ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

Jika Blog sobat ingin kelihatan bagus dimata mesin pencari maupun pengunjung, maka syaratnya adalah blog sobat harus menggunakan template yang responsive.

Apa itu Responsive ?

Responsive berarti merespon, maksudnya adalah template blog sobat dapat menyesuaikan segala jenis tampilan secara otomatis dengan baik jika dibuka dengan perangkat apapun, baik itu PC, Tablet ataupun Smartphone.

Namun sayangnya, template default yang disediakan oleh Blogger belum memiliki desain yang Responsive, tapi hanya Mobile Version saja. Oleh karena itulah, sebaiknya sobat memakai template pihak ketiga saja alias dari luar.

Banyak sekali situs-situs penyedia template blogger yang bisa sobat Download secara gratis, contohnya seperti BTemplates, Gooyabi Templates dan masih banyak lagi.

Tapi jika sobat masih berkeinginan untuk menggunakan Template default Blogger, maka sobat harus membuat template tersebut menjadi Responsive secara Manual.

Nah, pada postingan kali ini saya akan membagikan cara supaya template default blogger menjadi full responsive. Cara ini pun bisa dibilang tidak begitu sulit.

Berikut ini langkah-langkah membuat template default Blogger menjadi Responsive.

1. Masuk ke Blogger, pilih Blog sobat.

2. Klik menu Tata Letak dan klik edit pada bagian Navbar. Pilih Off dan klik Simpan.

3. Kemudian Klik Simpan Setelan

4. Setelah itu, klik menu Template > Edit HTML. Dan cari kode dibawah ini. (gunakan Ctrl+F)

.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

Jika sudah ketemu, hapus saja kode tersebut dan ganti dengan kode dibawah ini.

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

5. Cari kode dibawah 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>

Hapus dan ganti dengan kode dibawah ini.

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

6. Selanjutnya, silahkan sobat letakkan kode berikut ini 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>

7. Letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

@media screen and (max-width: 1230px){ #header { float:none; max-width:none; text-align:center; } #header-inner { margin-bottom:0px; } #header h1 { margin-right:0px; } #header p.description { margin:0; } #header-right { position:relative; right:0; text-align: center; margin : 0 !important; } .header-right-inner { margin: 0 30px ! important; } .main-nav-top{ clear:both; float:none; } .main-nav-main { margin:10px 0 0 0; } #nav-search { float:none; margin:0; } } @media screen and (max-width: 960px) { .sidebar-wrapper{ position:relative; top:auto; right:auto; clear:both; left:auto; width:auto; margin: 0 -15px; background: none; } .subscribe_outer { margin: 0 -20px; } .main-wrapper{ margin-right:0; width:100%; min-height: 0px; } .ct-wrapper{ padding:0 15px; } #content { padding: 5px; clear: both; border-radius: 0; } .sidebar-wrapper .sidebar{ margin: 15px; } .sidebar-wrapper .widget{ border: none; margin: 0px auto 10px auto; padding: 10px 20px; } } @media screen and (max-width: 768px){ .header-wrapper { margin-right: 0; min-height: 0; width: 100%; } #header { text-align: center; width: 100%; max-width: none; } #header-inner { margin:30px 0 0; } #header h1 { font-size:35px; } .main-nav-top, .main-nav-main, .main-nav-top ul, .main-nav-main ul{ text-align:center; } .related-post { width:auto; } #comment-editor { margin:10px; } .footer { margin:15px; width:auto; } .footer-credits .attribution{ display:none; } } @media screen and (max-width: 500px){ #header img { width:100%; } } @media screen and (max-width: 420px){ #header h1 { font-size: 30px; margin: 10px; } .main-nav-main ul li{ margin:4px 10px; float:none; } .comments .comments-content .datetime{ display:block; float:none; } .comments .comments-content .comment-header { height:70px; } } @media screen and (max-width: 320px){ .ct-wrapper{ padding:0; } .footer .footer-inner { padding: 45px 10px 10px 10px; } .comments .comments-content .comment-replies { margin-left: 0; } }

Selesai. Dengan mengikuti tutorial di atas, maka template default blogger telah berhasil di modifikasi menjadi Responsive.

Sekian dari saya pada postingan kali ini tentang cara membuat template default blogger menjadi responsive. Semoga bermanfaat.