7 langkah menyulap tema sederhana jadi premium (bagian kedua)

Untuk template blogger default versi 2

kiri versi desktop kanan versi mobile
Yang sedang kita bicarakan adalah cara memodifikasi template bawaan blogspot versi ke-2. Sebagai catatan semenjak tahun 2017 Google telah merilis 4 varian template terbaru yang mendukung atau support versi ke-3 yakni: Contempo, Emporio, Soho dan Terkemuka (Namanya berbeda dalam bahasa Inggris) Saya juga telah memberikan tutorial cara memodifikasinya panjang lebar di dalam blog ini.

Pada tulisan sebelumnya saya hanya memberikan contoh bagaimana mengubah tampilan template bawaan blogger "sederhana" menjadi :
  • Menyembunyikan tampilan navbar
  • Membuang gambar obeng atau opsi bawaan "quick edit"
  • Membuat read more
  • Membuat menu navigasi sederhana yang responsive dan mobile friendly (Pada tampilan desktop/laptop tampil inline, pada tampilan hape atau mobile menu navigasi akan otomatis menjadi menu dropdown.
  • Memasang font awsome ke dalam blog
  • Menambahkan kode css reset ke dalam setting dengan opsi melalui tambahkan css di menu Desainer Tema Blogge.
  • Menambahkan widget back to top.
Namun perlu diperhatikan langakah lanjutan agar template sederhana tadi menjadi benar benar responsive dan mobile friendly kita dapat melakukan sedikit perombakan struktur template tanpa melanggar aturan kodingnya.

1. Cari kode berikut ini, letaknya ada di dalam tag head (pada template sederhana biasanya tepat berada di bawah kode <head>
<meta expr:content='data:blog.isMobile ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot; : &quot;width=1100&quot;' name='viewport'/>
Jangan ragu, hapus saja 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'/>
2. Di bawah kode <b:template-skin> terdapat kode dibawah ini, hapus saja!
<b:variable default='960px' name='content.width' type='length' value='960px'/> <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>
Setelah kedua langkah diatas dilakukan, template akan menjadi lebih user friendly, akan tetapi sidebar pada tampilan desktop/laptop dan layar ukuran 8 inchi katas lenyap! Akan tetapi dengan perubahan ini template tidak perlu lagi memilih opsi mobile pada pengaturan, template secara otomatis dapat menyesuaikan diri baik untuk web/desktop, maupun hape/mobile.

Untuk mengembalikannya dengan gaya yang sangat berbeda dan lebih responsive kita dapat melakukan langkah berikut:

3.1. Sidebar kanan:
Cari kode berikut ini letaknya di dalam atau dibawah kode <b:template-skin> kita akan kesulitan mengenalinya tapi teliti saja abaikan sedikit perbedaannya.
body {
min-width: $(content.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
Jika kita ragu merobahnya, hapus dan ganti saja kode diatas dan langsung diganri dengan kode yang sudah jadi dibawah ini:
body {
width: 1100px;
margin:0 auto;
min-width: $(content.width);
}
.main-inner .column-right-outer {
width: 30%;
float: right;
margin-right: -$(main.column.right.width);
}
 4. Tambahkan kode dibawah dibawah kode diatas:
main-inner .column-center-outer{
float: left;
width:65%;
}
Catatan: width:65% bisa kita robah tapi jangan sampai 100% karena mempengaruhi tampilan margin tulisan postingan.

5. Tambahkan separator css dibawah ini ke atas ]]></:skin>:
.separator a{margin-left:0px!important;margin-right:0px!important;}
.post img{max-width:100%;height:auto;}
6.  Terakhir untuk merombak total tampilan template "Sederhana" bawaan blogger ini adalah dengan menambahkan kode css dibawah ini dan meletakannya kembali tepat di atas ]]></:skin>:

/*Responsive*/
@media screen and (max-width:1024px){
body{width:100%!important;padding:0;}
.content-inner{overflow: hidden;}
}
@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:30px;text-align:center;}
.Header .description{font-size:14px;text-align:center;}
}
@media screen and (max-width:414px){
.footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section {margin:10px;}
}
@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;}
}
Setiap tema memiliki struktur berbeda, langkah langkah diatas hanya berlaku buat tema sederhana. Kami akan membuat tutorial untuk merobah tampilan dan merombak struktur tema tema bawaan blogger yang lain pada episode selanjutnya. Hanya di editblogtema.

7. Dengan mengikuti langkah yang di sampaikan diatas setiap tampilan widget pada opsi desktop/laptop dapat tampil pada hape/mobile. Jika widget yang yang kita inginkan ternyata tidak tampil pada hape/mobile kita dapat melakukan langkah berikut: Masuk ke pengaturan dan langsung ke opsi "edit HTML"

gunakan ctrl+f cari widget yang kita inginkan misalnya "popular posts" jika sudah ketemu kdoe seperti dibawah:
<b:widget id='PopularPosts1' locked='false' mobile='yes' title='popular post'
Tambahkan saja mobile="yes" diantara locked="false/true" dengan title=....Mudah sekali, bukan?
LIHAT DEMO

1 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

Lebih baru Lebih lama

Formulir Kontak