5 Jul 2014

Template Blogger Responsif untuk Blog Personal

Seiring berkembangnya internet, banyak sekali penemuan-penemuan baru di bidang website. Hal ini dipicu oleh banyaknya ponsel yang beredar di masyarakat.

Jika dulu orang banyak mengakses sebuah situs hanya melalui komputer, kini orang lebih banyak mengakses situs melalui ponselnya. Hal inilah yang mendorong banyak developer website untuk menjembatani pengguna ponsel agar mendapatkan tampilan situs yang prima ketika dikunjungi melalui ponsel.

Sejak tahun 2011 lalu banyak sekali situs yang mulai berevolusi dari tampilan biasa ke tampilan multiukuran, atau yang biasa dikenal dengan tampilan responsif. Hingga tahun 2014 ini tren tersebut seakan tidak meredam, malah menjadi-jadi. Jika dulu hanya beberapa situs-situs pribadi, kini banyak situs besar maupun pemerintahan yang didukung dengan tampilan responsif.

Hal inilah yang menggugah saya untuk membuat template responsif Blogger gratis. Meskipun tampilan blog ini (Iskael) masih belum responsif, apa salahnya saya membuat template responsif sederhana untuk dibagi-bagi ke khalayak umum. Karena tidaklah mudah mengubah tampilan blog yang sudah jadi menjadi tampilan responsif, banyak faktor yang membuat saya malas melakukan perombakan, hehe.

Baiklah, langsung saja pada intinya. Inilah template Blogger responsif gratis buatan saya. Tampilan yang sederhana ini sangat cocok untuk dipakai pada blog personal. Konsep responsif yang saya gunakan pada template ini agak berbeda dengan template responsif yang beredar di pasaran. Saya lebih cenderung mengubah posisi sidebar dengan menyembunyikannya saat pada resolusi di bawah 900px. Tak sabar, 'kan? Berikut ini tampilannya.

Template Blogger Responsif Keren

Template Blogger responsif itu saya beri nama dengan Takye. Kata "Takye" ini saya ambil dari bahasa Madura, yang berarti "Benar, kan?". Mengapa saya ambil dari bahasa Madura? Jujur, untuk melestarikan bahasa suku di mana mengalir darah di dalam diri saya ini.

Sudah menjadi ciri saya dalam membuat template, lebih suka meletakkan sidebar di sisi sebelah kanan. Hal ini dipicu oleh pandangan saya mengenai kebiasaan membaca. Umumnya, orang membaca artikel lebih nyaman apabila artikelnya berada di sebelah kiri.

Takye Responsive

Konsep sidebar yang saya buat pada ukuran di bawah 900px adalah dengan menyembunyikan sidebar. Untuk memunculkan sidebar, kamu bisa mengeklik ikon menu yang ada di sebelah kanan atas.

Takye di resolusi 500px

Setelah diklik, maka akan memunculkan sidebar yang sebelumnya tersembunyi. Di bawah ini adalah tampilannya.

Takye, setelah ikon menu diklik

Sudah mencari sebuah ciri tampilan responsif adalah tampilan yang didominasi dengan warna putih dan dikuatkan oleh penggunaan ikon. Selain itu, tampilan responsif terkesan lebih mementingkan/ menyuguhkan konten lebih dominan dibanding dengan isi pada sidebar.

Uji Responsive Template Takye

Jika kamu masih belum tahu apa itu responsif, kamu bisa menguji keresponsifan template Takye ini menggunakan salah satu dari beberapa Responsive Tools milik Mozilla Firefox yang pernah saya bahas di Iskael atau kamu bisa mencobanya dengan Responsive Tools milik Intikali.org.

Responsive Tools milik Intikali.org

Oh ya, URL demo untuk Takye Responsive, kamu bisa kunjungi tautan ini.

Download Template Responsive

Suka dengan template ini? Kamu bisa mengunduhnya di tautan ini.

15 komentar:

  1. responsif maksudnya bisa di buka di platformapa aja sesuai kalao kita lihat di pc yak???

    punya ku tak tes responsifnya, tapi nggak tau maksudnya :p

    tapi tetep, donload dulu.
    mumpung gratis.

    Dan saya doakan, semoga di bulan puasa ini amalan mu diterima disisiNYa.
    aamiin.

    BalasHapus
    Balasan
    1. kalo dibuka pake semua platform pasti bisa :)
      responsif itu tampilannya menyesuaikan dengan platform-nya
      jadi beda-beda tampilannya

      Amin :)

      Hapus
  2. Keren.. Aku pengen banget bisa membuat template blog sendiri, tapi masih payah dalam hal-hal proggraming web.. Jadi yahh cuma copas2 aja tema blognya.. hehe... Thanks dah sharing.. Salam mystupidtheory!

    BalasHapus
    Balasan
    1. Bersabar dalam belajar, entar juga mahir kug lama2 :)

      Hapus
    2. sir, demo theme ? :3 .. :3 .. ty ..

      Hapus
    3. eh uda ada :3 nda liat sory :3

      Hapus
  3. ohh ikon menu baru muncul kalau resolusi layar kurang (misalnya 500 px)

    pantesan ga nemu menu di layar

    BalasHapus
  4. halo mas iskael ,salam kenal dulu ya..saya kebetulan lagi nyari blog responsive personal , dan ketemu disini, sudah saya coba pasang di blog saya, hanya saja gimana kalo dipasang menu tab di bawah header bisa ngga ya??

    BalasHapus
    Balasan
    1. tinggal ditambahi kode HTML menu tab-nya saja
      tambahkan setelah kode Header-nya selesai

      Hapus
  5. template bagus dan sangat responsive, ijin sedot gan!

    BalasHapus
  6. Salam kenal mas, templatenya bagus.
    Ada rencana pakai template ini. Kalau sidebarnya tidak dibuat show/hide di icon menu tapi dibawah seluruh postingan (jika dilayar kecil), bagiamana mas? bagian mana yang perlu diubah? mohon petunjuknya, terima kasih

    BalasHapus
    Balasan
    1. tinggal ubah di bagian CSS nya
      cari bagian ini

      @media screen and (max-width: 900px)
      .sidebar { ... }

      lalu ubah isi CSS-nya

      Hapus

Populer Terbaru Komentar

Entri Terbaru

Komentar Terbaru

Creative Commons License
All contents by Iskael is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Based on a work at Iskael.
Permissions beyond the scope of this license may be available at Iskael.
© 2013 Belajar Ngeblog bersama Iskael. All Right Reserved. Powered by Blogger. Iskael Template by Iskael. Submitted on TopBlogIndonesia