Senin, 19 Desember 2011

buat 5 colum dibawah/diatas posting blog

posting saya kali ini adalah cara buat 5 colum dibawah/diatas ( header / footer ) posting blog karana ini pasti sangat bermanfa'at bagi para blogger dimana ingin menempatkan suatu widget.jadi blog sobat tidak kalah menarik dengan blog lainnya oke tanpa basa-basi kita mulai aja tutornya ya adapun caranya sebagai berikut :
letakkan kode dibawah ini tepat diatas kode : /*---Outer---*/ 
                                                                      #outer-wrapper


/*Boxwrap2*/
#boxwrap2 {background:#333;padding:5px;margin:5px auto;text-align:left;-moz-border-radius:10px;}
#boxwrap2 h2{height:18px;color:#333;background:#777;background:-moz-linear-gradient(top,#ccc,#666);text-shadow:0px 1px 1px #eee;margin:0px;padding:5px 0px;font:14px trebuchet ms;font-weight:bold;border-bottom:1px solid #161616;-moz-border-radius:5px}
#boxwrap2 #box1 {width:190px;float:left;padding-left:0px;text-align:left;}
#box1 .widget {padding:0px 0px 0px 0px}
#boxwrap2 #box2 {width:190px;float:left;padding:0px 5px 0px 5px;text-align:left;}
#box2 .widget {padding:0px 0px 0px 0px}
#boxwrap2 #box3 {width:190px;float:left;padding:0px;text-align:left;}
#box3 .widget {padding:0px 0px 0px 10px;}
#boxwrap2 #box4 {width:190px;float:left;padding:0px;text-align:left;}
#box4 .widget {padding:0px 0px 0px 10px;}
#boxwrap2 #box5 {width:200px;float:left;padding:0px;text-align:left;}
#box5 .widget {padding:0px 0px 0px 10px;}

keterangan kode warna kuning itu adalah lebar dari masing-masing gadget silahkan rubah aja sesuai dengan blog sobat.
kemudian letakkan kode dibawah ini tepat diatas kode : <div id='footer'> atau <div id='main-wrapper'>


<div id='boxwrap2'>
<div id='box1'>
<b:section class='box1' id='box1' preferred='yes'/>
</div>
<div id='box2'>
<b:section class='box2' id='box2' preferred='yes'/>
</div>
<div id='box3'>
<b:section class='box3' id='box3' preferred='yes'/>
</div>
<div id='box4'>
<b:section class='box4' id='box4' preferred='yes'/>
</div>
<div id='box5'>
<b:section class='box5' id='box5' preferred='yes'/>
</div>
<div style='clear:both;'/>
</div>

keterangan : kalo kode diatas diletak diatas kode <div id='footer'> berarti posisinya di bawah postingan atau        
                   difooter.
                   kalo kode diatas diletak diatas kode <div id='main-wrapper'> berarti posisinya diatas postingan                          
                  atau dibawah header.
oke,gimana cukup mudah bukan....semoba totorial ini dapat bermanfa'at buat para blogger.

0 komentar:

Posting Komentar