CARA MEMBUAT TEMPLATE BLOG SENDIRI

Apakah anda ingin mengganti template blogspot anda, apakah anda sudah bosan dengan template blogspot anda? memang jika dipikir akan sulit sekali mengganti template atau skin jika hanya dipikiran doank, sebenarnya sangat mudah cara membuat template blog sendiri.

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.

Edit HTML Blogger

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:

NavBar Blogger

    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.

Penyisipan Kode Menghilangkan NavBar

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:

    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.

Penyisipan Kolom Sidebar Baru

    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.

Demikian artikel mengenai cara membuat template blog sendiri, semoga anda berhasil mengganti tempalte blogspot anda dan semakin menarik untuk dikunjungi, terimakasih atas kunjungannya ya.

Jangan Lupa:

Share ke FacebookShare ke TwitterDownload Versi PDFKirim Lewat EmailPrint Artikel Ini