Mengatur Tampilan Mobile Dengan CSS
- 25 November 2013
- Mobile Template
- 60 komentar
Sebenarnya saya bingung mau beri judul apa pada artikel kali ini. Yang jelas intinya, pada kesempatan ini kita akan belajar mengatur tampilan blog versi mobile dengan menggunakan CSS. Untuk template bawaan blogger mungkin ini bukan masalah.Pertanyaan ini mungkin akan muncul bagi kamu yang sedang melakukan modifikasi tampilan mobile atau sedang membuat atau merancang tampilan mobile pada template kamu (khususnya untuk blogger). Jika kita membongkar dan mempelajari struktur kode yang digunakan template bawaan blogger, maka kita akan mendapatkan fungsi expr:class='"loading" + data:blog.mobileClass' yang terletak pada tag pembuka body. Ternyata fungsi yang saya maksud itu berguna untuk mengatur tampilan blog versi mobile sesuai yang kita inginkan dengan menggunakan CSS. Untuk lebih jelasnya akan saya gambarkan berupa contoh nya sebagai berikut :
HTMLnya
<body expr:class=""loading" + data:blog.mobileClass">
Kode HTML yang terdapat pada template kamu gunakan
</body>
CSSnya
<style type="text/css"> /*Penggunaan fungsi '.mobile' pada CSS, agar kita dapat mengatur tampilan blog versi mobile pada area atau daerah body*/ .mobile body {bla... bla...} /*ini untuk pengaturan tampilan blog versi desktop, tanpa perintah '.mobile'*/ body {bla... bla...} </style>
Untuk lebih jelasnya coba kamu lihat tampilan blog ini pada versi desktop dan versi mobile. Jika di perhatikan, maka akan terlihat perbedaan yang mencolok pada kedua tampilan tersebut.
Melanjutkan pembahasan pada artikel sebelumnya "Cara Membuat Area Post Ala Blogazine". Ternyata fungsi class mobile tadi harus kita letakkan kembali pada area HTML postingan yang kita buat menjadi blogazine. Agar penggunaan ukuran pada tulisan dan sebagainya, sesuai dengan tampilan mobile pada blog kita. Dan hasilnya akan lebih kurang seperti berikut: versi desktop dan versi mobile.
Update 29 November 2013
Untuk kamu yang ingin mengikuti cara diatas. Pastikan dahulu bahwa blog kamu itu telah mengaktifkan fitur mobile bawaan.
Baca: Optimalkan Blog atau Situs yang Anda Kelola dengan Fitur Mobile!
Baca: Optimalkan Blog atau Situs yang Anda Kelola dengan Fitur Mobile!
Bagi yang templatenya tidak responsive, ini bisa dijadikan solusi... :D keren mas tampilan mobilenya :)
wah, nanti saya praktekkan ah.. *_*
makasih mas bro..
bener bgt kang,, cara ini memang bsa jadi solusi buat teman2 yg gak gunain template responsive.. :D
hahaha, makasih kang,, :)
Silahkan bro naufal :D
Blog ini tampilan versi mobilnya keren mas, tapi sayang nggak ada kotak komentarnya hmmmm :)
Kalau blog saya malah tak non aktifkan versi mobile nya hehehe :D
iya mbak,, saya jga heran,, dari kmarin2 uda nyari apa masalahnya ee masih gk nemu2 jga.. sabar ya mbak,, maaf atas ketidak nyamannya di versi mobile :)
Kalau saya sudah responsive bawaan ni mas :) bagus nih buat koleksi / modif template yang belum responsive :) terima kasih artikelnya ya mas.
Wah solusi buat template tidak responsive ya kang :) membantu sekali hehe.
wah kebetulan template saya belum responsive mas.. sepertinya dengan sedikit mengoprek tampilan mobile bisa membantu nih mas.. oke mas terimakasih penjelasannya.. akan saya coba utak atik dikit dikit... hehehehe
Saya jga sudah responsive kok mas,, cuman versi mobile tetap saya pasang.. Saya berfikir bahwa tampilan responsive akan sedikit lebih berat saat dibuka menggunakan hape di bndingkan versi mobilenya yg kelihatan lebih simpel.. :)
Sama2 mas Nady :D
Kenapa gak pake media query css3 ? Lebih terstruktur di resolusi berapapun lho
berarti jatuhnya ke responsive tu ya mas..? penggunaannya memang mmbuat tampilan lebih keren bsa nyesuaikan sendiri,, namun saat kita buka blog / web yang responsive di hp, biasanya tampilannya akan lebih berat ketimbang yg menggunakan versi mobile.. Ya,, itu kita kembalikan saja ke pimilik blog / web apa mereka pingin buat yg responsive saja atau gimana2nya ya kita serahkan saja ke pemilik blog / web trsbt hehe :D
Ooo.. gt to mksdnya responsive... maklum org qatrox mas... hehehe..
untungnya template saya responsive :) hehe
Alhamdulillah template saya sudah responsive..
Mantap saya mau coba dulu ya gan..
silahkan coba, awas jgn pake gula yah...xixixi
iya mas luthfi.. :)
media query gunanya buat responsive mbak,, tapi kalau yg dibahas disini,, membuat tampilan mobile,, ya biasanya tampilan mobile jga di bikin responsive cuman tanpa gunain css3 media query lagi hehe
saya jga sudah kok kang,, alhamdulillah ya,, sesuatu hehe :p
wkwkwk kang beben ada2 aja :D
Iya sebaiknya harus di setting kotak komentarnya baik versi desktop ataupun versi mobile, karena kan pengunjung blog bisa pakai apa saja, baik hape atau pun komputer. Kalau saya biasanya pakai komputer terus hehehe :D
tampilan mobile saya lumayan ancurlah hiks...hiks...hiks
coba gunain tutor ini sob,, tadi saya smpat berkunjung dan sekalian melihat page source blog sobat,, dan spertinya blm ada fungsi pengaturan mobile sprti yg ditrangkan,, mngkin dngn begitu tampilan blog sobat akan lebih rapi dan menarik lagi hehe,, *sekedar saran aja* :)
Oke mbak, akan saya usahakan :D Thks sarannya ;)
Wah bisa buat alternatif nih,,, banyak template keren yang belum responsive.
Dengan cara ini bisa lebih gampang ngaturnya :)
mungkin template blog saya tidak responsive.. saya tidak pernah check.. hehe..
hmm setuju deh mas ^_^ di tunggu artikel selanjutnya yah hehe
tuk yg tdk responsif kayak pny sy.., tampilan mobilex standar banget dan anehx lg klo pake mobile napa agak berat ya..??, makasih ya.., *smile
bener mas,, template keren kalau hanya di desktop doang dan gak responsive,, lebih baik ngaktifin fitur mobile,, kalau mau sama2 keren baik tampilan desktop atopun tampilan mobilenya bsa coba cara ini mas.. dgn bgitu tampilan mobile akan jauh lebih bagus dan ringan kalau di buka di broser hp hehe :D
hehe iya mmng tak responsive,, tapi kan sudah ngaktifin fitur mobile walau tampilannye bawaan dari blogger :)
Yee, kalau akak nak mau sedikit kreasi pada penampilan mobilenye, mungkin akak bsa cube cara nak macam ini di blog akak skrng hehe ;)
tampilan mobile standar sngt ringan waktu kita buka di browser,, cuman kan tampilannya standar bgt,, gk ada pernak perniknya.. jadi org hnya fokus mmca saja,, padahal kan yg dilihat bukan hanya bacaannya,, tapi jga penampilan dari blog itu.. (khususnya saat di buka hp) :D
Oke mas luthfi,,, :-d
Selamat malam, dan salam kenal Mas Agri ijin simak artikel
Yang bermanfaat buat template blog untuk versi mobile mantep deh Mas
Ijin follow juga yah Mas Agri terima kasih :)
Selam kenal juga mas Saud,, terimakasih.. :)
Silahkan mas Saud,, :)
Keren banget mas ... ini untuk solusi bagi pengguna template yang belum responsif ya mas ... :D Nice share ...
wah,, keren habis deh.. penuh dengan kreaksi ya mas ^_^
hehehe,, makasihh mas nazar :) begitulah mas,, ya ngasi solusi saja bagi yg gk responsive hehe :D
hehe iyaa cc Leony.. :)
Owh gitu toh sob .. sip saya coba akan testing-testing hehe
ini yang saya agak bingung sebenarnya sob, saya agak ragu untuk utak-utik bawaan mobilenya, terpaksa saya disable saja yang versi mobilenya.
Btw OOT nih sob :
kalau pake tag kondisional itu ada tutornya gk...??? bagi linknya donk hehehehe, saya gk tau judulnya apa sob :) makasih sebelumnya ya sob :)
Keraguan itu akan terjawab setelah di coba sob.. :D
Coba ini: http://www.mas-sugeng.com/2013/01/mengatasi-duplikat-konten-di-blogspot.html
Silahkan kang ruly.. :)
bagus nih mas
heheh, terimakasih :)
hehe , kalo ane lebih demen pake css media query sob .. rasa nya lebih mudah .. tapi ngomong2 ane baru tau nih di blog bisa custom css buat mobile :D ..
Kalau untuk mengatur responsivenya bagusan mana dengan menggunakan @media screen and (max-width:320px) dengan trik yang di atas ?
masih bingung..mau cariyg udh responsiv aja lah templatenya
sebenarnya sih sama aja, tinggal sesuaikan aja dengan yang kita suka
Your blog look nice and good in quality so make more back links for it.
Qmobile Price and Specification
Are you working serious on your website then carry on worry and use our list alsoFree Blog Post Sites
Are you working serious on your website then carry on worry and use our list alsoFree Blog Post Sites
Are you working serious on your website then carry on worry and use our list alsoFree Blog Post Sites
Your website look good in post where you get this idea nice to look.mobiphones
Your website look good in post where you get this idea nice to look.mobiphones
You must carry on your work and i choose it for my point of view sharing on it.
How To Make Money Online
You must carry on your work and i choose it for my point of view sharing on it.
How To Make Money Online
You must carry on your work and i choose it for my point of view sharing on it.
How To Make Money Online
om ane masih bingung, blog ane yang versi mobile kok ancur yaa ?
Show Emoticon