Free Facebook Fans
Thank's    About Me Suatu pembelajaran Otodidak tanpa komersial semata, satu kuncinya : KEMAUAN dan BELAJAR    Contemplations Panduan Praktis Belajar Design dan SEO    FB onk009@yahoo.com    twitter @onkdesign
Obrolan

Widget 3 Kolom Dibawah Header

Untuk mempercantik tampilan blog salah satu caranya adalah menambah widget dibawah header. Dan kali ini ada 3 kolom yang akan terpasang jika pemasangan kode css-nya benar. Langkahnya adalah :

  • Silahkan login ke blogger;


  • Pilih Rancangan;

  • Pilih tab Edit HML;

  • Jangan di klik Expand Template Widget;

  • Letakkan kode css berikut ini 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/he...) 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/AVvXsEipLNbVyeRFjTZAbopdCUTtDzYWp-k-yD1RYisZJXTTyJH2Yb0m8xX4Th9CGo6vAhJkHj2ugESeAgwtWuF_7yXGFCqIBqiaJkeDkdQhpnieAuf-okJkmNhyphenhyphen04AZ9xIfWS1YqBVdI-I9CDx5/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;
}

  • Cari kode yang mirip seperti 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>

  • Kemudian letakkan kode berikut ini tepat setelah kode diatas;

<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>
  • Simpan Template dan lihat hasilnya. 

Semoga bermanfaat....!!!!

0 komentar:

Posting Komentar

  • description
  • description
  • description
  • description
  • description
  • description
  • description
  • description
  • description
  • description
  • description
  • description

Contact Me

Name
Email
Country
Age
Subject
Message
Mau pasang widget seperti ini, silakan klik disini
© Kang Onk Design | Free

Free Link Exchange For You

Mau pasang widget seperti ini, silakan klik disini
© Kang Onk Design | Free
Follow us?