Cara Modifikasi Template Blog Bawaan Blogger

Baca Juga

Cara Mengubah Template Blog Bawaan Blogger dan Membuatnya Jadi Responsive

CARA modifikasi template blog bawaan blogspot (default blogger template), seperti yang kita pilih waktu pertama kali membuat blog, sangat mudah. Dengan memodifikasi sendiri, kita gak usah cape-cape mencari template buat blog kita, juga tidak usah rempong menginstall atau ganti template.

Cara Modifikasi Template Default Blogger

1. Klik "Template"
2. Klik "Customize"

Di situlah kita bisa mengubah banyak hal, mulai dari background, lebar halaman template, jenis huruf, lebar sidebar/widget, dll.

Coba saja! Buat blog baru untuk belajar desain blog.

Fasilitas modifikasinya relatif lengkap. Mulai ukuran tampilan, latar belakang, warna, jenis huruf, hingga memasukkan kode CSS di Template.

Berikut ini Screen Shot di area modifikasi template bawaan blogger yang terdiri dari memilih Template, Background, memilih lebar, tata letak, dan "Advanced".

Setelah Modifikasi dari sisi tampilan (desain), langkah berikutnya yang penting antar lain:

1. Melengkapi Meta Tags dengan memasukkan Kode Meta Tags SEO Friendly.
2. Membuat Auto Read More
3. Menghapus kode Quick Edit 

Cara modifikasi atau membuat hal-hal lainnya bisa Anda cari di Kotak Pencarian blog ini. Template bawaan blogger sebenarnya sudah ringan (fast loading) dan SEO Friendly. 

Banyak blogger yang tidak mengganti template bawaan blog, tapi memodifikasinya, bahkan membiarkan apa adanya. Namun, karena kontennya berkualitas, pengunjungnya banyak! Lihat saja blognya Linda Ikeji yang sukses tanpa ganti template, tanpa seo, dan Google Adsense.

Membuat Template Default Blogger Jadi Responsive

Template bawaan bloggser sebenarnya sudah responsive alias mobile friendly, namun tampilannya masih asli default blogger.

Tinggal di settingannya diatur bergini:
1. Template › Choose mobile template
2. Pilih (centang) › Yes. Show mobile template on mobile devices.

(Jika template Anda sudah responsive, yang dipilih yang kedua › No. Show desktop template on mobile devices).

Ada dua cara membuat template bawaan hasil modif itu jadi responsive.

CARA PERTAMA
1. Tambahkan kode berikut diatas 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; } }

2. Save Template!

CARA KEDUA
Cara kedua menjadikan template bawaan blogger hasil modif menjadi responsive ini di-share Kompi Ajaib.

1. Nonaktifkan Navbar. Edit dan pilih option "OFF" untuk menonaktifkan navbar.

2. Ganti kode:

.post-body img, .post-body .tr-caption-container {

  padding: $(image.border.large.size);

}

dengan kode:

.post-body img, .post-body .tr-caption-container {

padding: 0;

width:auto;

max-width:100%;

height:auto;

}

3. Ganti kode:

<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>

Dengan kode:

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

4. Simpan kode berikut ini 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>

5. Save Template!

Selesai.

Demikian Cara Mengubah Template Blog Bawaan Blogger dan Membuatnya Jadi Responsive. Good Luck! (http://www.contohblog.com).*

Sumber: Panduan Modifikasi Template Blog Default dari Blogger