Hướng dẫn tạo nhiều kiểu tiêu đề widget trên một blog

Mới nghe đến tiêu đề của bài viết này, có nhiều bạn sẽ không hiểu "các kiểu tiêu đề widget" là cái gì ?.Nhưng nói một cách cho dễ hiểu đó chính là trên cùng một blog của bạn, bạn có thể làm nhiều kiểu khung chứa tiêu đề của tiêu đề của wiget bạn tạo, mà không làm ảnh ảnh đến các widget khác

Lấy một ví dụ cho dễ hiểu nhé (Xem hình sau)

Một số kiểu tiêu đề widget của các Blogger

Hoặc bạn cũng có thể xem demo tại : XzipVN.Com
Làm xong thủ thuật này bạn có thể sữ dụng một trong số kiểu tiêu đề widget mà bạn tạo.Trong bài hướng dẫn này, mình sẽ cài thêm các kiểu tiêu đề như hình minh họa trên

I.Chèn code CSS
1.vào Thiết kế
2.Vào chỉnh sữa HTML (không mở rộng tiện ích)
3.Tìm đoạn code sau (hoặc tương tự)

/* The Sidebar */
.sidebar{
float:left;
width:330px;
padding-top:5px;
font-family:Tahoma,Georgia,Century gothic, Arial, sans-serif;
}

.sidebar h2 {
line-height:30px;
font-size:13px;
color:#ffffff;
margin:5px 0 0px 0 ;
padding:0px 0 0 5px;
background:#141313;
font-weight:bold;
font-family:Tahoma ,Century gothic,Verdana,Tahoma,sans-serif;
text-transform:none;
}

Trong đoạn code trên, phần đánh dấu màu đỏ chính là code hiển thị tiêu đề của widget, để thêm các kiểu khác bạn chỉ cần thêm sau nó các đoạn code sau :

/* The Sidebar */
.sidebar{
float:left;
width:330px;
padding-top:5px;
font-family:Tahoma,Georgia,Century gothic, Arial, sans-serif;
}

.sidebar h2 {
line-height:30px;
font-size:13px;
color:#ffffff;
margin:5px 0 0px 0 ;
padding:0px 0 0 5px;
background:#141313;
font-weight:bold;
font-family:Tahoma ,Century gothic,Verdana,Tahoma,sans-serif;
text-transform:none;
}

.sidebar h3 {
font: bold 14px/100% Arial, Helvetica, sans-serif;
color: #8a0000;
position:relative;
display:block;
height: 18px;
position:relative;
margin:0;
padding: 3px 0px 0px 7px;
background:#efefef url(widget/ảnh.gif) no-repeat ;
margin-top: 0px;
}
.sidebar h4 {
margin:2px 2px 3px 2px;
padding:7px 0 7px 32px;
text-transform:uppercase;
font-size:12px;
font-weight: bold;
background:#fffff1 url(http://thethao.zing.vn/news/Themes/Default/images/tab_barother.gif) no-repeat; color:#cc0000;
}

Trong đoạn code phía trên mình có thêm 2 phần tử là sidebar h3 và sidebar h4.Bạn cần nhớ rõ các dòng h2, h3, h4 để thuận tiện cho việc chỉnh sữa sau này.Lưu ý ở đoạn code trên h2 là kiểu hiện thị mặc định, h3 là kiểu hiển thị của XzipVN.Com, h4 là kiểu hiển thị của Vnblognet.Com

II.Tùy chỉnh
1.Tìm ID của widget mà bạn cần thay đổi kiểu hiển thị tiêu đề
Thường ID của widget thường xuất hiện ở cuối địa chỉ của widget .Ví dụ như widget bên dưới ID của nó chính là dòng chữ được đánh dấu mà xanh (HTML31)

Sau khi xác định được ID của widget cần thay đổi bạn vào phần chỉnh sữa HTML , nhập tìm ID của widget mà bạn mới xác định , Code sẽ có dạng :

<b:widget id='HTML31' locked='false' title='Hình ảnh' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Thay đổi dòng code màu đỏ cho ứng với kiểu mà bạn muốn hiển thị .Ví dụ bạn muốn thay đổi sang kiểu hiển thị của Vnblognet bạn chỉ cần thay đổi code trên thành:

<b:widget id='HTML31' locked='false' title='Hình ảnh' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h4 class='title'><data:title/></h4>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Tương tự như vậy bạn có thể thay đổi sang các kiểu hiển thị khác nữa
Chúc các bạn thành công !!!