Shizenku Blog

Informasi unik, populer dan menarik lainnya

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.

klik icon gear

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.

pilih template khusus

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.

46 komentar : Mengatasi tampilan mobile tidak bisa di atur

coba dulu ah di blog ane :)

Diposting oleh 

oke gan,.. sip... silahkan dicoba :D

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

maaf baru bisa balas komen,. sibuk kuliah soalnya.. ane mahasiswa baru 2014 ini om.. :(

udah q cek blog om,.. tampilan index-post di desktop n mobile udah beda tuh,. tinggal atur kode css aja.. :D

Diposting oleh 

ko g bisa di save y ?? :bingung:

Diposting oleh 

gak bisa di savenya kayak gmana,..? berarti belum benar nambahin kodenya.. :)
coba lihat kode nomer 10. liat dibagian kode yang di bold, itu kode yg harus ditambahkan... kalo pake template bawaan blogger, kemungkinan udah ada kodenya... ^_^

Diposting oleh 

mas Budi, jangan lupa ya tolongin blog saya untuk tampilan selulernya

Diposting oleh 

insyaallah,... :)

Diposting oleh 

Blognya semakin keren aja sob!!! Maaf sob lama tak berkunjung lagi sibuk :D

Diposting oleh 

maaf sob, ane juga jarang blogwalking.. skarang ane dah kuliah nih, sibuk banget. :ngakak:

saya sudah mencoba tetapi sewaktu saya membuka blog saya dari handphone hasilnya berbeda, adsense nya tidak timbul di seluler itu kenapa ya mas ?

Diposting oleh 

kalo pengen iklan adsense muncul di mobile, pake template mobile bawaan blogger.. :D

Diposting oleh 

thanks gan, coba dulu nih :ngakak:

Diposting oleh 

oke gan,. silahkan dicoba.. :D

Diposting oleh 

Tutor nya manteb tenan mas...

Diposting oleh 

he he,. postingan biasa wae kok mas.. :D

Diposting oleh 

mantap gan.
Coretanaspal

Diposting oleh 

oke gan sip... :D

Diposting oleh 

pasang iklan adsense di tampilan seluler secara manual aja... caranya tinggal ambil script di halaman dashboard adsense trus parse kodenya.. trus pasang di tampilan mobile..
jika ingin tampil di area postingan -- masukin di dalam kode <b:includable id='mobile-post' var='post'> :D

Diposting oleh 

siapa nih.. ? kayaknya kok ane kenal.. :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

walah,.. ane bukan master :(
oke.. silahkan diterapin diblog mas bro.. :D

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

dilarang nyepam n nyampah berkali-kali di sini... |o|

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

jangan pusing gitu dong... :D

Diposting oleh 

Terima kasih gan,.. informasi yang sangat bermanfaat :)

Diposting oleh 

oke gan.... sama-sama.. :D

izin praktekkan lagi gan
sudah ane coba tapi jadi aneh tampilannya dan dinyatakan tidak mobile friendly
saat ini ane masih pakai versi mobile yg default

Diposting oleh 

udh aku bilang kalo tampilan versi mobile dalam template custom tampilannya berantakan itu karena settingan css nya belum di atur.. karena nyetting kode css untuk versi mobile itu secara manual jadi harus paham dulu kode-kode css.. :D

Website ane kok tampilan mobile, artikelnya gak keluar yah

Diposting oleh 

cek settingan html-nya gan.. udah ada kode <data:post.body/> di dalam kode <b:includable id='mobile-post' var='post'> atau belum..?? :)

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 

saya pernah ngalmn g bsa d sting ke v. mobile, akrnya sy gnti tmplt.

Diposting oleh 
 · Admin mengatakan...

ya itu, itu kalo gak mau ribet otak-atik template.. :D

Diposting oleh 

sangat bermanfaat...

Aplikasi Android

Diposting oleh 

thanks gan
Btw kece juga blognya dedelw.blogspot.com

Diposting oleh 

Harus menerapkan cara ini dulu baru bisa menerapkan cara pada artikel sebelumnya ya mas yang media query?

Diposting oleh 

nggak gan.. beda artikel ^_^
yang disini tutorial agar template yang bukan bawaan blogger (template custom) bisa mengatur template versi seluler seperti di blog ini. shizenku.blogspot.com/?m=1

Posting Komentar : Mengatasi tampilan mobile tidak bisa di atur

Baca dulu Peraturan Berkomentar di Blog Ini ! Supaya komentar anda tak sia-sia. Admin sangat senang jika tidak ada komentar yang mengandung spam :)

.::Peraturan Berkomentar::.

• Gunakan bahasa dan kata-kata yang sopan dan tidak menyinggung semua pihak manapun, baik ketika dilihat anak kecil maupun orang dewasa.
• Usahakan untuk tidak menggunakan kata-kata yang menyinggung RAS, SARA, dan berbau P*RNO.
• Dilarang menaruh link Aktif di dalam kotak komentar.
• Berkomentar Out Of Topic atau Oot saya perbolehkan apabila komentar tersebut berupa pertanyaan penting, asalkan tidak berlebihan dan tidak berbau SPAM!

Komentar akan dibalas paling lambat 3 hari kemudian. Terimakasih atas perhatiannya.
Widgets
Lisensi Creative Commons
Copyright © 2012 . Simo Responsive Template Design oleh . Publisher oleh Shizenku Blog.
Powered by Blogger and AMP ⚡ HTML