Langkau ke kandungan utama

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.

Komen

  1. 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

    BalasPadam
    Balasan
    1. 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.

      Padam
  2. Tak boleh buat pun.perlu tunjuk ajar

    BalasPadam
  3. 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..

    BalasPadam
  4. 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..:)

    BalasPadam
    Balasan
    1. 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.

      Padam
  5. Belum ada Tab lagi..nway HH for info..

    BalasPadam
  6. noted. Terima kasih atas perkongsian (^_^)

    BalasPadam
  7. Ulasan ini telah dialihkan keluar oleh pengarang.

    BalasPadam
  8. Assalammualaikum...bro HH,

    terima kasih atas perkongsian nie..

    mselim3

    BalasPadam
  9. 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

    BalasPadam
    Balasan
    1. Cuba tambah / di ayay terakhir .. seperti ini - "..... maximum-scale=1"/>"

      Padam
  10. 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

    BalasPadam
    Balasan
    1. 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 ..

      Padam
  11. Wah, menarik nie... Zumal mmg online guna phone jer nanti senang la tengok yer...

    BalasPadam
  12. 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.

    BalasPadam
  13. tak berjaya HH. adakah ada kesilapan dimana-mana?

    BalasPadam
  14. Terima kasih dengan perkongsian ini..

    BalasPadam

Catat Ulasan

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 Me'. Terima kasih.