Mengatasi tampilan mobile tidak bisa di atur

Mungkin ada yang belum mengerti dengan judul postingan di atas. Okelah kalo begitu, saya akan menjelaskannya dengan santai. Lagipula saya sudah lama tidak posting di karenakan kesibukan di dunia nyata yang sangat padat sekali. Kembali ke topik, kalian saat ini sedang membaca artikel yang berjudul mengatasi tampilan blog versi mobile yang tidak bisa diatur isinya maupun tampilannya. Agar kita bisa mendesign tampilan blog versi mobile sesuka hati kita, maka kalian harus mengatur settingan template mobile yang ada di dashboard blogger dari default menjadi khusus. Lebih jelasnya silahkan kalian ikuti panduannya di bawah ini.

1. Pertama masuk terlebih dahulu ke blogger
2. pada pilihan opsi lainnya pilih "template"
3. Kalian lihat gambar di bawah ini.

4. Kalian klik icon gear yang ditunjuk tanda panah pada gambar di atas
5. Lalu pada pilihan template seluler kalian pilih khusus, lihat gambar di bawah ini.

6. Sampai di sini seharusnya kalian sudah bisa mengatur sendiri tampilan blog versi mobile. Sekarang kalian buka url homepage versi mobile dengan menambahkan kode "?m=1" di belakang url tanpa tanda petik. Contoh = "http://shizenku.blogspot.com/?m=1". Setelah halaman blog versi seluler terbuka lalu kalian lihat dan bandingkan dengan tampilan desktop. Apakah hasilnya tidak ada bedanya alias sama persis atau ada sedikit perubahan. Jika kalian menggunakan template bawaan blogger kemungkinan besar hasilnya ada sedikit perubahan pada tampilan homepage sebagai contoh hanya terdapat tanggal posting, judul, thumbnail, deskripsi, dan jumlah komentar. Tetapi jika kalian menggunakan template yang sudah di modifikasi kemungkinan tampilannya sama persis dengan yang ada di desktop. Untuk itulah artikel ini dibuat, yaitu untuk mengatasi template yang tidak bisa mengatur tampilan mobile. Jadi artikel ini ditujukan untuk para blogger yang menggunakan template custom lama yang tidak bisa mengatur tampilan tampilan seluler. Bagi blogger yang merasa templatenya tidak bisa mengatur tampilan versi seluler, silahkan melanjutkan membaca artikel ini.

Cara mengatasi tampilan mobile tidak bisa di atur :
1. Login ke blogger
2. Pilih template
3. Pilih edit html
4. Setelah itu kalian cari kode <b:includable id='main' var='top'>
5. Lalu kalian tambahkan kode <b:if cond='data:mobile == &quot;false&quot;'> tepat dibawah kode <b:includable id='main' var='top'>
6. Nanti hasilnya akan seperti ini

<b:includable id='main' var='top'>
<b:if cond='data:mobile == &quot;false&quot;'>
......bla bla bla....

7. Kalian cari lagi kode </b:includable> yang letaknya di urutan bawah kode <b:includable id='main' var='top'>
8. Setelah ketemu, tambahkan kode di bawah ini tepat diatas kode </b:includable>

<b:else/>
<b:include name='mobile-main'/>
</b:if>

9. Nanti hasilnya akan terlihat seperti ini

......bla bla bla....
<b:else/>
<b:include name='mobile-main'/>
</b:if>
</b:includable>

10. Dan contoh keseluruhan kodenya akan terlihat seperti di bawah ini (hanya contoh).

<b:includable id='main' var='top'>
<b:if cond='data:mobile == &quot;false&quot;'>
<b:include data='posts' name='breadcrumb'/>
<div class='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><b:include data='post' name='comments'/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><b:include data='post' name='comments'/></b:if>
</b:loop>
</div>
<b:include name='nextprev'/>
<b:else/>
<b:include name='mobile-main'/>
</b:if></b:includable>

11. Selesai, sekarang template kalian sudah bisa mengatur tampilan mobile.

Sekarang kalian mulailah mengatur template seluler
Kalian cari kode-kode di bawah ini :

1. <b:includable id='mobile-main' var='top'>
2. <b:includable id='mobile-index-post' var='post'>
3. <b:includable id='mobile-nextprev'>
4. <b:includable id='mobile-post' var='post'>

1. Pertama, kode-kode yang perlu kalian setting di dalam kode <b:includable id='mobile-main' var='top'> hampir sama seperti yang ada di dalam kode <b:includable id='main' var='top'>
2. Kedua, kode yang ada di dalam <b:includable id='mobile-index-post' var='post'> di gunakan untuk mengatur tampilan postingan di halaman index, yang saya maksud dengan halaman index itu bukanlah halaman index seperti di pencarian google yah. Akan tetapi, yang saya maksud halaman index itu seperti halaman index blog seperti homepage, label, pencarian, archive, dan yang sejenis.
3. Ketiga, di sini kalian bisa mengatur settingan navigasi new post, home, dan old post seperti yang biasanya berada di bawah postingan. Kalian bisa menyamakannya seperti yang ada di dalam kode <b:includable id='nextprev'>
4. Keempat, di sini kalian bisa mengatur kode-kode yang akan ditampilkan di halaman postingan. Sama seperti yang ada di dalam <b:includable id='post' var='post'>

jika kalian ingin menambahkan kode css yang hanya di tampilkan di versi seluler, kalian apit kode style css dengan kode <b:if cond='data:blog.isMobile'> dan kode </b:if> seperti contoh di bawah ini (hanya contoh).

<b:if cond='data:blog.isMobile'>
<style>
.comments .comments-content .comment-replies{margin-left:36px;margin-top:1em;}
.comments .comment-replybox-single{margin-left:48px;margin-top:5px;}
.comments .comment-thread.inline-thread{background:none;padding:0;}
.comments .comments-content .comment-thread{margin:0;}
.comments .comments-content .inline-thread{padding-left:0.70em;}
.comments .comment-replybox-thread{margin-top:5px;}
.comments .comment-replybox-single{margin-left:48px;margin-top:5px;}
.comments .comments-content .comment:last-child{border-bottom:0 none;padding-bottom:0;}
.comments .continue{border-top:2px solid #999;cursor:pointer;}
.comments .continue a{display:block;font-weight:bold;padding:0.5em;}
</style>
</b:if>

Ganti kode css yang saya bikin miring diatas dengan kode css yang kalian khususkan untuk seluler.

Agar widget bisa tampil di tampilan seluler, tambahkan kode mobile='yes' di dalam kode widget. Lihat contoh di bawah ini.

<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Popular Posts Minggu Ini' type='PopularPosts'>

Sekian dulu ya sobat. Udah malam, ane mau bobok dulu.