Wednesday, May 11, 2011

Tip Membuat Sendiri Template Blogger (Blogspot)

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).
  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.
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
  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.
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:
  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.
Penyisipan Kolom Sidebar Baru
  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.


No comments:

Post a Comment

Category

17 + (27) Ada - ada aja (8) Ada ada aja (1) Adidas (1) Adsense (7) Affiliate (1) Aktris (1) Alam kita (3) Alexa (2) Alexandra (1) Alias (1) Amazon (2) Anak (12) Anastasya (1) Andika (1) Android (2) Anggota (1) Angle Tattoos (1) Antivirus (8) Antivirus Terbaru (8) Apple (2) Apps untuk pelajar/mahasiswa (1) Ariel Peterpan (1) Arifinto (2) Artikel Menarik (21) Artis (1) Artis Indonesia (3) Artis manca (1) Astronomi (1) Auliani (1) Avatar berbicara (1) Bajak Laut (1) Bandung (1) BB++ (3) Belanja (1) berita (1) Berita Aneh (6) Berita Artis (6) Berita Astronomi (2) Berita Dalam negri (2) Berita Dunia (4) Berita Hewan (15) Berita Internasional (2) Berita Kesehatan (7) Berita Makanan Minuman (14) Berita Olahraga (8) Berita Panas (1) Berita Pendidikan (1) Berita Pengetahuan (2) Berita Renungan (5) Berita Sejarah (6) Berita Selebriti (1) Berita Teknologi (2) Berita Tentang Musik (2) Berita Tumbuhan (1) Berita unik (4) Berita Utama (2) Bieber (1) Bintang (1) Biografi (1) Bisnis (2) BlackBerry (7) Blog (49) Blogger (23) Brondong (1) Browser (1) Buah Unik (3) Budaya Aneh (1) Bugil (1) Cantik (1) Cara Bisnis Online (2) Cara daftar Facebook (1) Cara Recovery Data (2) Cara Self Test Printer (5) Cara Service Komputer (25) Cara Service Laptop (8) Cara Service Monitor (34) Cara Service Ponsel (3) Cara Service Printer (63) Cara Service TV (5) Cara Service UPS (1) Cari $ (16) Celebrity (3) Chrome (2) Clicksor (3) Contoh (1) Coppas Animal (1) Coppas Berita (5) Coppas Extreme (3) Coppas Foto Hot (3) Coppas Lucu (1) Coppas Mistery (1) Coppas Sejarah (1) Coppas Style (2) Coppas Unik (1) Cukur (1) Cute (5) Definisi dan Sejarah Tattoo (3) Dicukur (1) Dipanggil (1) disappear (1) Domain-Hosting (2) Download (4) Download MP3 Gratis (1) Download Software (21) Downloader (1) Dugaan (1) Dugem (1) Dunia (1) Dunia Alam (6) Dunia aneh (5) Dunia Arkeologi (1) Dunia Arkeologi dan Sejarah (1) Dunia Design (3) Dunia Ekonomi (3) Dunia Extream (3) Dunia informasi (6) Dunia Kriminal (2) Dunia Kuliner (3) Dunia Medis (4) Dunia Militer (2) Dunia Misteri (1) Dunia Pendidikan (1) Dunia Rohani (1) Dunia Sejarah (1) Dunia Sosial (7) Dunia Teknologi (6) Dunia Tips Dan Trick (1) Dunia Wanita (2) e-learning (1) Elizabeth (1) email (3) Excel (11) Facebook (8) Fakta Aneh (16) Fakta Dunia (8) Fakta Indonesia (13) Fakta Unik (68) Feed (1) Fenomena unik (1) Firefox (4) Flash (2) Football (1) Foto (2) Foto Hot (7) Freeware (24) Friendster (1) Funny (1) Funny Pics (15) Gadget (1) Gadget dan Hanphone (2) Gambar Aneh (1) Gambar Extream (4) Gambar Lucu (1) Gambar Unik (4) Game (1) Games (6) Gathan (1) Genit (4) Githa (1) Gmail (1) Google (28) Gosip (2) Gossip Celeb (4) Gratis (1) Gumilang (1) Handphone (3) hardisk (1) Health (3) Hilabi (1) Hollywood (1) Honda (1) Hot (2) Hot Girls (1) Hot News (25) Hot Pics (11) HP (1) HTC (5) html (3) Indonesia (2) info (11) Info Harga (1) Info Menarik (24) Internasional (1) Internet (19) IP Address (1) iPone (1) Istilah Komputer (1) Jadwal Piala Dunia 2010 (2) Jadwal Puasa (1) Jadwal Sholat (1) Japan (1) Jelita (1) Jennifer (1) Jepang (1) Joanne (1) Justin (1) Karena (1) Karier dan Gaya Hidup (1) kartu Natal (1) Katanya ... (5) Kate Middleton (2) Keajaiban Alam (3) Kebesaran Allah (1) Kecantikan (1) Kecantikan Dan Kesehatan (3) Kejadian Aneh (3) Kekayaan (1) Keramas (1) Keren (7) Kesehatan (5) Kisah Mistis (1) Koleksi (1) Komputer (12) Komputer dan Internet (5) Kontes Aneh (3) Kreatifitas (6) Kuliner (1) Kurniawan (1) Lady Gaga (1) Lain-Lain (2) Legenda (1) Lenovo (1) LG (2) Lifestyle (3) link (4) Link Friends (1) Lintas Indonesia (3) Lirik Lagu (1) Lorenza (1) Makan (1) Malinda (3) Maling (1) Maling ATM (2) Marcia (1) Meninggal (1) meta tag (2) Miliar (1) Military (1) Misteri (10) Misteri - Misteri Di Dunia (3) Miyabi (1) Mobil (30) Model (13) Modem ADSL (1) Monetize (16) Motivasi Dan Inspirasi (1) Motorola (1) mp3 (1) Musik (2) Nadine (1) Nafeeza (1) Nakal (4) Narkoba (1) Netbook (2) News (54) Nokia (1) Nonton (1) office 2010 (1) Oktaviany (1) Olahraga (1) Online (1) online ticket (1) Operasi (1) Otomotif (2) Paid Survey (2) paidreview (2) Panas (1) Panduan Service Monitor I (10) Panduan Service Monitor II (13) Parse (1) Payment (1) Paypal (1) PDF (4) Pengetahuan (4) Pengetahuan Umum (4) Pengingat Sholat (1) Pengolah Gambar (1) Photo (1) Piala Dunia 2010 (2) Ping (1) Plastik (1) Plug-in Wordpress (13) Polisi (1) Ponsel (10) Porno (1) Portable (2) POS UNAS SD-SMP-SMA 2010 (1) Powerpoint (2) Prediksi 2010 (1) Presenter (1) Pria (1) Printer (1) Produk (1) Produk Unik (10) Profil Artis (7) Profil Tokoh (5) Profile (1) Psikotes (1) Putri (1) Rahmat (1) Read more (1) Rehab (1) Rekor Dunia (30) related post. tips (3) Resetter Canon (26) Resetter Epson (18) Resetter HP (5) RSS (2) Sains Dan Antariksa (4) Salley (1) Samsung (9) Science (1) Sebagai (1) Sebelum (1) Sedang (1) Sejarah (3) Sejarah Dunia (1) Sekedar Share (11) sekilas info (2) Seksi (1) Seksiologi (2) Selebritis (1) Selesai (1) Seni Dan Budaya (1) Senjata (1) SEO (14) Sepeda (1) Sesudah (1) Setelah (1) Sexsualitas (1) Sexy (10) Shaleh (1) Sheila (1) Sistem Tools (1) sms lebaran (2) Software (22) Software HP (5) Softwere (8) Speedy (1) Sport (1) Statistik (1) Suami (2) Sulityo (1) Suster (1) Syahrini (1) Tahukah anda? (60) Tatto Bahu (1) Tattoo Badan (4) Tattoo China (1) Tattoo Dolphin (1) Tattoo Hewan (2) Tattoo Ikan Koi (1) Tattoo Jepang (1) Tattoo Kanji (1) Tattoo Lebah (1) Tattoo Lengan (2) Tattoo Malaikat (1) Tattoo Serangga (1) Tattoo Tengkorak (1) Tattoo Tribal (2) Tattoo Wanita (2) Taylor (1) Teknologi (2) Telanjang (1) Telkom Promo (1) Template (3) Tempo Dulu (1) Tercantik (1) Terima (1) Tip Trik Internet (8) Tip Trik Windows (7) tips (166) Tips and Trik (10) Tips Blog (1) Tips Cinta (1) Tips Dan Info (6) Tips Dan trick (5) Tips Dan Trik (3) Tips Diet (1) Tips Kecantikan (1) Tips Kesehatan (9) Tips Suami Istri (5) Tools (8) Topless (1) Tragedi (1) Translator (4) Tribal Tattoos (3) Tsunami (1) Tukang (1) Tumbuhan (1) Twiter (3) Uncategorized (2) Unik (4) Unik Dan Aneh (7) Update Antivirus (8) Upskrit (1) Usaha (1) Utility (1) Video (1) Video Extream (1) Video mesum (4) virus (3) Wakaka (2) Wanita (1) Warta Terkini (9) Warteg (1) Widget (2) windows (26) windows 7 (3) WP (1) Ziddu (7) ZTE (1)