Wednesday, August 17, 2011

Cara menambah 3 elemen di bawah header

Pada postingan kali ini akan membahas cara menambah 3 elemen di bawah header.
Langkah-langkahnya :

1. Masuk ke akun blog sobat.

2. Klik Rancangan.

3. Klik Edit HTML.

4. Cari kode ]]></b:skin>
Untuk mempermudah pencarian tekan ctrl+f.

5. Copy kode dibawah ini dan pastekan diatas kode ]]></b:skin>.


/* –- Top --*/#top {background:#fff;margin-top:10px auto;width:960px;overflow:hidden;font-size:12px;padding:10px;}
#top h2 {background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;font-size:14pt;font-weight:400;text-align:center;font-style:normal;line-height:1.3em;color:#fff;padding:5px;margin-top:-10px;margin-left:-10px;margin-right:-10px;}           
#top ul {color:#333;margin:0;padding:0;}
#top ul li {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsPa7d78ll4lD5DOxMyzQ2sQ4PuuBjlneYbMXgLH_jk0y8fO50juLx_12b9Y0zkUpIShOpvAqIiddDv6VyVD7_rCjOQJAbt0MBwDSXOISn2SNBGtEpiEJnZM4ckef6G70-45xB72v6PfQw/s320/b3.gif) no-repeat;list-style-type:none;border-bottom:1px dashed #CCC;margin:0 0 10px;padding:0 0 5px 20px;}
#top ul li a:hover {margin:0px 0px 5px;padding:0px;}
#topcenter {width:300px;float:left;margin-left:10px;background:#fff;padding:10px}
#topleft {width:280px;float:left;margin-left:10px;background:#fff;padding:10px;}
#topright {width:280px;float:right;margin-left:10px;background:#fff;padding:10px;}

6. Cari kode yang mirip dengan kode dibawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDUL BLOG SOBAT (Header)' type='Header'/>        
</b:section></div>
7.  Kemudian copy kode dibawah ini dan pastekan dibawah kode pada langkah No.6.

<div id='top'>
<b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>
</b:section><b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>
</b:section><b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>
</b:section>
</div>
Sehingga kodenya menjadi

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDUL BLOG SOBAT (Header)' type='Header'/>           
</b:section></div>
<div id='top'>
<b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>
</b:section><b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>
</b:section><b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>
</b:section>
</div>
8. Klik Simpan Template.

No comments:

Post a Comment