Tip Membuat Sendiri Template Blogger (Blogspot)

Backup Template dan Komponen

Hal pertama yang harus Anda lakukan sebelum mengganti template Blogger adalah membackup template lama dan elemen-elemen halaman yang telah Anda miliki. Komponen selain posting, arsip, dan komentar cukup rawan dengan resiko hilang saat template baru diterapkan (Blogger akan memberi peringatan berupa daftar widget yang akan terhapus jika template baru Anda terapkan).

1. Login ke halaman pengelolaan blog, klik Layout > Edit HTML.
2. Untuk membackup template awal, seleksi seluruh kode di kotak Edit Template (Ctrl+A), lalu copy (Ctrl+C).
3. Buka Notepad, lalu salin kode ke dalam lembar kerja Notepad (Ctrl+V).
4. Simpan backup template awal Anda.

Sebagai catatan, jika Anda telah menambahkan elemen / widget pada halaman blog Anda, maka sebelum melakukan langkah ke-2, aktifkan dulu kotak pilihan Expand Template Widget (di bagian atas kotak Edit Template). Baru setelah itu salin seluruh kode dan Anda simpan sesuai langkah berikutnya.

Kini Anda sudah siap mengutak-atik template Blogger Anda. Jika hasilnya kurang memuaskan, Anda tetap dapat memulihkan template awal dengan cara menyalin kode backup dari Notepad ke kotak Edit Template.

Menghilangkan NavBar

Merasa tidak nyaman dengan tampilan NavBar di bagian atas halaman blog Anda? Singkirkan NavBar dan perluas tampilan halaman blog Anda dengan cara berikut:

1. Buka template Blogger Anda di Layout > Edit HTML.
2. Temukan titik penyisipan, letakkan kursor persis di atas baris body {.
3. Sisipkan baris kode di bawah ini untuk menghilangkan tampilan NavBar di halaman blog Anda:
   
   #navbar-iframe {
      height:0px;
      visibility:hidden;
      display:none
   }
4. Simpan perubahan template, preview blog dan nikmati hasilnya.

Memodifikasi Lebar Halaman

Hal pertama yang perlu Anda pahami dalam memodifikasi halaman blog Anda adalah mengenai penetapan lebar komponen halaman (header, halaman posting, sidebar, dan footer).

Berikut adalah rumusan yang bisa Anda jadikan pedoman dalam mengutak-atik lebar halaman blog Anda :

#header-wrapper = #outer-wrapper = #footer = #main-wrapper + 30 + #sidebar-wrapper

Temukan dan ubah nilai width: di bagian tersebut sesuai kebutuhan :

• #header-wrapper, #outer-wrapper, dan #footer menjadi patokan lebar seluruh halaman blog.
• #main-wrapper adalah ukuran kolom posting Anda.
• #sidebar-wrapper adalah ukuran kolom sidebar Anda.
• Nilai 30 digunakan untuk memberi jarak antara antara kolom posting dan kolom sidebar.

Dengan berpatokan pada rumusan di atas, maka Anda dapat mengubah ukuran halaman Anda dengan mengedit HTML dengan nilai seperti berikut :

Nilai width awal:
660px = 660px = 660px = 410px + 30px + 220px

Nilai width untuk modifikasi:
750px = 750px = 750px = 470px + 30px + 250px

Penjelasan langkah pengeditan:

1. Timpa nilai width pada bagian #header-wrapper, #outer-wrapper, dan #footer menjadi 750px.
2. Timpa nilai width pada bagian #main-wrapper menjadi 470px.
3. Timpa nilai width pada bagian #sidebar-wrapper menjadi 250px.

Nilai width #main-wrapper = 470px cocok untuk beriklan (ukuran ini bisa mengakomodasi banner 468x60 px). Silakan ubah ukuran sesuai selera dengan berpatokan pada rumusan di atas.

Memodifikasi Jumlah Kolom

Pilihan template yang disediakan Blogger umumnya tersusun atas dua kolom (kolom posting dan kolom sidebar). Anda dapat membuat kolom tambahan dengan menyalin kode sidebar dan mengatur ulang ukurannya.

Sebagai contoh, berikut cara membuat halaman blog dengan tiga kolom.

1. Buka template Blogger Anda di Layout > Edit HTML.
2. Kita gandakan kode kolom sidebar yang sudah ada. Umumnya kode sidebar dinamai sidebar-wrapper, namun ada juga template yang menggunakan nama sidebar-wrap atau sejenisnya.
3. Temukan, seleksi, dan salin bagian ini:
   
   #sidebar-wrapper {
     width: 220px;
     float: $endSide;
     word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
     overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
   }
4. Pindahkan kursor di bawah kode tersebut, lalu sisipkan kode yang telah Anda salin. Kini anda memiliki 2 kode di atas.
5. Bedakan nama kode, edit nama #sidebar-wrapper yang telah Anda sisipkan menjadi #sidebar-wrapper2.
6. Ubah nilai width di #sidebar-wrapper dan #sidebar-wrapper2, dengan cara membagi 2 nilai yang ada. Misalnya nilai awal 220px Anda bagi menjadi masing-masing 110px.
7. Selanjutnya temukan, seleksi, dan salin bagian ini:
   
   <div id='sidebar-wrapper'>
   <b:section class='sidebar' id='sidebar' preferred='yes'>
   ...
   ...
   </b:section>
   </div>
8. Pindahkan kursor di bawah kode tersebut, lalu kembali sisipkan kode yang telah Anda salin. Kini anda memiliki 2 kode di atas.
9. Edit nama <div id='sidebar-wrapper'> yang telah Anda sisipkan menjadi <div id='sidebar-wrapper2'>.
10. Simpan Template. Preview blog Anda untuk memastikan tampilan 3 kolom telah berhasil Anda buat.

Catatan, jika lebar sidebar pertama dan kedua menjadi sempit, maka gunakan rumusan Memodifikasi Lebar Halaman.

Selamat mencoba !