Skip to content Skip to sidebar Skip to footer
Home / Belajar SEO / Template Blog / Tips Blog

Membuat Template Blogger Responsive

8 comments

Sebenarnya cara membuat template Blogger agar menjadi Responsive di semua perangkat seluler sangatlah mudah. Walaupun masih banyak pemilik blog yang belum mengerti, tapi tidak ada hal yang mustahil jika ingin belajar. Masalahnya terletak pada kemauan seseorang. Jika rajin membaca dan bertanya, maka anda pasti akan tau caranya. Oleh sebab itu, dalam posting ini saya akan berbagi pengalaman saya dalam mengatasi template blog yang unresponsive dan menjadikannya reactive.

Pertanyaan pertama : Mengapa saya harus menjadikan template blog saya responsive ? jawaban : blog anda akan disukai pengunjung dan mesin pencari karena tampilannya yang cocok dengan ukuran perangkat, sehingga laman dapat dirender dengan benar di semua perangkat. Jawaban tersebut bukanlah pendapat saya, melainkan langsung dari "Google devolevers PageSpeed Insights". Untuk itulah saya menyarankan agar anda benar-benar peduli terhadap tampilan blog anda di semua sistem operasi.

Pertanyaan kedua : Bagaimana membuat blog agar responsive ? jawaban : melakukan analisis laman, memperbaiki semua kesalahan, mengatur area pandang konten agar cocok di semua perangkat, hindari plugin dan ukuran huruf mudah dibaca oleh pengunjung. jawaban tersebut juga bukan persepsi saya, melainkan saran dari "Google PageSpeed Insights". Dari jawaban di atas, saya rasa anda tidak perlu ragu lagi dan kesimpulannya adalah template yang responsive akan sangat membantu mengoptimalkan blog anda di mesin pencari.

Cara Saya Membuat Template Blogger menjadi Responsive

Mungkin judul di atas terlihat sombong, sebenarnya maksud dari kata "cara saya" hanya sekedar kalimat kiasan yang memberi pengertian bahwa saya memiliki sedikit pengalaman sewaktu mempelajari desain responsive template melalui berbagai sumber. Walaupun hanya sumber terpecaya saja yang saya jadikan pedoman, tapi tetap saja banyak membaca akan menambah wawasan kita.

Jujur saja disini saya bukan guru anda. Tapi kita sama-sama belajar dan cara ini hanyalah metode membuat template responsive ngawur. hahaha, jadi jika anda ragu dengan petunjuk yang saya berikan. Sebaiknya anda meninggalkan blog ini dalam keadaan sadar :D. Oke bagi pembaca yang ingin memiliki tampilan blog yang responsive di semua perangkat. Ikutilah panduan di bawah !

Sekedar saran :"Sebaiknya anda menggunakan template simple default blogger"

  1. Masuk ke dasbor Blogger. Klik menu "template" lalu Klik tombol "edit html"
  2. Pada halaman html template, letakkan kode berikut :
    <meta name=viewport content="width=device-width, initial-scale=1"/>
    tepat di bawah kode :
    <head>
    <b:if cond='data:blog.isMobile'>
    3. Gambar cara Membuat Template Blogger Responsive
  3. Setelah penempatan kode telah benar seperti gambar di atas, selanjutnya klik tombol "simpan template" agar perubahan berhasil
  4. Langkah berikutnya masih di halaman template. klik icon roda gigi "sesuaikan template seluler"
    5. Template Blog Responsive Gratis 2014
  5. Selanjutnya pada jendela baru yang muncul. Pilih setelan template seluler khusus dan klik tombol "Simpan" agar perubahan berhasil.
    6. Setelan Template Blog Agar Responsive

Dengan mengikuti 5 langkah tersebut. anda telah membuat template blog dan laman konten anda responsive di semua perangkat. Adapun Untuk memaksimalkan kecepatan blog anda, silahkan pelajari lebih lanjut tentang cara mempercepat loading blog

Akhir kata penulis mohon maaf jika ada kekurangan dan kesalahan dalam penulisan. Jika anda punya ide lain terkait dengan topik template responsive silahkan share disini. saya akan merespon secepatnya. Salam blogger.

8 comments for "Membuat Template Blogger Responsive"

  1. Moocen SusanDec 3, 2014, 3:00:00 AM

    kalau langsung disetting khusus di bagian tampilan selulernya belum bs responsive ya mas? harus pake kode diatas?

    ReplyDelete
    Replies
    1. guru-id.comDec 3, 2014, 3:05:00 AM

      sebenarnya banyak cara membuat template blog menjadi responsive, dan yang saya share hanya sebagian saja yang saya dapat dari google pagespeed insight. jadi jika menurut bisa disetting lewat seluler silahkan saja

      Delete
  2. Alfiandi's BlogFeb 16, 2015, 8:44:00 PM

    gan, setelah saya masukkan kode diatas kok muncul pemberitahuan "kesalahan saat mengurai XML" ya?

    ReplyDelete
    Replies
    1. guru-id.comFeb 16, 2015, 10:12:00 PM

      kesalahannya bagaimana ? coba jelaskan ke saya bagaimana peringatannya biasanya ada kode yang kurang itu

      Delete
    2. idjsnetMar 11, 2015, 2:33:00 PM

      meta name=viewport content="width=device-width, initial-scale=1"/

      kasih tanda "kutip" gan .... name="viewport" mungkin itu xixixixi....

      Delete
  3. UnknownMar 2, 2015, 2:33:00 AM

    terima kasih banyak mas, saya lagi mau coba membuat template responsive nih, buat memperluas blog.hehe

    ReplyDelete
    Replies
    1. guru-id.comMar 2, 2015, 4:29:00 AM

      wah saya sangat mendukung blogger yang semangat seperti mas, semoga template responsivenya cepat selesai dan segera di share ke saya

      Delete
  4. for this blogOct 13, 2015, 9:33:00 AM

    gmn caranya blog share coding kok nggak bs dicopas?
    makasih ya, cari blog lain aja deh

    ReplyDelete

saya minta maaf ! Komentar yang tidak relevan dengan konten tidak akan saya terbitkan. Jika Mengcopas Artikel Blog Ini, Mohon Untuk Menampilkan Link Sumber.