Cara Menambahkan Widget Disamping Header

Cara menambah widget disamping header. Widget yang terletak tepat disamping kanan header, sehingga header menjadi 2 bagian. Untuk lebih jela...

Cara menambah widget disamping header. Widget yang terletak tepat disamping kanan header, sehingga header menjadi 2 bagian. Untuk lebih jelasnya silakan lihat, Contoh Gambar dibawah ini:
cara menambahkan widget disamping header

Seperti gambar diatas, ada 2 widget. 1 widget header yang bertuliskan judul blog, dan yang kedua widget kosong, yang bisa kita isi dengan gadget apa saja. Widget Header akan di perkecil lebarnya, agar widget buatan dapat ditempatkan disampingnya, dengan ukuran yang disesuaikan dengan lebar halaman blog. Header yang awalnya hanya ada 1 widget, dibuat menjadi 2 bagian, header kiri dan kanan. Untuk lebih jelasnya, Ikuti langkah-langkah dibawah ini.

Cara menambah widget disamping header.

  1. Login ke blogger. Dari halaman dasbord pilih pengaturan Template.
  2. Selanjutynya Klik edit HTML, dan cari kode .header-outer { . Kode lengkapnya.
  3. .header-outer {
      background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
      _background-image: none;
    }
  4. Ganti semua kode diatas dengan kode dibawah ini.
  5. .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;_background-image: none;min-height: 104px;}
    #header {
    width: 40%;
    margin-right: 10px;float: left; }
    #headerkanan {
    float: right;
    width: 54%;
    margin: 20px 10px 5px 10px;
    padding: 2px;}
    #headerkanan .widget {margin: 3px;}
  6. Keterangan: 
  7. .header-outer { pada bagian height: 104px(untuk mengatur tinggi  header).
     #header { pada bagian width: 40%; lebar header kiri.
    #headerkanan { pada bagian width: 54%; lebar header kanan. dan margin: 20px 10px 5px 10px; posisi atas-bawah header kanan.
  8. Selanjutnya. Cari kode <div class='region-inner header-inner'> dan tambahkan kode berikut disamping kanannya.
  9. <b:section class='headerkanan' id='headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
  10. Keseluruhan kode menjadi.
  11. <div class='region-inner header-inner'><b:section class='headerkanan' id='headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
  12. Selanjutnya Save template. Selesai. 
Dengan menambahakan widget disamping header, kita dapat menghemat penggunaan halaman blog dan juga bisa membuat tampilan blog semakin menarik. Widget disamping header bisa kita tambahkan dengan Tombol Share, iklan, tombol search atau widget yang lainnya sesuai dengan yang kita inginkan. Semoga Bermanfaat.

    COMMENTS

    Nama

    Android Desain Blog Game Header HTML dan CSS Internet Kotak Komentar Menu Desain Microsoft Excel Microsoft Word Post Seo Sidebar Software Tips dan Trik Tutorial Blog Widget
    false
    ltr
    item
    Xiruz: Cara Menambahkan Widget Disamping Header
    Cara Menambahkan Widget Disamping Header
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8js6Gr-MyTX-JSUkWSqNC7-fWzNknb9AzMWxnzBXyiBsm2RyJ8RXKWMAO6Cl1UXOyB3d6RdtcpS5M2kbS_Iza1IG8bbRbd1QbBOGIWh0IE3pH_XqRWBN0HWY1P9ImcOlP-tVf2s5BYRIc/s1600/Header+menjadi+2.JPG
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8js6Gr-MyTX-JSUkWSqNC7-fWzNknb9AzMWxnzBXyiBsm2RyJ8RXKWMAO6Cl1UXOyB3d6RdtcpS5M2kbS_Iza1IG8bbRbd1QbBOGIWh0IE3pH_XqRWBN0HWY1P9ImcOlP-tVf2s5BYRIc/s72-c/Header+menjadi+2.JPG
    Xiruz
    https://xiruz-vip5.blogspot.com/2013/05/cara-menambahkan-widget-disamping-header.html
    https://xiruz-vip5.blogspot.com/
    http://xiruz-vip5.blogspot.com/
    http://xiruz-vip5.blogspot.com/2013/05/cara-menambahkan-widget-disamping-header.html
    true
    2851028177564598499
    UTF-8
    Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy