mau dapat artikel terbaru blog ini? silahkan ikuti update blog ini

membagi dua header pada template blogspot versi terbaru

"pada template blogger baru tidak ada kode <div id='header-wrapper'> .solusinya gimana mas? mohon pencerahan. trims." adalah pertanyaan dari Rekan blogger atas nama Rey di posting mengenai cara membagi dua header blogspot. Karena sebelumnya memang belum pernah menggunakan template versi terbaru dari blogger akhirnya saya mencoba untuk mencari tahu beda dari template blogger versi terbaru dengan versi yang digunakan pada template ini.

Setelah membuat sebuah blog percobaan akhirnya dipilih template buatan Jason Morrow bernama Ethereal, ternyata memang banyak perubahan baik dari penggunaan CSS maupun HTML. Sedikit bingung dengan pertanyaan Rey akhirnya saya penasaran untuk mencoba membagi dua header template Ethereal seperti pada template versi lama, dan Alhamdulillah berhasil (lihat gambar).

Untuk melihat hasil dari Hacking header template blogger versi terbaru silahkan lihat pada blog uji template.
Jika tertarik untuk mencobanya, berikut ini adalah langkah-langkah bagaimana membagi header blogspot menjadi dua bagian.
  1. Masuk ke akun Blogger anda. Pilih blog yang akan anda edit.
  2. Tuju Rancangan » Edit HTML, Download template lama (persiapan jika proses modifikasi tidak berhasil)
  3. Kemudian cari kode CSS seperti dibawah ini:
    .header-inner {
      padding: 27px 0 3px;
    }

    .header-inner .section {
      margin: 0 35px;
    }

  4. Ganti semua kode CSS diatas dengan kode berikut:
    .header-inner {
      padding: 20px 0 3px;
    }
    .header-inner .section {
      width:440px;
      padding:0 1px;
      margin: 0 0 0 33px;
    }
    .header-kanan {
      width:470px;
      float:$endSide;
      padding:0 1px;
      margin: 0 33px 0 0;
    }

    Keterangan: Ganti kode berwarna merah sesuai dengan kondisi lebar template blog anda, pada template ini lebar max= 980px, caranya dengan menggunakan rumus:
    Lebar template keseluruhan (Width) = Lebar header-inner + padding kiri dan kanan header-inner + margin kiri dan kanan header-inner + header-kanan + padding kiri dan kanan header-kanan + margin kiri dan kanan header-kanan.
    Seperti pada contoh CSS diatas maka perhitungannya menjadi:
    Width = (440 + (1+1)+(0+33)+ (470 + (1+1)+(33+0)
    Width = 980px
  5. Setelah itu kemudian cari kode dibawah ini (tekan; ctrl + F):
    <div class='region-inner header-inner'>
  6. Setelah ketemu letakkan seluruh kode dibawah ini tepat dibawah kode diatas (point 5)
        <div class='header-kanan'>
    <b:section class='header' id='header2' maxwidgets='1' preferred='yes'>
    <b:widget id='LinkList100' locked='true' title='' type='LinkList'/>
    </b:section>
        </div>

  7. Tekan tombol Simpan/Save. Jika muncul peringatan yang memberitahukan bahwa widget id=LinkList100 tidak tersedia pilih opsi "pertahankan Widget".
Semoga bermanfaat  dan selamat nge-blog ;)

Keterangan plus-plus:
  • Template yang digunakan pada proses hacking ini adalah template blogspot versi terbaru (lihat berbagai model template versi terbaru di Rancangan » Perancang template).
  • Lebar standar template ini sudah diubah menjadi 980px.

8 komentar:

rey mengatakan...

makasih banyak mas oentoe09...
langsung aku praktekkan di blog baruku, minta do'a restu agar sukses modif headernya

Oentoe_09 mengatakan...

sama-sama Mas Rey... smoga sukses.. ditunggu kabarnya Mas, n smoga kabarnya baik.. amin...

kangnas mengatakan...

mas kenapa id n typex ko' harus linklist, gmna caranya, klo pengen di ganti dengan javascript?
mohon pencerahannya terima kasih.

alayhim mengatakan...

wideuh... kayaknya kmampuan q yg msi newbie lum bs prktekin deh, agan bs lihai gini gimana belajarnya gan? bisa d bocorin ga? aq pngen bisa tp kok html ga paham2. dr mana dulu bljarnya..

Aditya L Pramana mengatakan...

wah, ini nih artikel yang saya cari-cari slama ini. Thanks gan artikelnya yg bermanfaat ni...

superrefreshing.blogspot.com

Agri Ahyar Prasetya mengatakan...

Gan mencoba nambahin aja gan..
Kalau di template ane untuk tahap per 1. Ane gak mengubah seperti yang agan kasih. Tapi, ane hanya menambahkannya kode css yg pertama itu dan meletakkannya ke atas .header-inner dan langkah selanjutnya sama seperti yg agan jelaskan. :D salam kenal ;)

ArsipKu mengatakan...

Tanks gan akan ane coba semoga jadi dah....

Art Energic mengatakan...

html sama2 keblangsangnya dengan pascal, butuh ketelitian tinggi. dan ane gagal nerapin ilmu yang satu ini krn susah! btw, salam kenal sob
artenergic.blogspot.com

Posting Komentar

Label

Blog support

Entri Populer