Cara Mengubah Lebar Template Blog

Blogger menyediakan tools untuk mengubah lebar dan ukuran template blog yaitu Template Designer. Dengan Tools ini, tidak dibutuhkan pengetahuan mengenai html dan css yang dalam. Dan untungnya lagi, lebar main wrapper dan sidebar wrappernya secara otomatis ikut berubah menyesuaikan lebar templatenya.

Namun bila anda menggunakan custom template, mengubah lebar tidak bisa menggunakan tools tersebut. Dibutuhkan modifikasi sedikit kode CSS pada template tersebut untuk mengubahnya. Bahkan bila sudah dirubahpun anda harus mengubah juga semua ukuran main dan sidebar serta footernya.

Yang menjadi perhatian adalah tidak semua template yang ada di internet itu memiliki kode css yang sama. Mungkin template yang satu hanya menggunakan  kode #wrapper untuk main wrappernya, sedangkan template yang lain bisa saja menggunakan kode #main-wrapper. Jadi kita harus mengeceknya dahulu sebelum mengganti ukurannya.

Memang terlihat rumit dan membingungkan, tapi jangan khawatir karena blog arifuw ini akan memberikan tutorial bagaimana caranya mengubah semua ukuran template tersebut dari header, content, hingga footer. Simak panduannya dibawah ini.

Inspect Element

Pertama, kita cari dahulu kode wrapper blognya menggunakan inspect element firefox. Bisa juga menggunakan chrome, tapi menurut saya firefox lebih mudah.

  • Buka Blog anda
  • Klik kanan pada background blog kemudian klik Inspect Element
  • Cari node kode mana yang merupakan wrapper utama blog anda. Biasanya yang bila disorot akan terblok semua bagian kecuali backgroundnya. Lihat gambar dibawah.Cara Mengubah Lebar Template Blog
  • Selanjutnya lihat kesamping kanan inspect element. Disitu ada kode css yang berkaitan dengan wrapper utama blog demo diatas. Ubahlah lebar width yang ada di css tersebut, bila lebar blog ikut berubah maka itu adalah benar kode yang harus diganti.Cara Mengubah Lebar Template Blog
  • Dari gambar gif tersebut diketahui bahwa kode untuk mengubah lebar template adalah #wrapper-speedup
  • Sekarang tinggal mengedit templatenya menggunakan temlpate editor blogger

Mengubah Width Template

Silahkan backup dulu template anda agar bila terjadi kerusakan bisa langdung dipulihkan.

  • Buka dashboard blogger, pilih menu template dan klik Edit Template.
  • Cari kode #wrapper-speedup menggunakan ctrl+f biar lebih cepat
  • Bila sudah ketemu, ubahlah lebar pixel width sesuai dengan keinginan anda.Cara Mengubah Lebar Template Blog
  • Terakhir klik Simpan Template untuk menyimpan perubahan.

Mengubah lebar Main-Wrapper dan Sidebar-Wrapper

Bila lebar wrapper utama sudah diubah bukan berarti main wrap dan sidebar ikut berubah juga lebarnya. Anda harus mengubah lebarnya secara manual. Caranya sama seperti diatas, inspect element terlebih dahulu, bila sudah ketemu kodenya baru edit templatenya.

Cara menghitungnya seperti ini. Misalkan lebar wrapper adalah 840px dan lebar main wrapper dan sidebar adalah 540px dan 300px. Bila lebar wrapper diubah menjadi 1050px maka main dan sidebar adalah 750px dan 300px atau 700px dan 350px atau 680px dan 370px. Intinya jumlah antara sidebar dan main wrapper adalah lebar wrapper utama.

Sekian postingan kali ini, silahkan share bila dirasa bermanfaat dan tanyakan bila ada yang kurang dimengerti. Semoga berhasil dan terima kasih.

1 Comments

“Barang siapa yang beriman kepada Allah dan Hari Akhir maka hendaklah ia berkata baik atau hendaklah ia diam.” (Muttafaq ‘alaih: Al-Bukhari, no. 6018; Muslim, no.47)

  1. tERIMAKASIH banyak master,..... aku sudah bisa merubah lebar template dll,...dari tutorial ini...sangat bermanfaat. Ilmu yang bermanfaat adalah amal jariyah,.... Pahalanya kan mengalir terus......amin

    ReplyDelete

Post a Comment

“Barang siapa yang beriman kepada Allah dan Hari Akhir maka hendaklah ia berkata baik atau hendaklah ia diam.” (Muttafaq ‘alaih: Al-Bukhari, no. 6018; Muslim, no.47)

Previous Post Next Post