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.


Dah baca post berikut:

advertisement


Komen Pembaca ...

  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.

Popular

Bagaimana Cara Nak Jadi Jutawan Dengan Produk Sendiri?

Siapa yang tak teringin nak jadi jutawan kan? Sejak saya menjadi seorang blogger sepenuh masa sejak 2010 ni, saya dah nampak ramai rakan-rakan saya yang jadi jutawan. Dulu, mereka sama-sama tulis blog, tapi kini sudah berbisnes dengan produk sendiri. Awalnya untung sikit .. tapi sekarang, dah boleh dianggap sebagai jutawan.

Susah ke nak jadi jutawan ni? Ok ... mari kita semak dulu apa maksud jutawan ni. Jutawan bermaksud seseorang yang mempunyai wang atau harta yang bernilai berjuta-juta ringgit. Kalau anda ada wang atau harta lebih dari juta - ada billion, anda tetap dipanggil jutawan. Dalam bahasa Malaysia, tiada perkataan khusus untuk seseorang yang miliki wang atau harta berbillion ringgit.  Bagaimana Cara Nak Jadi Jutawan? Sekarang anda dah tahu apa maksud jutawan. Jadi, jika anda nak jadi jutawan .. misi anda mestilah untuk mempunyai dan memiliki wang atau harga lebih dari sejuta ringgit. Capai je harta bernilai juta, maka dah boleh dapat title jutawan (dari segi istilah).

Tak a…

Telinga Berdesing Bawa Petanda

Pernah merasa telinga berdesing tak? Ia kadangkala berlaku tanpa diduga, tanpa ikut masa. Secara tiba-tiba .... ntah disebabkan apa, terasa telinga akan berdesing. Sesetengah akan mengaitkannya dengan sejenis penyakit dinamakan Tinnitus.

Walaubagaimanapun, orang lama-lama dalam masyarakat Melayu, ada telahan sendiri mengenai telinga berdesing ini. Mereka mengaitkan dengan kejadian-kejadian yang bakal berlaku dek kerana berdesingnya telinga. Orang tua lama-lama mengaitkan masa dan bahagian telinga yang mana terkena desingan ini, berikut saya kongsikan sedikit info dan pengetahuan mengenai telinga berdesing ini.
Telinga Berdesing Bawa Petanda Telinga Berdesing Bawa Petanda Sesuatu Kejadian Bakal Berlaku Jika Telinga Kanan Berdesing Jam 06:00 - 07:00 pagi - mendapat khabar burukJam 07:00 - 08:00 pagi - akan difitnah oleh orangJam 08:00 - 09:00 pagi - akan membuat rencana pergi jauh sendirian atau bersama orang lainJam 09:00 - 10:00 pagi - bermakna akan ada berita yang kurang menyenangka…

Cara Padam Akaun Facebook

Tentu ada yang nak tahu cara nak padam akaun Facebook, terutama bila si dara dah jadi isteri orang, dan si suami pula melarang si isteri untuk gunakan Facebook. Malah, ada yang mahu tutup akaun Facebook sebab mahu elak perkara tidak baik berlaku, atau terus berlaku. Saya tahu sebab pernah bertanya kepada saya.

Jadi entri kali ini saya nak kongsikan cara-cara nak memadam (delete) akaun sosial Facebook. In Sha Allah, ia akan beroleh manfaat pada mereka yang mungkin nak tahu cara nak padam akaun Facebook; khas dan khusus untuk akaun peribadi.

Oh ya, mungkin ada yang tidak tahu, anda boleh mempunyai banyak akaun Facebook, asalkan alamat email dan juga no telefon bimbit anda berbeza bagi setiap akaun. Jadi, kemungkinan ada pengguna yang punyai lebih dari satu akaun, dan mahu padam akaun Facebook yang lain boleh juga ikuti panduan ini.
Cara-Cara Padam Akaun FacebookLangkah pertama ialah anda perlu login ke akaun Facebook yang mahu dipadamkan.Langkah kedua, bila dah login, terus klik pautan …