diperbaharui: 30-07-2011 21:42:33
An XML error occurred on line 16: not well-formed (invalid
token)
|
Tip
Membuat Sendiri Template Blogger (Blogspot)
|
|
Diposting oleh admin pada
04-06-2008
|
Sudah bosan dengan template Blogger
yang itu-itu saja? Ada
dua pilihan buat Anda. Cara pertama cukup praktis, cari dan download template
Blogger dari pihak ketiga, lalu salin dan pasang kode template blogger baru
pilihan Anda. Cara kedua lebih kreatif, modifikasi sendiri template Anda!
Berikut beberapa tip dasar yang bisa
Anda gunakan untuk mengedit atau membuat template Blogger Anda:
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).
- Login ke halaman pengelolaan blog, klik Layout > Edit HTML.
- Untuk membackup template awal, seleksi seluruh kode di kotak Edit Template (Ctrl+A), lalu copy (Ctrl+C).
- Buka Notepad, lalu salin kode ke dalam lembar kerja Notepad (Ctrl+V).
- 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:
- Buka template Blogger Anda di Layout > Edit HTML.
- Temukan titik penyisipan, letakkan kursor persis di atas baris body {.
- Sisipkan baris kode di bawah ini untuk menghilangkan
tampilan NavBar di halaman blog Anda:
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
} - 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
660px = 660px = 660px = 410px + 30px + 220px
Nilai width untuk modifikasi:
750px = 750px = 750px = 470px + 30px + 250px
750px = 750px = 750px = 470px + 30px + 250px
Penjelasan langkah pengeditan:
- Timpa nilai width pada bagian #header-wrapper, #outer-wrapper, dan #footer menjadi 750px.
- Timpa nilai width pada bagian #main-wrapper menjadi 470px.
- 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.
- Buka template Blogger Anda di Layout > Edit HTML.
- 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.
- 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 */
} - Pindahkan kursor di bawah kode tersebut, lalu sisipkan kode yang telah Anda salin. Kini anda memiliki 2 kode di atas.
- Bedakan nama kode, edit nama #sidebar-wrapper yang telah Anda sisipkan menjadi #sidebar-wrapper2.
- 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.
- Selanjutnya temukan, seleksi, dan salin bagian ini:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
...
...
</b:section>
</div> - Pindahkan kursor di bawah kode tersebut, lalu kembali sisipkan kode yang telah Anda salin. Kini anda memiliki 2 kode di atas.
- Edit nama <div id='sidebar-wrapper'> yang telah Anda sisipkan menjadi <div id='sidebar-wrapper2'>.
- 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.
No comments