Cara Membuat Template Blog Responsive

4,341 views

Template blog adalah desain tampilan blog di Blogger. Kini namanya tema (theme), seperti halnya platform blog WordPress dan lainnya. Tips Blogging kali ini tentang  Cara Membuat Template Blog Responsive.

Template Blog SEO

 

BLOGGER sudah menyediakan banyak template di dashboard blog. Ada tiga versi template bawaan (default) Blogger:

  1. Classic Theme — Versi 1
  2. Simple Theme dkk. — Versi 2
  3. Contempo dkk. — Versi 3

Tema klasik tidak responsive dan tidak ada template mobile-nya. Template Sederhana (Simple) dkk juga tidak responsive, namun ada versi selulernya. Versi 3, yaitu Contempo dkk, sudah responsive.

Tips Blogging tentang Cara Membuat Template Blog Responsive ini khusus untuk template versi dua, lebih khusus lagi template Sederhana (Simple).

Read More

Template Blog

Cara Membuat Template Blog Responsive

Untuk menerapkan tips berikut ini, ketika membuat blog di Blogger, pilih tema Simple seperti dalam gambar di atas.

Setelah itu, kita responsive-kan atau menjadikannya ramah seluler (mobile-friendly) sehingga lebih ramah mesin pencari (SEO Friendly).

1. Klik Layout > Nonaktifkan widget Navbar dengan klik “Off”.

Nonaktifkan widget Navbar

Nonaktifkan widget Navbar

2. Klik Tema > Customize

tema kustomisasi

Silakan lakukan setting:

  • Background
  • Adjust widths
  • Layout
  • Advance

Untuk lebar template, pilih 960px dan 330px.

lebar template

Untuk Layout, pilih seperi dalam gambar berikut ini, yaitu satu sidebar dan satu footer:

edit template

Jika sudah, klik Apply to Blog di kanan atas.

Setelah beres utak-atik di Blogger Theme Designer, silakan lakukan langkah berikut ini untuk membuat template menjadi responsive.

1. Klik Tema > Edit HTML

2. Cari kode di bawah ini:

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

3. Hapus kode tersebut dan ganti dengan kode berikut ini:

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

4. Cari lagi kode berikut ini, ada di bawah kode <head>

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

5. Hapus kode tersebut, ganti dengan kode ini:

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

6. Copas atau simpan kode berikut ini tepat di atas kode ]]></b:skin>

@media screen and (max-width:1024px){
body{width:100%!important;padding:0;}
.content-inner{overflow: hidden;}
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:768px){
.main-inner .column-center-outer, .main-inner .column-right-outer{float:none;width:100%!important;}
.footer-inner, .main-inner .column-center-inner, .main-inner .column-right-inner{padding:0;}
.Header h1{font-size:20px;text-align:center;}
.Header .description{font-size:14px;text-align:center;}
}
@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;padding: 20px;margin: 0 auto;}
}
@media screen and (max-width:320px){
.fauxcolumn-right-outer .fauxcolumn-inner{border-left:none;}
.fauxcolumn-left-outer .fauxcolumn-inner{border-right:none;}
.footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section{margin:0;}
}

6. Untuk menghilangkan icon obeng dan tang (quickedit) di sidebar widget, simpan kode ini di atas kode ]]></b:skin>

.quickedit {display:none}

8. Save! Simpan Template.

Beres.

Template Blog kini sudah menjadi responsive atau ramah seluler (mobile friendly). Karenanya, jangan lupa nonaktifkan template mobile default Blogger.

BONUS:

Untuk merapikan bagian header atau nama dan deskripsi blog, simpan kode berikut ini di atas kode ]]></b:skin>

.header-inner .Header #header-inner {overflow: hidden;text-align: center;}
.header-inner .Header .titlewrapper {padding: 15px 30px 0;margin:10px 0}
.Header .description {font-size: 100%;color: #f5f5f5;margin: 0;padding: 0;}
body .navbar {display: none;}

Nantinya bagian header akan seperti ini:

header blog

9. Klik Tema > dan nonaktifkan tema mobile bawaan Blogger.

Centang “No. Show….” seperti gambar berikut ini:

nonaktifkan tempalate mobile bawaan blogger

 

Sekarang cek blog Anda di Mobile-Friendly Test untuk menguji responsive tidaknya template yang sudah dimodifikasi tadi. Bisa juga cek di Troy Lab Daum.

Jika Anda “menyerah”, mau terima jadi hasil edit di atas, silakan Download Template Simple Responsive. Tinggal pakai dan edit lagi di Blogger Theme Designer (Klik Tema > klik Customize).

Menghapus Powered by Blogger

Dengan mengikutu tips di atas, template Anda sudah responsive dan bebas link credit. Tulisan “Power by Blogger” atau “Diberdayakan oleh Blogger” jua bisa dihapus.

Cara Menghapus “Powered by Blogger”:

1. Klik Tema > Edit HTML
2. Cari (Tekan Ctrl+F) dan masukkan kata Attribution.
3. Akan tampak kode seperti di bawah ini:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'> ...</b:widget>

4. Hapus saja semua kode tersebut.

Save! Beres!

Demikian Cara Membuat Template Blog Responsive. Kode-kodenya didapatkan dari blog yang menggunakan template bawaan Blogger namun responsive.

Anda tinggal melengkapinya dengan memasang beberapa widget tambahan berikut ini:

  1. Auto Read More
  2. Breadcrumbs
  3. Related Posts
  4. Tombol Share
  5. Tombol Back to Top
  6. Link Media Sosial

Dengan begitu, template blog Anda sudah responsive, SEO Friendly, dan lengkap. Siap bersaing di Google. Happy Blogging!

 

Related posts