Cara Membagi Header Dua Bagian Diblog

Cara Membagi Header Dua Bagian Diblog - Okay Gusy Sekarang Saya Akan Membagikan Tips Blogger Mungkin Akan Bermanfaat Buat Kalian Untuk Dilakukan Diblog Kalian

Header terdiri dari setiap bagian yang muncul di bagian atas blog Anda. Ini adalah wadah yang terdiri dari dua bagian penting yaitu sepotong Logo mana Anda menambahkan judul, logo dan penghitungan ulang blog dan bagian kedua meliputi daftar Navigasi di mana Anda menambahkan link lokasi. Sekarang tutorial ini membutuhkan sedikit kewaspadaan hati Anda karena saya akan perlu untuk mengedit coding template yang Anda. Karena sebagian besar template yang dirancang oleh penyebab yang berbeda sehingga cipher akan setuju sedikit tapi format tersebut akan sama. sekilas gambar di bawah untuk memahami apa sebenarnya membagi header:

Bagaimana Cara Membagi Header Dua Bagian Diblog ?

Itulah yang kita akan lakukan untuk membuat bagian terpisah untuk tujuan iklan Anda. Biasanya kita sering menambahkan 468x60 ukuran banner ke sisi kanan dan oleh karena itu kita perlu bagian widget untuk itu.

Bagi Header Blog Anda Menjadi Dua Bagian

1. Login Di Blogger.com -> Template -> Back Up Template ( Jika Anda Memperlukannya )

2. Cari Kode Dibawah Ini , Catatan : Cari Dengan Menggunakan CTRL + F Untuk Lebih Cepat

#header-wrapper { width:960px; margin:0 auto 10px; border:1px solid $bordercolor; } #header-wrapper {<br />    width:960px;<br />    margin:0 auto 10px;<br />    border:1px solid $bordercolor;<br />    }<br />  #header-inner {<br />    background-position: center;<br />    margin-left: auto;<br />    margin-right: auto;<br />  }<br />  #header {<br />    margin: 5px;<br />    border: 1px solid $bordercolor;<br />    text-align: center;<br />    color:$pagetitlecolor;<br />  }<br />  #header h1 {<br />    margin:5px 5px 0;<br />    padding:15px 20px .25em;<br />    line-height:1.2em;<br />    text-transform:uppercase;<br />    letter-spacing:.2em;<br />    font: $pagetitlefont;<br />  }<br />  #header a {<br />    color:$pagetitlecolor;<br />    text-decoration:none;<br />    }<br />  #header a:hover {<br />    color:$pagetitlecolor;<br />    }<br />  #header .description {<br />    margin:0 5px 5px;<br />    padding:0 20px 15px;<br />    max-width:700px;<br />    text-transform:uppercase;<br />    letter-spacing:.2em;<br />    line-height: 1.4em;<br />    font: $descriptionfont;<br />    color: $descriptioncolor;<br />  }<br />  #header img {<br />    margin-$startSide: auto;<br />    margin-$endSide: auto;<br />  }</div> <br /> <b>Catatan : </b> Kode Anda akan tidak persis tetapi mirip dengan yang di atas. Pilih semua kode yang berisi kata "# header" ". Header" di awal.</div>

Catatan : Kode Anda akan tidak persis tetapi mirip dengan yang di atas. Pilih semua kode yang berisi kata "# header" ". Header" di awal.

3. Ganti Semua Kode Diatas Dengan Kode Dibawah Ini

#header-wrapper{ width: 960px; color: #000; margin: 30px auto 0; padding: 0px; overflow: hidden; } #header-inner { background-position: left; background-repeat: no; } .headerleft h1, .headerleft h1 a,.headerleft h1 a:hover,.headerleft h1 a:visited { color: #BF0100; font-size: 36px; font-family: 'Ultra', serif, Arial; font-weight: bold; margin: 0; padding: 0px 0 5px 0; text-decoration: none; text-shadow: 6px 6px 4px #ccc; line-height:1.2em; } .headerleft h3 { font-family: arial, tahoma, Sans-Serif; font-weight: normal; margin: 0; padding: 0; } .headerleft .description { color: #3B3B3B; font:bold 12px Helvetica, arial, sans-serif; margin: 0px; padding: 0 0 20px 0; text-shadow: 4px 4px 6px #ccc; } .headerleft { width: 450px; float: left; margin: 0; padding: 0; height:80px; } .headerright { width: 468px; height:80px; float: right; margin: 0px; padding:1px 0 0 0; }

4. Sekarang cari kode ini atau kode serupa yang harus berisi bagian div header Anda

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
 <b:widget id='Header1' locked='true' title='Theblogservices (Header)' type='Header'/> 
 </b:section> 

Itu Harus Berisi Tags

5. Sekarang Ganti Kode Diatas Dengan Kode Dibawah Ini

<div id='header-wrapper'>
 
 <div class='headerleft'>
 
       <b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'> 
 <b:widget id='Header1' locked='true' title='Theblogservices (Header)' type='Header'/> 
 </b:section> 
 </div>
<div class='headerright'>
 
 <b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'> 
 </b:section> 
 </div>
 

6. Save Template Anda Dan Lihat Keajaibannya Dimenu Tata Letak Blog Anda

Selamat !! Anda Telah Berhasil Membagi Header Blog Anda Menjadi Dua Bagian , Lihatlah Sejenak Ditemplate Dan Tata Letak Blogger Anda , Dan Coba Lihat Efek Dari Tips Saya Diatas

Yahh Hanya Begitu Saja Yang Bisa Saya Bagikan Buat Anda Untuk Mengubah Tampilan Blog Anda , Semoga Tips Ini BERMANFAAT Buat Anda . Coba Anda Berkomentar Apa Menurut Anda Tentang Tips Saya Dikolom Komentar Dibawah

• Tweet
• Share
• Share
• Share
• Share

About Gerardo Mosses

Ini Adalah Blog Iseng Buatan Saya , Dibuat Karena Iseng Hanya Untuk Sekedar Membagikan Informasi Seputar Internet Dan Disekitar Kalian

Related Post