Cách tạo thêm 3 cột tiện ích dưới chân trang Blog

Theo Bloger Tricks cách tạo thêm 3 cột tiện ích dưới chân trang BlogSpot bạn làm như sau.

Bạn đăng nhập vào Blog > Mẫu > Chỉnh sửa HTML > Tiếp tục > Check vào mở rộng mẫu tiện ích, bạn tìm thẻ ]]></b:skin> và dán Code sau vào trước nó.

/*-----   LOWER SECTION   ----- */


#lower {

       margin:auto;

       padding: 0px
0px 10px 0px;

       width: 100%;

      background:#333434; }

#lower-wrapper {

       margin:auto;

       padding: 20px
0px 20px 0px;

       width: 960px;
}

#lowerbar-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;

}

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

       color:#0084ce;        
text-transform:uppercase;

      font: bold 14px Arial,
Tahoma, Verdana;        border-bottom:3px
solid #0084ce; }

.lowerbar ul {

      margin: 0px 0px 0px
0px;

      padding: 0px 0px
0px 0px;

      list-style-type:
none;

}

.lowerbar li {

      margin: 0px 0px 2px
0px;

      padding: 0px 0px
1px 0px;

      border-bottom: 1px dotted
#ccc;

}

Bước tiếp theo bạn tìm thẻ này </body> và dán Code sau vào trước nó.

<div id='lower'>

<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1'
preferred='yes'>

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

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

Sau đó bạn có thể tùy chỉnh giao diện, màu sắc cho phù hợp với Blog của bạn ở các tham số tô màu phía trên.
#333434 : Màu nền của tiện ích.
960px : Chiều rộng của tiện ích.
#fff : Màu nền của 3 cột tiện ích.
32% : Chiều rộng của 3 cột tiện ích.
#0084ce : Màu tiêu đề của 3 cột tiện ích
font: bold 14px Arial,Tahoma, Verdana; border-bottom:3px: Kích thước phông chữ của tiện ích.
#0084ce : Màu đường viền khung tiện ích.
#ccc : Màu đường viền liên kết của tiện ích.

Dưới đây là hình ảnh ví dụ về 3 cột tiện ích đã được tạo.

Chúc các bạn vui vẻ.

Posted in: Thủ thuật Blog