Prosedur Modifikasi MINIMA (III)

Merombak susunan Header.

Pada kesempatan Prosedur Modifikasi Minima (III) kali ini kita akan membahas bagaimana kita merombak susunan headernya, yang semula utuh akan kita bagi menjadi dua ruang.

Langkah yang harus kita lakukan adalah mengganti susunan Header Minima asli dari :

/* Header
-----------------------------------------------
*/

#header-wrapper {
...... dst ..... s/d ......


#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

dengan kode dibawah ini :

#header {
background: #ff55dd url(http://i288.photobucket.com/albums/ll179/ahnning/hdbg.png);
width: 980px;
height: 100px;
color: #FFF;
font-size: 11px;
margin: 0;
padding: 0;
overflow: hidden;
}
#header-inner {
background-position: left;
background-repeat: no;
}
#header h1 {
color: #FFF;
font-size: 36px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 15px 0 0 20px;
text-decoration: none;
}
#header h1 a, #header h1 a:visited {
color: #FFF;
font-size: 36px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
}
#header h1 a:hover {
color: #FFF;
text-decoration: none;
}
#header h3 {
color: #A91B33;
font-size: 16px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 0;
padding: 0;
}

#header p {
color: #FFF;
padding: 0 0 5px 20px;
margin: 0;
line-height: 20px;
}

.headerleft {
width: 480px;
float: left;
font-size: 14px;
margin: 0;
padding: 0;
}

.headerleft a img {
border: none;
margin: 0;
padding: 0;
}

.headerright {
width: 486px;
float: right;
margin: 0;
padding: 18px 0 0;
font-weight: bold;
}
.headerright a img {
border: 1px solid #FFF;
margin: 0 0 3px;
padding: 0;
}
#header .description {
color: #A91B33;
font-size: 16px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin-left: 25px;
padding: 0;
}


Kemudian kita juga akan menambahkan Nav bar dibawah header dengan menambahkan kode dibawah ini :


/*navigasi
-----------------------------*/


#NavbarMenu {
background: #bd027d;
width: 980px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px;
padding: 0px;
}

}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0px;
padding: 0px;
}

#NavbarMenuright {
width: 300px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 0px 0px 0px;

}
#nav {
margin: 0px;
padding: 0px;
}

#nav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#nav li {
list-style: none;
margin: 0px;
padding: 0px;
}

#nav li a, #nav li a:link, #nav li a:visited {
color: #f9ea01;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0px;
padding: 9px 15px 8px 15px;
}

#nav li a:hover, #nav li a:active {
background: #EBE6D4 url(images/navhov.png);
color: #495D5C;
margin: 0px;
padding: 9px 15px 8px 15px;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #E1DCCA;
width: 150px;
color: #495D5C;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0px;
padding: 7px 10px 7px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#nav li li a:hover, #nav li li a:active {
background: #85ACAC;
color: #FFFFFF;
padding: 7px 10px 7px 10px;
}

#nav li {
float: left;
padding: 0px;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#nav li li {
}

#nav li ul a {
width: 140px;
}

#nav li ul a:hover, #nav li ul a:active {
}

#nav li ul ul {
margin: -32px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
position: static;
}

#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE !important;
width: 220px;
color: #202020;
font-size: 12px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-weight: normal;
margin: 0;
padding: 4px 0 3px 5px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;
}
#searchbutton {
background: #fc06b9;
color: #FFF;
font-size: 11px;
font-family: Georgia, Times New Roman, Trebuchet MS;
margin: 0 0 0 5px;
padding: 3px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#subscribe {
margin: 0;
padding: 5px 0 0;
overflow: hidden;
}
#subbox {
background: #EEE !important;
width: 200px;
color: #202020;
font-size: 12px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-weight: normal;
margin: 5px 0 0;
padding: 3px 0 3px 5px;
border-top: 1px solid #666;
border-right: 1px solid #DDD;
border-left: 1px solid #666;
border-bottom: 1px solid #DDD;
display: inline;
}
#subbutton {
background: #f9099c;
color: #FFF;
font-size: 11px;
font-family: Georgia, Times New Roman, Trebuchet MS;
margin: 0 0 0 7px;
padding: 3px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#name, #email, #url {
background: #EEE !important;
width: 250px;
color: #202020;
font-size: 12px;
font-weight: normal;
margin: 5px 0 0;
padding: 3px 0 3px 5px;
border-top: 1px solid #666;
border-right: 1px solid #DDD;
border-left: 1px solid #666;
border-bottom: 1px solid #DDD;
display: inline;
}
#submit {
background: #000000;
color: #FFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
margin: 0;
padding: 3px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#words {
background: #EEE;
width: 460px;
color: #202020;
font-size: 12px;
font-weight: normal;
margin: 5px 0 0;
padding: 3px 0 3px 5px;
border-top: 1px solid #666;
border-right: 1px solid #DDD;
border-left: 1px solid #666;
border-bottom: 1px solid #DDD;
display: inline;
}
#subnavbar {
background: #666666;
width: 980px;
height: 24px;
color: #FFFFFF;
margin: 0px 0px 2px 0px;
padding: 0px;
}

#subnav {
margin: 0px;
padding: 0px;
}

#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
margin: 0px 5px 0px 0px;
padding: 6px 13px 6px 13px;
}

#subnav li a:hover, #subnav li a:active {
background: #85ACAC;
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 6px 13px 6px 13px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #666666;
width: 140px;
float: none;
margin: 0px;
padding: 6px 10px 6px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background: #85ACAC;
margin: 0px;
padding: 6px 10px 6px 10px;
}

#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}

#subnav li li {
}

#subnav li ul a {
width: 140px;
}

#subnav li ul a:hover, #subnav li ul a:active {
}

#subnav li ul ul {
margin: -25px 0 0 161px;
}

#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}

#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}

#subnav li:hover, #subnav li.sfhover {
position: static;
}


Langkah selanjutnya adalah merubah susunan kode pada body :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'/>
</div>

dengan kode dibawah ini :

<div id='header'>

<div class='headerleft'>
&lt;img src=&quot;http://i288.photobucket.com/albums/ll179/ahnning/header-CA-animasi.gif&quot; border=&quot;0&quot; alt=&quot;Photobucket&quot;&gt;
</div>

<div class='headerright'>

&lt;script type=&#39;text/javascript&#39;&gt;&lt;!--
google_ad_client = &quot;pub-7181952237540333&quot;;
google_ad_host = &quot;pub-1556223355139109&quot;;
/* 468x60, created 6/18/08 */
google_ad_slot = &quot;5864627181&quot;;
google_ad_width = 468;
google_ad_height = 60;
//--&gt;
&lt;/script&gt;
&lt;script src=&#39;http://pagead2.googlesyndication.com/pagead/show_ads.js&#39; type=&#39;text/javascript&#39;&gt;
&lt;/script&gt;

</div>

</div>


Headerleft pada magazine blogger "Edel2xMinima" merupakan background Animasi yang kita buat dengan Adobe Photoshop dan diupload di Photobucket dengan ukuran 475px X 100px (GIF). (akan dibahas selanjutnya bagaimana membuat Animasi header).

Headerrightnya merupakan kode Adsense dengan ukuran 468px X 60px


KODE TAMBAHAN NAVBAR DIBAWAH HEADER :

Selanjutnya kita tambahkan kode dibawah ini :

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='url anda'>Categori, misalnya Tutorial</a>
<ul>
<li><a href='url anda'>item tutorial anda</a></li>
<li><a href='url anda'>item tutorial anda</a></li>
<li><a href='url anda'>item tutorial anda</a></li>
</ul>
</li>
<li><a href='#'>item Post lainnya</a></li>
</ul>
</div>

<div id='NavbarMenuright'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='255' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search this website...&quot;;}' onfocus='if (this.value == &quot;Search this website...&quot;) {this.value = &quot;&quot;}' type='text' value='Search this website...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>

</div>
</div>

<div style='clear:both;'/>

<div id='subnavbar'>
<ul id='subnav'>
<li>
<a href='#'>Community Events</a>
<ul>
<li>
<a href='#'>Sub Category #1</a>
<ul>
<li>
<a href='#'>Sub Sub Category #1</a>
</li>
<li>
<a href='#'>Sub Sub Category #2</a>
</li>
<li>
<a href='#'>Sub Sub Category #3</a>
</li>
</ul>
</li>
<li>
<a href='#'>Sub Category #2</a>
</li>
<li>
<a href='#'>Sub Category #3</a>
</li>
</ul>
</li>
<li>
<a href='#'>item anda</a>
</li>
<li>
<a href='#'>item Anda</a>
</li>
</ul>
</div>

<div style='clear:both;'/>

Pemasangan kode diatas, dibawah kode header diatas dan diatas kode :

<div id='content-wrapper'>

Silahkan dimodifikasi sendiri, dan jangan putus asa.