Thêm ba cột Widget dưới cho blogger

Được viết bởi: Unknown 0 nhận xét

Demo

Demo Online

 Thêm widget cột chuyên nghiệp trong blogger,tuy nhiên mình nhìn thấy nhiều template blogger chuyên nghiệp cũng không có nhiều widget footer.Hôm nay mình share widget chứa ba cột một cách riêng biệt, để cho bạn có thêm tiện ích dễ hơn

+ Đăng nhập Blogger tìm  ]]></b:skin>

và thêm vào trước nó đoạn code sau

#vusteven { 
       margin:auto; 
       padding: 0px 0px 10px 0px; 
       width: 100%; 
       background:#333434; }  
#vusteven-wrapper { 
       margin:auto; 
       padding: 20px 0px 20px 0px; 
       width: 960px; 
} 
#vusteven-bar-wrapper { 
     border:1px solid #DEDEDE; 
       background:#fff;        float: left; 
       margin: 0px 5px auto; 
       padding-bottom: 20px;        width: 32%;        text-align: justify; 
       font-size:100%; 
       line-height: 1.6em; 
       word-wrap: break-word;  
       overflow: hidden; 
} 
       .vusteven-bar {margin: 0; padding: 0;} 
       .vusteven-bar .widget {margin: 0; padding: 10px 20px 0px 20px;} 
.vusteven-bar h2 { 
      margin: 0px 0px 10px 0px; 
       padding: 3px 0px 3px 0px; 
       text-align: left; 
       color:#0084ce;         text-transform:uppercase; 
      font: bold 14px Arial, Tahoma, Verdana;        border-bottom:3px solid #0084ce; } 
.vusteven-bar ul { 
      margin: 0px 0px 0px 0px; 
      padding: 0px 0px 0px 0px; 
      list-style-type: none; 
} 
.vusteven-bar li { 
      margin: 0px 0px 2px 0px; 
      padding: 0px 0px 1px 0px; 
      border-bottom: 1px dotted #ccc; 
}

+ Tim </body>
thêm vào trước nó đoạn code sau

<div id='vusteven'> 
<div id='vusteven-wrapper'> 
<div id='vusteven-bar-wrapper'> 
<b:section class='vusteven-bar' id='lowerbar1' preferred='yes'> 
</b:section> 
</div> 
<div id='vusteven-bar-wrapper'> 
<b:section class='vusteven-bar' id='lowerbar2' preferred='yes'> 
</b:section> 
</div> 
<div id='vusteven-bar-wrapper'> 
<b:section class='vusteven-bar' id='lowerbar3' preferred='yes'> 
</b:section> 
</div> 
<div style='clear: both;'/> 
</div> </div>

Chúc các bạn thành công