Hướng dẫn tạo nhiều kiểu tiêu đề widget trên 1 blog/web - 18 May 2010 - All 4 You
Thursday, 23-Mar-2017, 8:18 PM
Welcome Guest | RSS
Main » 2010 » May » 18 » Hướng dẫn tạo nhiều kiểu tiêu đề widget trên 1 blog/web
11:10 AM
Hướng dẫn tạo nhiều kiểu tiêu đề widget trên 1 blog/web

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

http://www.kidspublicradio.org/asheardon.jpg

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)

http://blog.xzipvn.com/img/baiviet/id.JPG

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 !!!
Category: Design | Views: 661 | Added by: all4u | Tags: giao diện | Rating: 0.0/0
Total comments: 2
2  
that the look great and feel great. Usually good quality goes<a href="http://dwcroghnk.com"> ttgeoher</a> with high price , nevertheless, the price of are very reasonable to your surprise. That is to say, sells the high quality products with the low price. North Face clearance for womens ,mens and kids with great quality could be found during North Face clearance period. They offers all kinds of which are in reasonable price and best after-sale service. are built into ranges of colors such as black, grey,chocolate, orange, chestnut, gold and sand and they are sold at different prices depending on the color you choose. feature a flexible rubber sole in order to provide people the maximum comfortableness. If you wear with proper care, the clothes will last for several years. Last but not least, can help you make a unique fashion statement because they go perfectly with other garments.

1  
Wow! Great thniking! JK

Only registered users can add comments.
[ Registration | Login ]
Login Form
Nhận bài qua Email


Đăng ký để nhận thông tin
và bài post mới nhất qua email

Chuyên mục
Toàn tập Dmon/ Ucoz [22]
Hướng dẫn thiết kế website với dịch vụ của Dmon.com/ Ucoz.com,...
Code [18]
Các code giúp bạn cá nhân hóa trang web của bạn
Design [21]
Các công cụ web giúp thiết kế web....
Featured Post - Image Gallery [15]
Menu [5]
Các Menu đẹp cho web của bạn
Tab Content [6]
Templates [3]
Toàn bộ thiết kế Template
Khác [0]
Rearch
Thống kê

Total online: 1
Guests: 1
Users: 0
Bản đồ truy cập
Locations of visitors to this page