Membuat Blogg Mobile Friendly

Yang dimaksud Cara Membuat Template Blog Responsive Mobile Friendly dalam postingan ini adalah mengubah template bawaan Blogger menjadi ramah seluler (mobile friendly).





Setelah dibuat responsive, jangan lupa nonaktifkan tempalate mobile bawaan blogger dengan setting seperti ini:




Settingan itu pula yang harus diterapkan jika Anda menggunakan Template Blog Responsive/Mobile Friendly. Jika tidak, yang akan tampil di HP nanti template mobile default Blogger.


Cara Membuat Template Blog Responsive Mobile Friendly

1. Buat Blog Baru

2. Pilih Template Simple (Sederhana).

Setelah selesai membuat blog baru, lakukan langkah berikut ini dengan seksama dan dalam tempo sedang saja, hati-hati, jangan buru-buru, untuk menjadikannya responsive.

1. Klik Tema > Edit HTML

2. Temukan kode berikut ini di bagian atas kode template:

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

3. Hapus kode di atas dan ganti dengan kode berikut ini:

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

4. Temukan dan hapus kode berikut ini yang ada di bawah kode <b:template-skin>

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

5. Copas kode berikut ini di atas kode ]]></b:skin>

.separator a{margin-left:0px!important;margin-right:0px!important;}

.post img{max-width:100%;height:auto;}

6. Temukan kode berikut ini di bawah kode <b:template-skin>

body {
min-width: $(content.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
Hapus dan ganti dengan kode berikut 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);
}

7. Tambahkan kode berikut ini di bawah kode tadi:

.main-inner .column-center-outer{

float: left;

width:65%;

}

8. Copas kode berikut ini di atas kode ]]></b: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;}
}

9. Save! Simpan Template.

Demikian Cara Membuat Template Blog Bawaan Blogger menjadi Responsive Mobile Friendly.*

Tentang Saya

Selamat datang di blog saya yang penuh dengan segala kebutuhan kalian, kalian pernah kuliah di iformatika tinggal buka blog ini dan dapatkan informasinya, jika butuh software tinggal download pada situs ini yang telah disediakan untuk kalian.

Blog ini berisi semua materi kuliah Informatika, dan lainnya karena apapun yang penulis publikasikan karena ketika ada ide, penulis langsung tulis dan publikasikan melalui blog ini,

Terimakasih telah berkunjung, jangan lupa kasih komentarnya.

Daftar adsense untuk blog

Blog ini di buat karena tugas kuliah waktu di UNINDRA, saya membuatnya dengan tujuan awal untuk mendapatkan nilai dari Dosen. Dan sekarang saya mau dapat nilainya dari Google, sedang berusaha untuk mendapatkan nilainya dengan cara mendaftar ke adsense dan sekarang sedang disiapkan oleh adsense berikut gambar yang bisa saya tampilkan dalam bentuk screenshoot

gambar 1. daftar adsense

Daftar adsense ketika jumlah pengunjung sudah lebih dari 6000, dan blog sudah di buat dari tahun 2012. Baru sekarang didaftarkan semoga diterima.

gambar 2. lanjutkan untuk menyiapkan iklan

gambar dua muncul setelah kita mendaftarkan blog ke adsense, selama menunggu kita siapkan dan tempatkan iklan sesuai keinginan dengan menambahkan gadget adsense, lengkapnya ada pada gambar ke 3 seperti dibawah ini.

gambar 3. tambah gadget adsense

setelah blog masuk adsense dan selama menunggu pengumuman kelulusan,,,hehe,,,kayak sekolah aja.

iya nunggu blog diterima adsense, kita pasang dulu iklan untuk ditempatkan pada posisinya dengan menambahkan gadget