[ blog's tutorial ] Responsive Blog Design (Membuat Blog Menjadi Mobile Friendly)

by K A L L E N
Let's Share, nyaan! (。•ㅅ•。) :
Halo konbanwa~!
Tadi siang aku sempet ngotak-ngatik blog buat lebih friendly view pas kita buka via smartphone. Dan sempet kena musibah karena tiba-tiba aja blog templatenya jadi pakai template jaman dulu! Sungguh itu aku langsung lemes banget. Pas banget aku emang lagi ngotak-ngatik buat mobile friendly view ini. Aku kira aku salah pencet atau gimana, tapi tiba-tiba aja gitu padahal aku ga ngerasa salah pencet!
Aku pun minta kebeberapa temenku untuk cek kalo blog ku via desktop template nya berubah, dan ternyata bener mereka bilang kalo blogku templatenya jadul. Dan akhirnya aku pasrah, terus aku restart laptop karena lemot. Pas aku buka kembali, blog ku seperti semula lagi, ke template yang sekarang. Aneh kan? mungkin ada yang tau kenapa penyebabnya?


Oke kita balik lagi ke topiknya~! Kali ini aku mau ngasih tau cara buat blog kita pas diliat pake hape itu enak diliatnya, ga perlu zoom in zoom out lagi, terus templatenya itu sama seperti yang kita pake di desktop. Dan ternyata caranya itu simple banget! Padahal aku nyari banget di Google dan kebanyakan mereka ga ngejelasin kode ini itu tuh ditaruh mana. Maklum, saya masih awam banget sama CSS, saya bukan anak desain web wkwkwk :")

Yuk langsung aja kita buka Blogger.com > Tema
Terus di bagian seluler kan dibawahnya ada roda gitu, yuk di klik yang itu!

Lalu pas memilih tema seluler, kita pilih yang Ya. Tampilkan tema seluler di perangkat seluler.

Lalu kita pilih tema seluler yang khusus. Simpan!

Nah, selesai dibagian seluler ini, balik lagi ke dashboard > tema > Edit HTML

Kode ini digunakan untuk menyembunyikan sidebar di blog seluler, jadi widget yang kita susun di blog desktop itu gak keliatan pas dibuka di hape. Tenang aja, widget kamu gak bakal hilang kok kalo dibuka di PC!

cari kode ]]></b:skin>

Lalu pastekan kode ini dibawah ]]></b:skin>
<b:if cond='data:blog.isMobile'><style type='text/css'>#outer-wrapper {width:98%;max-width:640px;padding-top:10px;}#main-wrapper {width:100%;margin:5px 10px;margin-left:0;margin-top:0;float:none;}.post {margin:0 auto;padding:5px;padding-bottom:0;}#sidebar-wrapper, #sidebar-wrapper2 {display:none;}</style></b:if>

atau
<b:if cond='data:blog.isMobile'><style type='text/css'>#outer-wrapper {width:100%}#main-wrapper {width:96%;margin:0 auto;float:none;}#rsidebar-wrapper {display:none;}</style></b:if>
SAVE! Coba cek blog kalian lewat hape, sidebarnya sudah disembunyikan~!

Terus kode ini buat blog kalian menjadi lebih mobile friendly!
Langsung aja Tema > Edit HTML

cari kode ]]></b:skin>

Lalu pastekan kode ini diatas ]]></b:skin>
@media screen and (max-width: 3000px){/* CSS styles */}@media screen and (max-width: 1300px){/* CSS styles */}@media screen and (max-width: 1024px){/* CSS styles */}@media screen and (max-width: 992px){/* CSS styles */}@media screen and (max-width:880px){/* CSS styles */}@media screen and (max-width:768px){/* CSS styles */}@media screen and (max-width:600px){/* CSS styles */}@media screen and (max-width:480px){/* CSS styles */}@media screen and (max-width:320px){/* CSS styles */}@media screen and (max-width:240px){/* CSS styles */}
SAVE~! Terus liat blog kalian via hape~!
SELESAI DEH! Semudah itu loh! Padahal aku ngebongkar google sampe bingung, sedih, senang :")
Dan hasilnya bakal jadi kayak gini

Jadi lebih enak diliat kaan?? Fontnya juga readable gitu! Udah gitu ga perlu ngescroll kanan kiri lagi!
Tapi mohon maaf yah, untuk gambarnya masih cilik cilik, masih on progress. Nanti aku update lagi~!

Sekian tutorial blog kali ini! Semoga bermanfaat~!

19 Juni 2018
Regards, Kallen.

Source:

  • https://shizenku.blogspot.com/2013/11/langkah-langkah-menghilangkan-sidebar.html
  • http://www.o-om.com/2013/09/responsive-web-design-valid-html5-css3.html



♫ Thanks for Reading, da. Ctrl + C = COPY! ♫

0 Comment(s) on "[ blog's tutorial ] Responsive Blog Design (Membuat Blog Menjadi Mobile Friendly)"

Posting Komentar

Rules :
✱ Menggunakan bahasa yang baik, jelas dan benar
✱ Tidak spam
✱ Tidak menyinggung perasaan author maupun orang lain

Regards,
Kallen Beilschmidt ♫

Intip Yang Ini Juga Yuk!

 
Blog's Tutorial Beauty's Review Thanks To