Làm tiêu đề widget bằng hình ảnh

Khi bạn thiết kế blog, chắc chắn bao giờ bạn cũng sẽ thêm tiện ích (widget) ở sidebar cho blog của mình. Bạn muốn đọc giả biết chức năng của tiện ích đó như thế nào thì thường viết tiêu đề cho tiện ích đó. Nhưng thường những tiêu đề này trông rất đơn điệu, không bắt mắt lắm vì font của nó rất là hạn chế.

Vậy có cách nào làm cho nó hấp dẫn hơn? Chúng ta sẽ sử dụng hình ảnh để thay thế cho các tiêu đề ở sidebar. Đối với những bạn rành về đồ họa, chẳng hạn như photoshop thì để tạo ra những ảnh đẹp là hết sức dễ dàng. Nhưng những người không có kỹ năng đồ họa như mình thì sao? Chúng ta vẫn có cách để làm cho tiêu đề ở sidebar độc đáo hơn. Xem DEMO ở ngay trang này.

Đầu tiên các bạn vào trang này.

Các bạn sẽ thấy giao diện như thế này:

Chọn font chữ bạn thích, các bạn sẽ được đưa đến trang có giao diện như thế này:

Ở đây các bạn gõ dòng chữ bạn muốn tạo theo chĩ dẫn của mũi tên, bạn chọn màu sắc chữ, màu nền theo ý mình, xong chỉ cần bấm nút Create Logo phía dưới, bạn sẽ được chuyển đến trang tương tự như thế này

Click chuột phải vào tấm hình theo hướng mũi tên để save lại, xong bạn upload lên host nào đó để lấy link hình.

Cơ bản đã xong phần tạo hình ảnh. Bây giờ bạn tìm trong template đoạn mã tương tự như thế này:

<b:widget id='HTML1' locked='false' title='Recent comments' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

Bạn thay
<data:title/> bằng

<img alt='Đoạn text hiển thị tiêu đề' src='link ảnh'/>

Như vậy bạn muốn thay tiêu đề của tiện ích nào bạn cứ làm tương tự, chúc các bạn thành công.