kali ini trik nya ada cerewet dikit seja.. tapi kalau korang benar2 mahu belajar di dunia bloging ini mesti rajin membaca, mesti rajin mencari info, mesti rajin menaip dan berfikir,menulis.. uii.. banyak.. apa yang pentink di dunia bloging inii adalah mesti RAJIN!! eya kalau malas2 blog nya jadi lemah. jadi kali ini akan dikongsikan sedikit trik atau teknik bagaimana cara Buat widget 3 kolom pada blog korang. silakan tutorialnya ada dibawah ini.
Cara Buat Widget 3 kolom dibawah header
Cara Buat Widget 3 kolom dibawah header
- Login ke blog.
- klik Tamplate.
- Pilih tab Edit HML.
- Jangan klik Expand Template Widget..
- Letakkan kode dibawah ini diatas kode ]]></b:skin> untuk memudahkan carian sila ( ctrl+F).
/* –- 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/AVvXsEgVr_aVqri-T7-Bz-bM_6qaRV_asu-4Az2yfVCftO2iPGsu9ekof9WP9ZG2T8pGeguAiv_TSypYHBMDyRsfctwbWLy6E3JPdOmAHWmjYPAbefDXDXu1x1JDQ4SEI8f022dOZEGKv7_G1dMv/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 seperti dibawah ini, biasanya dibawah </head>
<div id='header-wrapper'>
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' BLOG TITLE HERE' (Header)'
type='Header'/>
</b:section>
</div>
7.Kemudian letakkan kode berikut ini tepat sesudah 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>
8.Save Template!
Ya semoga bermanfaat semua..
Selamat mencuba..
Ya semoga bermanfaat semua..
Selamat mencuba..
){kind=link}
Tiada ulasan:
Catat Ulasan