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 ^_^

    Comments

    1. keren sob, kapan2 gw coba ya.. :D

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

      ReplyDelete
    3. wahh banner ku nomor 2 masuk tipi :D wkwkw,

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

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

      ReplyDelete
      Replies
      1. ada tapi besok aja lah, cape nih ngetik mulu -_-

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

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

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

      ReplyDelete
    8. Tipsnya keren sob
      Comment back! :)

      # devil-batz.blogspot.com/

      ReplyDelete
    9. html>> blablablalblabla

      terus banner temen di mana

      ReplyDelete
    10. iudh gan udh tau jangan di balas lagi

      ReplyDelete
    11. Thx Sob, manfaat banget

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

      ReplyDelete
    12. cara pasang banner nya gmana..??

      ReplyDelete
    13. Bro, kalo Disebelah Kirinya Header , Kode HTML nya gmna??

      ReplyDelete
      Replies
      1. code html yg ini

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

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

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

      ReplyDelete
    16. makasih tutorialnya sangat bermanfaat

      ReplyDelete

    Post a Comment