Wednesday, 13 November 2013

Cara Membuat Header Responsive FullScreen di Blog

Cara Membuat Header Responsive FullScreen di Blog - Header ,..? apaan itu header , header dalam indonesia adalah kepala sedangkan jika kita terapkan dalam dunia website atau blogger , header ialah bgian paling atas suatu blog atau yang biasa disebut header ( kepala ) . kali ini kita akan membahas tentang bagaimana  Membuat Header Yang Responsive FullScreen di Blog . dengan demikian nanti header blog anda akan menjadi layar penuh dan bisa menyesesuaikan dengan layar .

Cara Membuat Header FullScreen Responsive di Blog
DEMONYA SEPERTI HEADER DI ATAS

Berikut Cara Membuat Header Responsive FullScreen di Blog

1. Pertama Masuk dulu ke blogger sobat
2. Pilih Menu => Edit HTML
3. Cari kode  ]]</b:skin> atau </style>
4. Setelah itu Letakkan CSS berikut tepat di atas ]]</b:skin>

/* Header */ #header-wrapper{width:100%;overflow:hidden;background: rgba(252, 252, 252, 0.74);padding:10px 0; border-bottom: 1px solid #eee;} #header-kiri{float:left;max-width:40%;overflow:hidden;} #header-kanan{float:right;max-width:60%;overflow:hidden;} #header-kanan img{max-width:100%;} .header .widget{padding:5px;} .description { margin: 0px; font-size:13px; } .title { font-size: 22px; margin: 0px; }.pembatas{max-width:960px;margin:0 auto;}

5. Langkah selanjutnya Letakkan HTML berikut tepat di bawah <body>

<header id='header-wrapper'> <div class='pembatas'> <b:section class='header' id='header-kiri' maxwidgets='1'><b:widget id='Header1' locked='true' title='(Header)' type='Header'></b:widget> <b:section class='header' id='header-kanan' maxwidgets='1'/> </div> </header>

*Keterangan : ubah angka 960px; dan sesuaikan dengan lebar template sobat ( outer-wrapper )

6. Done ( Taraaa akhirnya selesai deh , sekarang sobat sudah bisa Membuat Header Responsive FullScreen di Blog dengan baik dan perfect hehehehehh )

Nah itulah trick dan tips Cara Membuat Header Responsive FullScreen di Blog atau dengan kata lain membuat header kepala blogger menjadi layar penuh sesuai dengan layar . demikian artikel saya kali ini tentang Cara Membuat Header Responsive FullScreen di Blog semoga bermanfaat bagi anda .

Diposkan oleh di
Label:

2 comments:

  1. Nucky.P .N22 November 2013 at 00:10

    wows ada juga tutorial seperti ini ya mas .. saya suka sama tampilannya oh ya kalau ganti backgroundnya gimana ya itu

    ReplyDelete
  2. purwanto30 January 2014 at 02:56

    bagaimana bisa di ikuti klu ngga bisa di kopi paste lebih baik nyari di blog lain aja

    ReplyDelete

Subscribe to: Post Comments (Atom)