1.1. Membuat Header Template Blogspot

Ditulis oleh: -
Sudah dijelaskan pada tutorial sebelumnya dan pada gambar konsep di atas, bahwa pada tutorial ini saya akan memberikan cara bagaimana membuat header yang menjadi 2 bagian. Header kiri akan ada widget header (Title - Desc) dan Header kanan akan dibuat menjadi widget tempat Ads.

Pada dasarnya, CSS yang digunakan agar header kiri dan kanan saling bersebelahan yaitu float:left; untuk element kiri dan float:right untuk element kanan.

Pada tutorial ini kita akan menggunakan persentase (%) pada ukuran width agar mudah dibuat responsive. Tempat kedua header akan di buat full (100%). Header 1 berukuran < 35% dan Header 2 berukuran < 65%. 

Pada editor template, berikan CSS berikut tepat di atas */ ]]></b:skin>
#header-wrapper{
width:100%;
clear:both;
}
#header1{
width:30%;
float:left;
}
#header2{
max-width:65%;
float:right;
}
#header2 img{max-width:100%;}
CSS di atas terlihat bahwa header1 berukuran 30% dan berada di kiri, dan header2 berukuran 65% dan berada di kanan.

oia lupa dengan ini
.header{padding:5px;}
Saatnya mainkan HTML
Karena header akan tepat paling atas, kita akan buat di dalam #wrapper-utama yang paling atas
cari kode <div id='wrapper-utama'> kemudian letakkan kode berikut tepat dibawahnya
<header id='header-wrapper'>
<b:section class='header' id='header1'>
<b:widget id='Header1' locked='true' title='Indonesian Blogger Tutorial (Header)' type='Header'></b:widget>
</b:section>
<b:section class='header' id='header2' showaddelement='yes' max-widgets='1'></b:section>
</header>
Penjelasan: 
1. Widget harus berada pada b:section
2. max-widgets='1' berarti hanya boleh 1 widget dalam b:section\
3. showaddelement='yes' artikan sendiri hehe

Tambahan (Membuat Navigasi)
Oia, sebelumnya berikan css 
<div class='clear'/>
tepat di atas </header> agar tidak ada element lain yang masuk ke element header

Untuk membuat navigasi silahkan letakkan CSS berikut tepat di atas */ ]]></b:skin>
ul#mainMenu {
margin: 0 auto;
overflow: hidden;
text-align: left;
padding:0px;
}
ul#mainMenu li {
cursor: pointer;
display: inline-block;
list-style-type: none;
}
ul#mainMenu li a{
display: inline-block;
padding: 5px 6px;
color: #000000;
cursor: pointer;
font: 14px/25px 'OpenSansExtrabold', Arial, Helvetica, sans-serif;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}
ul#mainMenu li a:hover{background:#E54210;color:#fff;}
.tumpasMenu{border-top: 1px solid #EAEAEA;
margin: 0 auto;border-bottom: 3px solid #E54210}
Kemudian letakkan HTML berikut tepat di atas </header>
<div class='clear'/>
<nav class='tumpasMenu'>
<ul class='dNone' id='mainMenu'>
<li class='menuNews'><a href='/' title='Home'>Home</a></li>
<li class='menuNews'><a href='http://facebook.com/novalbs' title='Facebook'>Facebook</a></li>
<li class='menuNews'><a href='http://twitter.com/novalbintangs' title='Template'>Twitter</a></li>
<li class='menuNews'><a href='/p/tentang-tumpas.html' title='Tentang Tumpas'>About</a></li>
<li class='menuNews'><a href='/p/submit-artikel.html' title='Submit Artikel'>Submit</a></li>
<li calss='menuNews'><a href='/p/jasa-design-blog.html' title='Jasa'>Jasa</a></li>
</ul>
</nav>
  <div class='clear'/>
Silahkan lihat hasilnya di tata letak :)


Artikel selanjutnya: Membuat Sidebar dan Post


0 komentar "1.1. Membuat Header Template Blogspot", Baca atau Masukkan Komentar

Post a Comment