August 26, 2014

Cara Modifikasi Template Blog Bawaan Blogger

August 26, 2014

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


Cara Modifikasi Template Blog

Cara Modifikasi Template Blog

Cara Modifikasi Template Blog

Cara Modifikasi Template Blog

Cara Modifikasi Template Blog


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).*



Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

8 comments on Cara Modifikasi Template Blog Bawaan Blogger

  1. mastah, saya baru belajar ngeblog kebetulan template.a mirip dgn blog ini.
    gimana caranya mengubah header dengan gambar ?

    ReplyDelete
    Replies
    1. Silakan Googling "cara mengubah header blog dengan gambar", banyak tips dari blogger lain

      Delete
  2. trims gan sangat membantu bagi pemula seperti saya

    ReplyDelete
  3. ribet bikin pusing. blog say sederhana saja pke template bawaan blogspot

    ReplyDelete
  4. Yaa gan, Karena pasang template gratisan Blog saya jadi Berantakan dengan link dan script tak dibutuhkan

    ReplyDelete
  5. Ohh gitu ya Gan keren tampilanya jadi lucu....

    ReplyDelete

Contact Form

Name

Email *

Message *