Senin, 08 April 2013

Cara Membuat Widget Banner Header

Selamat siang Skyser..
Kali ini saya akan share yang direqueskan sobat Skyser. Yaitu, cara membuat widget banner di header.
Oke langsung ikuti step di bawah ini

Step :

1. Login Blogger (BLOGGER bukan TWITTER haha)
2. Klik Template > Edit HTML > centang "Expand Template Widget"
3. Sebelum edit sebaiknya copy semua code di situ buat berjaga-jaga.
4. Cari code ]]></b:skin> (gunakan ctrl+F untuk mempermudah)
5. Pastekan code ini tepat diatas code ]]></b:skin>
#SBanner{
background: #000;
box-shadow:0 00 0px rgba(0,0,0,0.0);
border:4px solid #9f1111;
border-radius:4px;
float: left;
margin-top: 20px;
margin-left: 10px;
width: 88px;
height: 496px;
display: inline;
padding: 2px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
6. Cari code <div id='header-wrapper'> eit bentar ini code dipunya ane mungkin akan berbeda jika punya kalian, pokoknya cari code <div id='header
7. Pastekan code ini tepat di bawah code tadi
<b:section id='SBanner' maxwidgets='5' showaddelement='yes'></b:section>
>8. Simpan Template.

Keterangan :
  1. Text yang berwarna Merah adalah code warna untuk background widget
  2. Text yang berwarna Orange adalah code warna untuk bordernya (kalo ga tau border ya bisa dibilang garis pinggiran hehe..)
  3. Text yang berwarna Kuning adalah code untuk mengatur jarak widget dari kiri
  4. Text yang berwarna Hijau adalah code untuk mengatur jarak widget dari atas
  5. Text yang berwarna Biru Muda adalah code untuk mengatur lebar dan tinggi widget
Untuk code warna silahkan cek di sini

Semoga Bermanfaat ^_^
    Blogger
    Disqus
    Pilih Sistem Komentar Yang Anda Sukai

    41 komentar

    keren sob, kapan2 gw coba ya.. :D

    Balas

    Izin coba...
    comment back http://anonymous-evolution.blogspot.com/

    Balas

    wahh banner ku nomor 2 masuk tipi :D wkwkw,

    koment back ya kk
    http://d-aschri93.blogspot.com/

    Balas

    Ini dia yang ku cari :O tapi, kalo untuk yang 468x60 ada kah?

    Balas

    ada tapi besok aja lah, cape nih ngetik mulu -_-

    Balas

    gw ngadain award.. :D

    Balas

    hore banner gua dibikin artickel ,hahahaha..come back
    http://mizda-xp.blogspot.com
    diganti yah bannerku

    Balas

    diganti yang mana itu dah paling bagus..

    Balas

    Ijin nyoba gan , sya ngadain award kecil2lan silahkan di chek ( http://hafidz-maru.blogspot.com/2013/04/award-best-design-template.html )

    Balas

    oke silahkan sob, thanks info awardnya

    Balas

    ditunggu follbacknya http://muhammad-ramli.blogspot.com/

    Balas

    Tipsnya keren sob
    Comment back! :)

    # devil-batz.blogspot.com/

    Balas

    bawah nya di kasih banner temen yh ????

    Balas




    Trus leteak banner teman di mana ???? masih newbie

    Balas

    html>> blablablalblabla

    terus banner temen di mana

    Balas

    iudh gan udh tau jangan di balas lagi

    Balas

    Thx Sob, manfaat banget

    btw, pasang balik ya banner ane
    http://artadeo.blogspot.com/p/pasang-banner-anda.html

    Balas

    cara pasang banner nya gmana..??

    Balas

    klik tambah gatget, di tata letak

    Balas

    Bro, kalo Disebelah Kirinya Header , Kode HTML nya gmna??

    Balas

    Banner nya Biar Bisa Datar Jadi 2 Kolom, Kayak PunyaMu gmna??

    Balas

    code html yg ini

    taruh di atasnya code html header.. kalo g tau coba cari code ini > 'header' atau "header"
    *pake tanda kutip

    Balas

    sesuain width sama heightnya aja..

    Balas

    kok gak bisa di copy kodenya ya

    Balas

    klo kode ini gk ketemu gimna donk < div id='header-wrapper' >

    Balas

    coba code ini < div id='header' >

    Balas

    makasih tutorialnya sangat bermanfaat

    Balas