Cara menampilkan sidebar di tema contempo pada layar 1366 x 768 - Mengelola Blog

Cara menampilkan sidebar di tema contempo pada layar 1366 x 768

Kehadiran tema blogger terbaru yang belum lama dirilis ini mengundang minat kebanyakan blogger. Saya pun termasuk salah satu yang penasaran ingin mencoba penampilan dan performanya.

Sebuah tema yang menarik dan menjadi pilihan pertama buat saya adalah tema Contempo. Desain minimalis dengan background yang elegan menjadi salah satu alasan saya ingin mencoba tema tersebut.

Dan untuk menghindari error pada blog ini (mengelolablog), maka percobaan ini saya terapkan pada blog yang baru saja, alamatnya disini.

Setelah mencoba tema contempo tersebut, ternyata muncul kendala yang tidak saya harapkan. Kendala yang saya hadapi saat mencoba tema contempo tersebut adalah sidebar tidak muncul pada layar ber-resolusi 1366 x 768.

Setelah saya coba men-zoom mundur melalui browser dengan menggunakan "ctrl+ [-]" (menjadi 90%), ternyata sidebar bisa muncul.

Dari situ muncullah pertanyaan di dalam benak saya "kok ngga nyaman juga yah setiap mau lihat tampilan blog secara penuh moso' harus di zoom minus dahulu ?"

Cara menampilkan sidebar di tema contempo pada layar 1366 x 768

Masalah ini ternyata juga muncul pada beberapa tema blogger yang baru lainnya yaitu, Soho dan Notable. Sedangkan untuk tema Emporio pada layar 1366 x 768 ternyata tidak memiliki masalah.

Menurut yang saya ketahui, kondisi yang menyebabkan sidebar tersembunyi umumnya terjadi pada mode "Mobile", sedangkan saat  saya melihat tema contempo dilayar 1366 x 768 (layar laptop), ternyata kondisinya bukan dalam mode "Desktop", tapi tetap dalam mode "Mobile".

Selidik punya selidik, akhirnya saya menemukan bahwa tema contempo dan 2 tema lainnya yaitu Soho dan Notable, "sepertinya" secara default untuk mode Desktop sudah diset pada lebar 1440 X 900 oleh blogger.com. Secara gampangnya bisa disimpulkan seperti ini

Ukuran 1440 x 900 adalah ukuran standard desktop untuk tema Contempo, kurang daripada itu (pada kasus disini 1366 x 768) akan diset sebagai perangkat mobile

Nah untuk mengatasi sidebar sembunyi di lebar layar 1366 x 768, maka pada artikel berikut ini kita akan mensetting tema contempo supaya sidebarnya bisa muncul penuh di resolusi layar 1366 x 768, simak informasinya dibawah berikut


Cara menampilkan sidebar tema contempo di layar 1366 x 768

Untuk memulainya, pastikan Anda sudah memback up template blog Anda terlebih dahulu untuk menghindari error yang tidak di inginkan.

Langkah awal yang perlu Anda lakukan untuk mengedit tema adalah seperti biasanya yaitu, login ke Blogger.com >> pilih blog yang akan diedit >> pilih tema >> edit html.

Setelah Anda masuk di menu edit html silahkan ikuti langkah-langkah dibawah berikut.
  1. Buka aplikasi wordpad pada OS windows yang Anda gunakan
  2. Kembali ke editor html, lalu cut semua kode yang ada dalam kotak editor, gunakan ctrl+A (select All)  lalu ctrl+X (Cut)
  3. Pastekan kode kedalam wordpad (ctrl+V)
  4. Setelah kode tercopy di wordpad, klik ctrl+H untuk mengaktifkan fungsi Replace
  5. Setelah pop up Replace muncul, isikan 1440 pada kolom Find what: (no 1 pada gambar)
  6. Isikan nilai 1024 pada kolom Replace with: (no 2 pada gambar)
  7. Klik pada tombol Replace All (langkah ini berfungsi untuk mengganti default layar Desktop dari 1440px menjadi 1024px), perhatikan gambar berikut
    Mengganti lebar 1440 menjadi 1024
  8. Klik OK setelah pop up bertuliskan "wordpad has finished searching the document" 
    klik ok setelah replace all
  9. Masih pada kotak Replace, isikan kembali pada Find What: dengan angka 1439 (no 5 dalam gambar) lalu pada kotak Replace with: isi dengan angka 1023 (no 6 dalam gambar).Setelah di isi, lanjutkan dengan mengklik Replace All >> OK . Langkah ini berfungsi untuk mengganti lebar maksimal tampilan mode mobile dari 1439px menjadi 1023px.
    replace 1439 menjadi 1023
  10. Pada tahap ini, standard desktop untuk tema contempo sudah bukan di angka 1440px lagi, melainkan sudah diset diangka layar 1024px, ini berarti sidebar akan muncul jika lebar layar diatas 1024px. Langkah selanjutnya adalah,
  11. Copy seluruh kode yang ada di Wordpad
  12. Masuk kembali kedalam editor html blogger.com, lalu pastekan seluruh kode yang sudah Anda copy di wordpad sebelumnya.
  13. Klik save theme untuk menyimpan perubahan lalu lihat hasilnya.
Catatan :
Cara diatas adalah cara termudah untuk mengganti nilai lebar 1440px menjadi 1024px sebagai default mode Desktop tema contempo. Nilai 1024 adalah batas mode desktop minimum dan nilai 1023 adalah batas mode mobile maksimum.

Sampai disini seharusnya sidebar pada tema contempo sudah bisa muncul pada lebar layar 1366 x 768 dan sembunyi jika browser di minimize dibawah nilai 1024px. Berikut adalah tampilan tema contempo pada layar 1366 x 768 sebelum diedit dan sesudah diedit

tampilan tema contempo di layar 1366x768 sebelum diedit
Tampilan sebelum diedit pada layar 1366x768

tampilan tema contempo layar 1366x768 sesudah diedit
Tampilan sesudah diedit pada layar 1366x768


Kesimpulan

Ukuran lebar Desktop yang di set di tema contempo adalah 1440px, sedangkan lebar layar laptop yang saya gunakan maksimal 1366 x 768. Hal ini menyebabkan sidebar di tema contempo menjadi tersembunyi akibat layar laptop ini dianggap sebagai perangkat mobile.

Oleh karena itu, percobaan diatas saya lakukan dengan tujuan agar sidebar bisa muncul secara normal pada lebar layar 1366 x 768 (sesuai dengan lebar layar laptop yang saya gunakan), yaitu dengan cara mengubah setting normal desktop tema contempo dari 1440px menjadi 1024px.

Demikianlah artikel tentang cara menampilkan sidebar di tema contempo pada layar 1366x768 ini bisa saya sampaikan, semoga bermanfaat.
Daftar isi [ Lihat ]
SHARE
18 komentar
  1. Wah mesti bikin blog baru lagi nih untuk mencoba template barunya dari blogspot, tapi Mungkin ada perbaruan juga pada Tataletak soalnya pada saat update kemarin ada beberapa widget dengan JavaScript yang tak berfungsi entah kenapa Saya juga belum tahu apa itu selamanya atau hanya sementara..Terimakasi Mas..

    BalasHapus
    Balasan
    1. Iya kalo saya bagusnya gitu mas, dicoba dulu di tempat lain, kalo sudah ok dan dirasa cocok bisa diaplikasikan di blog yang sekarang. Kalau pembaruan rasanya pasti terjadi mas.

      Hapus
  2. mas cara nambahin widget sosmed gmna ?

    BalasHapus
    Balasan
    1. Maaf gan, pertanyaannya kurang spesifik, soalnya kalau nambahin widget sosmed di template contempo rasanya udah ada di tiap postingan, letaknya disudut kanan atas, tinggal klik akan muncul tuh share ke FB, Pinters, G+, dll.

      Kalau mau nambahin sendiri ya berarti lewat add a gadget >> html/javascript gan.

      Hapus
  3. saya coba ko nggak jadi yah bos? hemmm...pusing saya ngotak atik tema cvontempo ini. kode di html nya beda

    BalasHapus
    Balasan
    1. Coba langkah-langkahnya diperhatiin sekali lagi bos, mungkin saja ada langkah yang terlewat. Soalnya saya sudah coba beberapa kali pakai tema contempo yang awal bisa aja sih.

      Hapus
  4. Mas saya coba pake notepad koq nggak bisa ya? Apa harus pake wordpad? soalnya di pc saya wordpad nggak ada

    BalasHapus
    Balasan
    1. Cara ini lebih mementingkan fungsi replace all. kalau pake notepad saya ngga tau versi untuk replace all nya mas.

      Jika mas M.Faizin tau replace allnya pakai notepad sepertinya ngga ada masalah sih.

      Hapus
  5. Saya juga ga bisa. kenapa ya ???

    BalasHapus
    Balasan
    1. Kalau mau, langsung aja mas saat edit template dilaman bloggernya. Fungsi replace all pakainya kombinasi tombol ctrl+shift+R di keyboard.

      Hapus
  6. akhirnya .. jumpa juga artikel yang saya cari.. terima kasih mas ulasannya

    BalasHapus
    Balasan
    1. sama sama mas terima kasih kunjungannya :)

      Hapus
  7. saya coba kok ga berhasil ya.sidebar masih tersembunyi.saya copy paste nya di word?

    BalasHapus
    Balasan
    1. SAya pakai aplikasinya wordpad mas, bukan Ms word karena waktu buat artikel ini saya ngga pakai MS word khususnya untuk menjalankan fungsi Replace-all nya.

      Jadi kode template saya copy semua ke wordpad, lalu jalankan fungsi replace-all. Setelah selesai masukkan lagi ke html blogger, kemudian preview, jadi, lalu simpan.

      Hapus
  8. Makasih infonya, trik cerdas namun sederhana. Saya pusing tujuh keliling memodifikasi contempo menjadi contempo hybrid dan berurusan dengan kode css pada blog editblogtema saya. Modifikasi saya menghasilkan tema contempo dengan sidebar layaknya tema klasik. Dan saya memiliki 4 varian: Contempo Hybrid basic, ultimat, gradient dan infinity

    BalasHapus
  9. Karena saya lebih sering menggunakan tablet buat edit HTML cara ini layak dicoba, makasih gan

    BalasHapus
    Balasan
    1. Sama sama gan, terima kasih kunjungannya

      Hapus