> Cara menambah gadget pada Header

Rabu, 18 Mei 2011

33

Cara menambah gadget pada Header

Menambah gadget tepat pada bagian header tentu bermanfaat, diantaranya kita bisa menambahkan gambar, slide show, banner, atau iklan pada bagian header tersebut. Cara ini berbeda dengan menambah gadget diatas ataupun dibawah header yang saya tulis pada artikel Cara Menambah Gadget diatas Header. Tapi cara ini sama dengan membuat header terbagi menjadi 2 bagian yaitu header disebelah kiri dan gadget terletak disebelah kanan header.
Berikut gambar header yang terbagi menjadi 2 :


Bila anda berminat, silahkan anda ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Cari kode yang sama atau mirip dengan kode berikut :

/* Header
----------------------------------------------- */
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper {
  padding: 22px $(header.padding);
}

.header-inner .Header .descriptionwrapper {
  padding: 0 $(header.padding);
}
Catatan :
Setiap template biasanya berbeda kodenya, yang penting perhatikan kode - kode yang ada pada bagian  (/* Header)

6. Ganti kode diatas dengan kode dibawah ini :

/* Header
----------------------------------------------- */
#header {
float:left;
width:40%;
margin: 0px;
text-align: center;
color:#ffcc66;
}

#header2{float:left; width:60%;}

7. Kemudian silahkan anda cari lagi kode yang sama atau mirip dengan kode berikut :
  <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITEL BLOG ANDA (Header)' type='Header'/>
</b:section>
</div>

8. Ganti kode diatas dengan kode dibawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITEL BLOG ANDA (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->

10. Simpan Template.

Nah.... jadi deh....,
Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.
Ping your blog, website, or RSS feed for Free



Informasi Artikel :
Judul : "Cara menambah gadget pada Header"
Diulas Oleh : | Rabu, 18 Mei 2011 | 07.33
Description : Menambah gadget tepat pada bagian header tentu bermanfaat, diantaranya kita bisa menambahkan gambar, slide show, banner, atau iklan pada ...

Rating : 6.4 Dari 10, Berdasarkan 3300+ Dari 33 000+ Pengunjung.



33 komentar:

  1. wah... bisa untuk pasang banner ni kang,
    makasih tutorialnya ya... langsung coba ah...

    BalasHapus
  2. mas, mau nanyak menambah tag pada banner gmana?

    BalasHapus
  3. Mas fauzi, mohon maaf... saya tidak pernah tag pada banner.
    mungkin maksudnya memberi title pada link banner...?

    BalasHapus
  4. mas mau nanya, kalau menambah gadget di atas posting dijadikan 3 kolom gimana? seperti template yang anda gunakan ini.. itu di bawah kategori kan ada 3 kolom. terimakasih

    BalasHapus
  5. kalau diatas posting sama dengan cara menambah gadget dibawah header, anda bisa baca artikelnya dilink ini : http://www.carabuatwebgratis.com/2011/08/cara-menambah-gadget-4-kolom-dibawah.html

    kalau disidebar samping namanya multi tab, anda bisa baca artikelnya disini: http://www.carabuatwebgratis.com/2011/06/cara-membuat-multi-tab-dengat-gadget.html

    BalasHapus
  6. mas kodenya
    /* Header
    ----------------------------------------------- */
    .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
    _background-image: none;
    }

    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
    }

    .Header h1 a {
    color: $(header.text.color);
    }

    .Header .description {
    font-size: $(description.text.size);
    color: $(description.text.color);
    }

    .header-inner .Header .titlewrapper {
    padding: 22px $(header.padding);
    }

    .header-inner .Header .descriptionwrapper {
    padding: 0 $(header.padding);
    }

    di template gw ga ada . gw udah coba cari /* Header aja ga ada

    BalasHapus
  7. Silahkan anda baca cara mencari kode pada template,berikut Linknya : http://www.carabuatwebgratis.com/2011/04/cara-mencari-kode-html.html

    Yang jelas setiap template belum tentu sama..., Tapi yang penting anda cari pd bagian CSS yaitu "header". Dan yg anda cari tidak hrs sama dgn kode yg saya berikan, tapi biasanya mirip.

    BalasHapus
  8. keren gan,,,langsung berhasil,,,nih ane baggin template o-om ya...

    BalasHapus
  9. Template o-om gratis..., terima kasih... semoga bermanfaat

    BalasHapus
  10. MEMANG BANYAK CARA NGEBLOG YANG LUAR BIASA...TAPI KALO YANG NI LEBIH DARI LUAR BIASA SAMPAI-SAMPAI JADI ULAR BIASA...HE.HE..SORY MAS...INTINYA POSTINGAN ANDA BENAR2 AKTUAL..BANYAK YANG BUTUH..SUKSES SELALU

    BalasHapus
  11. lrgametrik..., terima kasih... semoga bermanfaat

    BalasHapus
  12. mas mau tanya kalau tambah gadget diatas header tapi satu kolom penuh ada gaa tutorialnya

    BalasHapus
  13. bursaobatherbal..., silahkan anda baca tutorialnya pada post berikut:
    http://www.carabuatwebgratis.com/2011/01/cara-menambah-gadget-diatas-header.html

    Semoga bermanfaat.

    BalasHapus
  14. Maknyuss..
    Ini yang saya cari..
    terima kasih..

    BalasHapus
  15. bos numpag tes ya&trade

    BalasHapus
  16. mohon bantuan, kode yang dibawah kagak ketemu ada juga ini






    udah ane rubah2 tp erot mulu

    BalasHapus
  17. kok gk nungul kodenya,,,


    Bidang wajib tidak boleh kosong

    BalasHapus
    Balasan
    1. mohon anda jelaskan keluhan anda secara jelas, agar saya bisa jelaskan dimana kekurangan atau kesalahan yang anda keluhkan...

      Hapus
  18. Tutor bermanfaat...trimaksih gan...
    Salam kenal dar Belajar Saraf...

    BalasHapus
    Balasan
    1. sama-sama...dan salam kenal juga ya...

      Hapus
    2. Gan trik ini berpengaruh gak ke seo-nya?
      mohon pnjelasannya. trims

      Hapus
    3. tdak ada pengaruh seo..., trik ini hanya untuk memaksimalkan konten saja.

      Hapus
  19. wah bermanfaat bngat gan, thanks infonya,,,

    BalasHapus
  20. thanks kang.... pi kode

    div class='region-inner header-inner'>

          <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

    <b:widget id='Header1' locked='true' title='TITEL BLOG ANDA (Header)' type='Header'/>

    </b:section>

    </div>



    ga ada,, yang ada



    <div class='region-inner header-inner'>
          <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='titel blog (Header)' type='Header'>
    <b:includable id='main'>


    gimana dunk solusinya ?? mohon petunjuknya

    BalasHapus
  21. gan, kalau di sisi kanan header ane mau di tambahin space buat image profiel gimana yah gan codingnya...

    BalasHapus
  22. terima kasih atas tutorialnya, sangat membantu

    BalasHapus

BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI

Artikel Terbaru

POST POPULER

Entri Populer



BLOGGER

Comments

HTML

Side Ads

CSS

Footer Ads

JAVASCRIPT

Random News


BACKLINK

INFO

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.

CEO
BLOG MAS NOER

Noer cholis


Plosokuning V, Minomartani, Ngaglik, Sleman, Yogyakarta.

TUKAR LINK

TUKAR LINK






Baca artikel "Manfaat Tukar Link"













Baca artikel "Manfaat Tukar Link"

LINK SAHABAT

LINK SAHABAT


CHAT

CHAT




TESTIMONI

Follow Us

Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini. Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....

RECENT COMMENT

Recent Comments


top down