Cara Buat Blog Responsif

Cara Buat Blog Responsif. Dalam entri sebelum ini, saya ada beritahu mengenai bagaimana nak dapatkan trafik blog dari peranti atau gajet terkini. Menerusi entri tersebut, saya dah berikan 2 tips mudah untuk membolehkan blog anda menjana trafik samada daripada peranti Android, iPhone, iPad, Tablet, BlackBerry dan sebagainya. Ada tips ketiga yang saya tidak sempat nak berikan kepada anda.

Bukan apa, semasa saya menulis entri tersebut, saya agak tergesa-gesa .... malah saya tak sempat nak periksa keseluruhan entri - iaitu membuat semakan sebelum saya terbitkan. Saya tulis entri tersebut dalam masa kurang 15 minit dan terus terbitkan ....

Ketika entri itu ditulis, saya sekeluarga sedang bersiap untuk bawa satu keluarga dari Sungai Besar, Selangor untuk bersiar-siar sekitar Taiping. Kalau anda follow Instagram saya, tentu dah lihat beberapa gambar menarik yang saya kongsikan (menarik ke?). Jadi, entri tersebut menjadi satu teaser pula buat anda .... hehehe.. maaf eh.

Cara-Cara Nak Buat Blog Jadi Responsif

Ok, kali ini saya nak dedahkan tips ketiga yang membolehkan blog dapat trafik dari peranti serba canggih sekarang. Caranya ialah dengan menjadikan ia sebuah blog responsif - iaitu paparannya sama dan bukan dalam mode mobile seperti yang ada di dalam blogspot.

Blog Dalam Bentuk Responsif



Cara Buat Blog Responsif

Letakkan kod ini di bawah HEAD blog anda.


Kemudian, apa yang perlu anda lakukan ialah memasukkan kod CSS yang disertakan ini dalam HTML bahagian CSS blogspot/blog anda. Di mana bahagian CSS tersebut? Anda boleh semak seperti yang saya berikan di bawah ini.

Kod HTML CSS Responsif


Kod di atas diletakkan di dalam bahagian CSS blogspot anda. CSS dalam blogspot terletak di bahagian ini. Klik anak panah itu, maka akan keluar tulisan warna biru. Masukkan kod di atas di mana-mana bahagian dalam CSS tersebut.

Kod yang telah diletakkan adalah seperti di bawah ini.

Uji paparan blog anda. Macamana nak uji? Hmm .. boleh pinjam sapa-sapa punya iPad, iPhone, Tablet dan cuba buka blog anda ... atau boleh cuba gunakan ini - Responsive Test

Jika tak berhasil, anda boleh ubah atau tambah kod HTML di bawah ini.

Anda boleh ubah nilai max-width yang tertera di atas ikut kesesuaian sesuatu peranti. Panduan ini merupakan panduan trial and error. Jika menjadi alhamdulillah, jika tak kena cuba lagi dengan nilai lain - resolusi paparan gajet tersebut.

Selamat mencuba.

{ 19 comments.. read them below or add one }

Khalid Kyle Khalid Kyle December 14, 2013
hmm bukan paparan dlm mobile mode(automatik jd simple template) lebih bersifat lebih mesra mobile ke utk pengguna blogspot & bkn kah coding2 di atas boleh memberatkan lg blog? ada contoh print screen x blog yg letak coding ni, ape je beza dgn paparan pada desktop yer
Faizal Anuar Faizal Anuar December 14, 2013
Tak boleh buat pun.perlu tunjuk ajar
Hootoh Tudia Hootoh Tudia December 14, 2013
Trimas bro HH. Mulanya HT sangka banyak HTML dan CSS yang kena modified utk jadikan template Responsif. Nmpaknya entri ni dah selamatkan hootoh blog dari ditukar templatenya. Trimas again, Much more respect..
HASRUL HASSAN HASRUL HASSAN December 14, 2013
Koding tak memberatkan sbb apa yang dilakukan adalah mengecilkan keseluruhan paparan blog berdasarkan gajet apa yang digunakan. Kalau mahu terus menggunakan versi mobile blogspot, boleh je. Cuma saya nak berikan alternatif kalau mahu blog terus dipaparkan seperti mana apa yang telah dibuat menerusi paparan desktop.

Kelebihan banyak ada pada blog WP yang telah tersedia menjadikan ia responsif. Dan bagi membolehkan blog blogspot jadi seperti WP, boleh cuba pendekatan di atas tu.
Cik Matahariku Cik Matahariku December 14, 2013
terima kasih kongsi maklumat ini, tapi bukankah bila kita buka blog di mobile, kita ada pilihan "view in web version" ( lebih kuranglah bunyinya gitu..), so kenapa nak susah-susah tukar macam kat atas..?dok pahe..:)
HASRUL HASSAN HASRUL HASSAN December 15, 2013
Sbb bila buka versi mobile yang ada ?m=1 tu, akan berlaku duplikasi dan ini akan buat Google Webmaster Tools anggap ia satu error, dan bila berlaku duplikasi ia akan jejaskan blog dalam enjin carian, sbb ia akan ingat benda tu spam link sbb ia benda sama.

Lagi satu, apabila versi mobile yang blogspot buat tu, ia akan potensi utk terima trafik kurang, sbb widget spt linkwithin, nrelate .. sidebar jua tak dapat nak papar. Pengiklanan juga jadi kurang berkesan.
Raudzah Z Raudzah Z December 15, 2013
Belum ada Tab lagi..nway HH for info..
Kenit Cinonet Kenit Cinonet December 16, 2013
noted. Terima kasih atas perkongsian (^_^)
Eyma Balkish Eyma Balkish December 17, 2013
This comment has been removed by the author.
Mohd Selim Zainal Mohd Selim Zainal December 20, 2013
Assalammualaikum...bro HH,

terima kasih atas perkongsian nie..

mselim3
irfan hairi irfan hairi February 27, 2014
Saudara Hasrul saya cuba paste code head tersebut di bawah code head dan mempunyai syntax error seperti ini Error parsing XML, line 580, column 5: The element type "meta" must be terminated by the matching end-tag "/meta". kenapa yer?? boleh bantu saya.. thank you
HASRUL HASSAN HASRUL HASSAN February 27, 2014
Sama-sama Hootoh Tudia .. :)
HASRUL HASSAN HASRUL HASSAN February 27, 2014
Cuba tambah / di ayay terakhir .. seperti ini - "..... maximum-scale=1"/>"
irfan hairi irfan hairi February 27, 2014
Saudara Hasrul saya telah mencuba cara di atas try n error dan tiada hasil perubahan still sama. Saya menggunakan android, apabila blog saya dipaparkan di android, sidebar telah hilang dan bagaimana screen yang dipaparkan di desktop sama di android, adakah ada penambahan code di bahagian sidebar supaya boleh dipaparkan di android? saya tahu ia boleh diubah menggunakan coding mobile=yes di html template tetapi widget sidebar tetap tiada just widget sidebar muncul di bahagian footer blog apabila telah menggunakan coding mobile-yes, tidak seperti yang dilihat di dalam desktop. contoh blog saudara Hasrul dan penpatah menggunakan blogspot tetapi still boleh dipaparkan berbagai gadget tanpa perlu melihat pada mobile version. Saya harap saudara Hasrul dapat memberi tips kepada saya.. Thank you
HASRUL HASSAN HASRUL HASSAN February 27, 2014
Masalah sebenar adalah anda letak widget atas Header ... jadi tak boleh nak reconstruct balik dalam paparan lain. Saya juga tak boleh nak akses blog anda ... buatkuihraya ..
Ahmad Zu Mal Md Rayi Ahmad Zu Mal Md Rayi March 16, 2014
Wah, menarik nie... Zumal mmg online guna phone jer nanti senang la tengok yer...
kamil salleh kamil salleh October 07, 2014
Salam bro... HH. Di blog saya dah ada tetapi bila dibuka ia tidak sama apa yang ada di blog HH iaitu template terbaru. Saya masih guna template yg dulu, yg HH guna blog yang guna sebelum ini iaitu template PURNIMA.
aRz MoHa aRz MoHa March 07, 2015
tak berjaya HH. adakah ada kesilapan dimana-mana?
Along Polimas Along Polimas July 15, 2015
Terima kasih dengan perkongsian ini..

Terima kasih kerana sudi tinggalkan komen. Komen anda adalah tanggungjawab anda. Jika anda dapati ada mana-mana link tidak berfungsi di dalam blog ini, sila beritahu saya ye.

Untuk peluang pengiklanan, sila email saya menerusi ruangan 'Contact'. Terima kasih.