Membuat Tiga Kolom Widget Dibawah Header Blog

Membuat Tiga Kolom Widget Dibawah Header Blog - Membuat tiga kolom widget bukanlah hal yang sulit bagi para master master design dunia blogger. Tapi tidak untuk para pemula termasuk saya untuk membuatnya. Pada dasarnya Tiga kolom widget yang akan saya share ini bertujuan untuk memper ramai blog agan sekalian yang ingin menampilkan ikalan ataupun widget untuk mempercantik blog, tetapi kolom pada sidebar sudah sangat banyak menyita ruang. Tiga kolom widget berikut mungkin dapat menjadi salah satu alternative. Berikut cara Membuat Tiga Kolom Widget Dibawah Header Blog.

1. LogIn dulu pada akun blogger agan.
2. Langsung menuju Tab Rancangan >> Template >> Edit HTML.
3. Cari kode ]]></b:skin> Dan letakkan Style berikut tepat diatasnya.

/* –- 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/AVvXsEhMLa78Z__8FknNXvdAO_UtnhdQfnShMmkG5XvmU7g273La0xvLFTlZVBcsWWNNDtUBcd4vP5_vZiyFjFv18MXRcT_JBXEejQDL18-7OMWsV0T8jwnoFZtVPVchpYu9T32lYfaCFtyApwBh/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;

}

 Catatan: Kode warna merah adalah lebar setiap kolom widget.

4. Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>.

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='JUDUL BLOG ANDA (Header)' type='Header'/>

</b:section>

</div>

 5.  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>

6. Simpan template agan dan lihat hasilnya. :)


Demikian Sepenggal artikel saya yang berjudul Membuat Tiga Kolom Widget Dibawah Header Blog Semoga bermanfaat bagi nusa dan bangsa ini :D (lebuaay) Wassalam...


Thx God!!!