Cara Mengubah Template Blog Bawaan Blogger dan Membuatnya Kaprikornus Responsive

CARA modifikasi template blog bawaan blogspot (default blogger template), menyerupai yang kita pilih waktu pertama kali menciptakan 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 dapat mengubah banyak hal, mulai dari background, lebar halaman template, jenis huruf, lebar sidebar/widget, dll.

Coba saja! Buat blog gres untuk berguru desain blog.

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

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


Cara Mengubah Template Blog Bawaan Blogger dan Membuatnya Kaprikornus Responsive Cara Modifikasi Template Blog Bawaan Blogger

Cara Mengubah Template Blog Bawaan Blogger dan Membuatnya Kaprikornus Responsive Cara Modifikasi Template Blog Bawaan Blogger

Cara Mengubah Template Blog Bawaan Blogger dan Membuatnya Kaprikornus Responsive Cara Modifikasi Template Blog Bawaan Blogger

Cara Mengubah Template Blog Bawaan Blogger dan Membuatnya Kaprikornus Responsive Cara Modifikasi Template Blog Bawaan Blogger

Cara Mengubah Template Blog Bawaan Blogger dan Membuatnya Kaprikornus Responsive Cara Modifikasi Template Blog Bawaan Blogger


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 instruksi Quick Edit 
Cara modifikasi atau menciptakan hal-hal lainnya dapat Anda cari di Kotak Pencarian blog ini. Template bawaan blogger gotong royong 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 Kaprikornus Responsive

Template bawaan bloggser gotong royong sudah responsive alias mobile friendly, namun tampilannya masih orisinil 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 menciptakan template bawaan hasil modif itu jadi responsive.

CARA PERTAMA
1. Tambahkan instruksi berikut diatas instruksi ]]></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 menyebabkan 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 instruksi 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 Kaprikornus Responsive. Good Luck! (http://www.idtutorial.com).*



Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours