Home » » Menambah Widget Di Samping Header

Menambah Widget Di Samping Header

Menambahkan kolom iklan di samping header
Menambahkan Widget di samping Header. Sebagian besar blog memiliki fariasi di samping judul blog. Dan sebagian besar juga menambahkan kotak untuk penempatan iklan di samping Judul blog (header). Header yang kita lihat pada tata letak dasbor hanya terdapat 1 kotak. Itu bawaan aslinya. Dan untuk menambahkan widget di samping judul blog (header) menjadi 2 bagian header, yaitu header kiri dan header kanan seperti yang terlihat di atas guna meletakkan banner iklan butuh cara-cara tersendiri. Kita simak tahap demi tahap di bawah ini :

1. Login di blogger yang teman punya.
2. Pilih Templat - buka Edit HTML. Cari kode script .header-outer{
Kode lengkapnya seperti ini :
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

3. Silakan ganti seluruh kode di atas dengan kode di bawah ini:
.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;}


Keterangan skrip:
min-height: 104px;} = Tinggi Header. Ubah sesuai yang diinginkan
width: 40%; = Perbandingan lebar header kiri dengan luas blog. Setting sesuai yang diinginkan.
width: 54%; = Perbandingan lebar header kanan. Bisa disesuaikan dengan yang diinginkan.
margin: 20px 10px 5px 10px; = Jarak atas - bawah header kanan. Bisa disesuaikan dengan yang diinginkan.

Memasang iklan di samping header

5. Cari kode <div class='region-inner header-inner'> dan copy kode scrip di bawah ini :
 <b:section class='headerkanan' id='headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
6. Paste kode di atas tepat disamping kode <div class='region-inner header-inner'> ini. Sehingga menjadi :
<div class='region-inner header-inner'><b:section class='headerkanan' id='headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

7. Pratinjau dulu templat yang kita inginkan. Jika sudah sesuai Klik Simpan. Silakan teman atur sendiri pengaturannya sesuai dengan keterangan kode di atas. Seperti contoh di atas.

Dengan Penambahan 1 kolom widget di samping header, akan membuat penampilan blog menjadi semakin menarik. Dan akan menghemat ruang halaman blog kita.


16 komentar:

  1. ini dia g gue cari...mantap!!

    ReplyDelete
  2. bagus sekali gan artikelnya ... akan saya coba untuk menambahkan elemen/gadget baru di header blog saya ... terima kasih gan.

    ReplyDelete
    Replies
    1. Semoga berhasil mas..Terima kasih kunjungannya...

      Delete
  3. mas,di tempat saya gak ada header-outer nya gmn?

    ReplyDelete
  4. Terima kasih mas,, ini tips yang bermanfaat... keren..

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. owh begono toh...sedikit artikel tapi akurat..siap laksanakan..
    http://www.kangalip.com/

    ReplyDelete

* Komentarlah yang sopan dan tidak mengandung sarah.
* Jangan gunakan Kotak Komentar dengan promosi produk serta usaha yang anda miliki. Silakan gunakan sarana Review Produk dan Jasa di blog ini. Maaf, akan dihapus.
* Terima kasih atas kunjungan, komentar dan partisipasi yang diberikan.

.