Membuat Template Responsive

Tidak bisa dipungkiri saat ini banya netter yang menggunakan mobile phone sebagai alat berselancar di dunia maya, hal ini harus direspon dengan sekian modifikiasi agar blog tetap friendly dan responsive segala jenis gadget. 

Sayangnya sampai saat ini template default blogger belum bisa diakses dengan responsive oleh mobile phone, dengan baik. Yang tersedia oleh blogspot adalah tampilan versi mobile dan kelihatannya juga kurang menarik. Namun tak usah berkecil hati, ada cara lain untuk menampilkan design blog anda tetap menarik dan available untuk tampilan di Hand Phone, Tablet atau piranti apapun. ikuti langkah berikut:

LANGKAH PERTAMA
Langkah pertama adalah anda harus menghilangkan terlebih dahulu navbar-nya dalam mode off. caranya adalah

1. Login melalui akun anda
2. Tata letak(setting)
3. Pilih Navbar kemudian edit
4. pili mode off
5. kemudian simpan

LANGKAH KEDUA

Cari kode berikut dengan cara menekan CTRL+F

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

KOde diatas hapus saja, dan gantikan dengan kode di bawah ini

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

kalau sudah selanjutnya cari kode di bawah ini

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

Jika sudah nemu, ganti dengan kode berikut

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

LANGKAH KETIGA
Masih di pengaturan HTML, langkah terakhir yang harus Anda lakukan adalah mencari kode lalu masukkan kode di bawah ini tepat di atasnya

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

Kemudian Simpan

Salah satu ciri khas yang terdapat dalam template default blogger adalah tulisan diberdayakan oleh blogger seperti di bawah ini

untuk menghilangkannya tidak terlalu sulit, dan dihilangkan dalam rangka untuk menciptakan design blog berasa premium meskipun template ini gratisan.
Langkah yang ditempuh adalah di bawah ini:


1. Login melalui akun blogger andan
2. Pilih Template
3. Edit HTML
4. Cari kode berikut : ]]&gt;&lt;/b:skin Cara tercepat adalah tekan ctrl+f.
5. Bila sudah ditemukan maka, masukkan kode di bawah ini tepat di atas kode ]]&gt;&lt;/b:skin

#Attribution1 {height:0px;visibility:hidden;display:none}

6. Langkah terakhir SIMPAN

BAGAIMANA SUDAH TERHAPUS KAH?
Apabila tulisannya belum hilang, masuk ke Tata Letak pada bagian bawahnya atau Attribution klik pada setting kemudian hapus.

SELANJUTJNYA....

BIla anda ingin mengganti dengan menyematkan produk tertentu, sehingga nampak template tersebut adalah produk anda sendiri, silahkan ikuti langkah berikutnya:

1. Login melalui akun blogger andan
2. Pilih Template
3. Edit HTML
4. Cari kode

<-- outside of the include in order to lock Attribution widget --->

5. Kalau udah ketemu kodenya, lanjut ke copy-paste kode berikut ini diatas kode di atas.

akan nampak seperti ini

Copyright © 2014 By <a href="http://ariefpurwanata.blogspot.com/">Arief Purwanata</a>
<-- outside of the include in order to lock Attribution widget -->

SELESAI dan SIMPAN

Share: