Welcome to blog teknik dan jaringan

Cara Menambah Gadget di samping Header

Diposkan oleh amar xaxena

Kalau header yang biasa seperti itu, di bagian sampingnya tidak akan bisa ditambah dengan gadget. Kalau begitu saya akan memberi tahu tentang cara menambah gadget di samping header. So anda harus duduk dengan manis dan perhatikan tips berikut ini :

1. Login ke blogger.com
2. Pilih Layout/Tata Letak ---> Edit HTML
3. Lalu cari kode seperti ini :

----------------------------------------------------------------------------
/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
----------------------------------------------------------------------------
4. Lalu ganti kode tersebut dengan kode berikut ini !
----------------------------------------------------------------------------
/* Header
===================================
*/

#header-wrapper {
width: 900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height: 190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}
----------------------------------------------------------------------------

Kode yang berwarna merah 900px adalah panjang header, kode yang berwarna hijau 190px adalah tinggi header.

5.Kemudian cari kode seperti di bawah ini !
----------------------------------------------------------------------------
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
----------------------------------------------------------------------------
6. Kalau sudah ketemu ganti kode tersebut dengan kode di bawah ini !
----------------------------------------------------------------------------
<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
----------------------------------------------------------------------------
7.Klik tombol simpan template.
Kemudian pilih Elemen Halaman, lalu lihat perbedannya.
----------------------------------------------------------------------------
Sebelum :


----------------------------------------------------------------------------
sesudah :
----------------------------------------------------------------------------
info ini diambil dari  sini klik

6 komentar

  1. Share Says:
  2. Thanks infonya
    Blognya Bagus

     
  3. LUKIL Says:
  4. KUNJUGAN PERTAMA, SEMOGA BERANFAAT,
    NB, ITU MUNCULNYA DIBAGIAN MANA?

     
  5. Anonymous Says:
  6. gak bisa...
    code header 1 saya seperti ini kk









    < div class='art-header-png'/>
    < div class='art-logo'>
    < h1 class='art-logo-name' id='name-text'>

    < /h1>
    < h2 class='art-logo-text' id='slogan-text'>

    < /h2>




    terus nambahin gedget di samping header nya bagaimana ??? :(
    bingung

    blog nya http://share-ilmutkj.blogspot.com/
    blog percobaan mohon bantuan nya kk

     
  7. mbogo.net Says:
  8. Thank's atas informasinya.

     
  9. psdink Says:
  10. scriptnya beda dgn themp ane gan :(
    ga ktm semua script yg di atas

     
  11. psdink Says:
  12. themp ane ko aneh ya, udh keluar masuk blog tp ga ada script yg sama mas :(

     

Post a Comment

Tinggalkan Command
anchor text

Waktu Surabaya :
    TOP Software & Tool Utillity :
  • Microsoft download center
  • SUSAH MENCARI OFFICE 2010, DISINI ANDA BISA Download Microsoft Office 2010
  • Microsoft Office 2007
  • windows7download
  • tempat untuk download sepuasmu disini semua aplikasi untuk kebutuhan komputer Tool utillity ada
  • Download windows server 2008
  • Download Aplikasi untuk HP
  • Download VIsta Tranformations Pack
  • Download WINRAR NEW
  • DOWNLOAD OS LINUX MINT
  • Merubah tampilan windows dengan transformation
  • KDE 3 untuk merubah tampilan xp sytle
  • Merubah Tampilan Windows XP Ke Windows 7 Ultimate Cool Winter Xp Theme
  • Download KONBOT untuk membobol password windows - linux
  • Microsoft office untuk MAC OS
  • download Software pendukung untuk membuat Webserver local
  • instal DNS di Windows XP dengan bantuan software - Download software-nya disini bind
  • folder-lock-download
  • DRIVER DOWNLOAD :
  • download driver INTEL
  • driver LAN intel
  • Kumpulan Driver Semua Jenis Mainboard
  • HARDWARE KOMPUTER ASUS
  • Download Driver Mainboard ASUS Semua Type disini
  • Driver Laptop ACER segala jenis MB
  • Driver MB Laptop HP s
  • Driver Laptop HP - Compaq
  • arcabit
  • duba-net
  • Jdrweb
  • simple-avr.com.ua
  • spy-emergency
  • Hari Ibu hari ibuku dan ibumu
  • Photobucket

    Iklan
    Kategori Iklan
    Judul Iklan
    Isi Iklan
    Gambar
    Website Iklan
    Email
    Contak Person
    Alamat
    Image Verification
    captcha
    Please enter the text from the image:
    [ Refresh Image ] [ What's This? ]

    Powered byEMF Web Form