Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Membagi Kolom Header Blog di BloGGeR Baru

Panduan dan Tutorial BloGGeR ini merupakan sebuah panduan untuk membagi header blog menjadi 3 kolom di bagian kiri, tengah dan kanan. Meskipun demikian bila sampeyan menginginkan, sampeyan dapat membaginya sesuai jumlah kolom yang diinginkan. Membagi header blog menjadi 3 kolom dalam tutorial ini akan menempatkan blog title di bagian tengah dan 2 elemen (kolom) baru di sebelah kanan & kiri.

Membagi kolom header menjadi beberapa bagian memungkinkan kita menempatkan berbagai widget baru dalam berbagai bentuk dalam header yang menyatu dengan bagian blog title dan deskripsi blog. Mungkin saja sampeyan akan memansang adsense (iklan), slide show, video, image atau bisa saja beberapa teks. Jika penambahan elemen baru ini selesai, semua fungsi penambahan widget dapat dilakukan melalui "Dasboard - Page Elements - Add Gadget".

Beberapa penyesuaian dan penambahan kode kita perlukan, dalam bentuk kode css & xHTML. Kode css berfungsi mengatur posisi & bentuk (tinggi, lebar, background dsb) serta beberapa variable lain seperti padding & margin. Penyesuaian yang cukup penting dilakukan adalah merubah ukuran font blog title agar dapat ditampilkan dalam kolom yang lebarnya relatif jauh lebih sempit dari ukuran sebelumnya. pengaturan sekaligus kita sertakan melalui penambahan kode css, meskipun sebenarnya dapat diatur juga melalui "Perancang Template Blogger".

Semua percobaan yang aku lakukan untuk memodifikasi header blog ini dilakukan pada template "Awesome Ink" by Tina Chen. Sekalipun demikian dari kode html yang digunakan di ketiga template blogger baru (New BloGGer Template) yang lain tampaknya tidak ada perbedaan-perbedaan yang menghalangi modifikasi di ke-4 template yang tersedia. Silahkan ikuti dengan seksama supaya modifikasi dapat dilakukan dengan cepat dan lancar tanpa perlu banyak melakukan pengulangan. O ya ... Untuk lebih memudahkan dan supaya semua modifikasi yang dilakukan tidak mengganggu aktifitas yang dilakukan di blog yang telah dipergunakan sebagai tempat posting, sebaiknya sampeyan membuat sebuah blog baru yang khusus dipergunakan sebagai tempat melakukan segala bentuk modifikasi atau penambahan widget. Setelah semua selesai dengan sukses dilakukan di blog percobaan, silahkan lakukan modifikasi sesungguhnya di blog utama.

Langkah-langkah yang harus dilakukan untuk melakukan pembagian header blog dalam bentuk kolom terpisah

  1. Login to BloGGeR (Login ke BloGGeR) : Lakukan dengan menuliskan User Name/Nama Pengguna atau Email Address. Lanjutkan dengan menuliskan Password/Sandi.
  2. Dasboard (Dasbor) : KLIK link Design/Rancangan.
  3. Design (Rancangan) : KLIK link Edit HTML.
  4. Back-Up (Amankan Template) : Lakukan back-up terlebih dahulu terhadap template dengan caraKLIK link Download Full Template (Download Template Lengkap, kemudian simpan file Template di folder PC. Apabila sampeyan ingin mengetahui lebih dalam cara dan kegunaan "back-up template", silahkan KLIK link di bawah ini :
    Cara Bac-up Template
  5. Find CSS Code/Cari Kode CSS : Cari kode CSS berikut. Gunakan Ctrl+F supaya lebih mudah dan lebih cepat. Bagi yang belum tahu cara cepat mencari kode html, silahkan juga KLIK link di bawah ini :
    Cara Cepat Cari Kode HTML di Template.
  6. ]]></b:skin>
  7. New CSS Code (Kode CSS Baru) : Letakkan kode CSS yang baru di bawah ini tepat di atasnya.
  8. #header{ 
          margin:0; 
          padding:0;
    }
    #header .widget{
          padding:10px;
    }        
    #headerR,#headerL{
          margin:0;
          padding:0;
    }
    h1.title,#headerR .widget h2.title, #headerL .widget h2{
          text-align:center;
    }
    #headerR .widget h2.title, #headerL .widget h2{
          font-size:12px;
          font-family:Verdana;
          line-height:16px;
          margin:0;
          padding:0;
          font-weight:600;
          text-transform:uppercase;
          margin:6px 0;
    }
    #headerR .widget,#headerL .widget{
          margin:3px;
          padding:6px 6px 10px;
          background:rgba(0,0,0,0.1);
    }
    .GRheaderR,.GRheaderL{
          float:right;
          width:25%;
          min-height:60px;
          margin:22px 10px 10px 0;
          border:1px solid #eee;
          background:transparent;
          border-radius:8px;
          box-shadow:-3px -3px 6px #555;
    }
    .GRheaderL{
          float:left;
          margin:22px 0 10px 10px;
    }
    h1.title{ /*  blog title - nama blog */
          font-size:32px; /* ukuran blog title  - silahkan perbesar atau perkecil */
          line-height:40px;
    }
  9. Find HTML Code (Cari kode HTML) : Cari kode HTML berikut ini :
  10. <div class='region-inner header-inner'>
    Kode ini terletak di bagian body di antara tag <body> dan tag </body>
  11. Di bawah kode tersebut akan anda jumpai kode seperti berikut :
    <div class='region-inner header-inner'>
          <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='BLOG TITLE (Header)' type='Header'/>
    </b:section>
  12. Ganti kode dengan kode berikut :
    <div class='region-inner header-inner'>
    <div class='GRheaderL'>
    <b:section class='headerL' id='headerL' maxwidgets='1' showaddelement='yes'/>
    </div>
    <div style='float:left;width:40%;'>
          <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='BLOG TITLE (Header)' type='Header'/>
    </b:section>
    </div>
    <div class='GRheaderR'>
    <b:section class='headerR' id='headerR' maxwidgets='1' showaddelement='yes'/>
    </div>
    <div style='clear:both;'/>
  13. Jangan lupa kode berwarna merah BLOG TITLE ditulis sesuai nama blog anda seperti yang bisa dilihat pada bagian tersebut sebelum di rubah.
  14. Klik Simpan Template/Save Template.

Catatan :

  • Merubah ukuran width widget baru dilakukan dengan merubah persentase lebar (width) yang bernilai 40% dan 25%.
  • Properti CSS baru bisa ditambahkan untuk mendapatkan tampilan widget terbaik.
  • Baca juga tutorial yang ini untuk membagi header menjadi 2 kolom (membagi 2 elemen header)
    Cara buat Elemen Baru di Header Blog
  • Jika anda sudah menggunakan new blogger interface (antar muka blogger baru), silahkan buka link berikut untuk melakukan editing:
    Panduan Edit Kode HTML di New Blogger Interface

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


Update » Ngahad Legi, Juli, 01, 2012

» Happy Blogging - gubhugreyot «

10 komentar:

  1. mas tolong bantuin aku benerin blog ku ya mas.
    masih amburadul. dreamsahata.blogspot.com
    tolong ya mas!!!! pleeess....
    emailku: socialsahata@yahoo.com

    BalasHapus
  2. hib, kode css template ane ga gitu hib, jadi binggung edit'a?? oya ane pake template baru, by blogger template place. Thx hib atas jawaban'a!

    BalasHapus
  3. mas biar ada tempat buat add new gadget di kanan header, rencananya mau buat masang banner 480x60 gimana caranya?
    aku pakai new blogger template designer

    BalasHapus
  4. bukanya iner itu untuk satu kolom aja??? perasaan harus ada H2 (header 2)baru 2 kolom...klo saya salah harap maklum.

    kunjungi saya di http://guitarid.blogspot.com/ di tunggu kehadiran sobat2 sekalian. ini blog musik.

    BalasHapus
  5. wah kelihatan nya mudah,tapi ternyata gak bisa bos,... waktu di save,ADA KATA2 template tidak dapat di prashe,... tuh gimana ya?

    BalasHapus
  6. Apek kang blog & infone sampean...Semangat berbagi info... http://nanoneuton.blogspot.com

    BalasHapus
  7. masih belum berhasil Broo .. padahal sudah gue ikutin tutornya ..

    Keluar tulisan kayak gini :
    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "div" must be terminated by the matching end-tag "".

    Error 500
    " saya ganti karna ga bisa komen

    Pencerahanya Broo .. besok mau tak coba lagi :(

    BalasHapus
  8. Apakah Anda berpikir untuk mendapatkan bantuan keuangan, Apakah Anda serius membutuhkan pinjaman mendesak, apakah Anda berpikir untuk memulai bisnis Anda sendiri, Anda berada di utang, ini adalah kesempatan Anda untuk mencapai keinginan Anda karena kami memberikan pinjaman pribadi, pinjaman bisnis, dan perusahaan pinjaman, dan semua jenis pinjaman pada tingkat bunga 2%, kami menjamin semua klien berharga kami bahwa mereka akan mendapatkan semua pinjaman masing-masing dan menjadi tahun baru dengan senyum di wajah mereka.
    Untuk informasi lebih lanjut silahkan hubungi kami sekarang melalui email {} gloryloanfirm@gmail.com

    Informasi Peminjam:

    Nama lengkap: _______________
    Negara: __________________
    Sex: ______________________
    Umur: ______________________
    Jumlah Pinjaman Dibutuhkan: _______
    Durasi Pinjaman: ____________
    Tujuan pinjaman: _____________
    Nomor ponsel: ________
    Ibu Glory

    BalasHapus

 
GR | Edited by | gubhug reyot