Cara menambahkan widget di samping 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. danmargin: 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.

Post a Comment

umpan balik saya hargai dan saya akan membalas pertanyaan yang menyangkut artikel di Blog ini sesegera mungkin

1. Komentar SPAM akan dihapus segera setelah saya review
2. Pastikan untuk klik "Berlangganan Lewat Email" untuk membangun kreatifitas blog ini
3. Jika Anda memiliki masalah cek dulu komentar, mungkin Anda akan menemukan solusi di sana
4. Bila menyebarluaskan artikel ini harap cantumkan baclink nya

Bila anda senang dengan artikel ini silahkan Klick Disini atau berlangganan geratis Artikel dari blog ini. Pergunakan vasilitas diatas untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui komentar atau share sesuai dengan artikel diatas.

Previous Post Next Post