Thêm Widget cho blogger

 Hôm nay mình giới thiệu cho bạn một thủ thuật blogger,thêm nhiều cột widget dưới chân blogspot,trước đây mình cũng đã chia sẻ một hướng dẫn thêm ba cột widget cho blogger,thủ thuật này giúp bạn thêm nhiều tiện ích cho blogger,để biết thêm bốn widget vào blog như thế nào thì cùng mình tìm hiểu thủ thuật blogspot này nhen.

- Đăng nhập Blog -- Mẫu -- Chỉnh sửa HTML -- Tìm ]]></b:skin> và thêm đoạn code sau vào trước nó:

/*----- Vusteven -----*/
#lower { 
margin:auto; 
padding: 0px 0px 10px 0px; 
width: 100%; 
background:#333333; 
} 
#lower-wrapper { 
background:#333333; 
margin:auto; 
padding: 20px 0px 20px 0px; 
width: 960px; 
border:0; 
} 
#lowerbar-wrapper { 
background:#333333; 
float: left; 
margin: 0px 5px auto; 
padding-bottom: 20px; 
width: 23%; 
text-align: justify; 
color:#ddd; 
font: bold 12px Arial, Tahoma, Verdana; 
line-height: 1.6em; 
word-wrap: break-word; 
overflow: hidden; 
} 
.lowerbar {margin: 0; padding: 0;} 
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} 
.lowerbar h2 { 
margin: 0px 0px 10px 0px; 
padding: 3px 0px 3px 0px; 
text-align: left; 
border:0; 
color:#ddd; 
text-transform:uppercase; 
font: bold 14px Arial, Tahoma, Verdana; 
} 
.lowerbar ul { 
color:#fff; 
margin: 0 auto; 
padding: 0; 
list-style-type: none; 
} 
.lowerbar li { 
display:block; 
color:#fff; 
line-height: 1.6em; 
margin-left: 0 !important; 
padding: 6px; 
border-bottom: 1px solid #222; 
border-top: 1px solid #444; 
list-style-type: none; 
} 
.lowerbar li a { 
text-decoration:none; color: #DBDBDB; 
} 
.lowerbar li a:hover { 
text-decoration:underline; 
} 
.lowerbar li:hover { 
display:block; 
background: #222; 
}

- Tìm </body> và thêm đoạn code sau vào trước nó:

<div id='lower'> 
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='Vusteven 1' preferred='yes'> 
</b:section> 
</div>

<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='Vusteven 2' preferred='yes'> 
</b:section> 
</div>

<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='Vusteven 3' preferred='yes'> 
</b:section> 
</div>

<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='Vusteven 4' preferred='yes'> 
</b:section> 
</div>

<div style='clear: both;'/> 
</div> </div>

Lưu lại và kiểm tra kết quả 

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