Chèn Icon vào thanh thông tin bài viết và tiêu đề Wiget

(dang hienIT) - Như các bạn đã biết để có một Webblog mang phong cách chuyên nghiệp ngoài phần nội dung ra thì phần giao diện cũng không kém phần quan trọng. Sau đây mình xin hướng dẫn cách chèn Icon vào mục thông tin bài viết và tiêu đề Wiget. Thủ thuật này rất đơn giản với những các bạn nhưng có những bạn mới bắt đầu viết Blog thì ko làm được nên mình xin hướng dẫn lại.

* Chèn Icon vào thanh thông tin bài viết:

Để tạo được thanh thông tin giống như blog của mình các bạn làm như sau:
- Tìm đoạn code tương tự:

<div class="post-header-line-1">

- Sau đó chép đoạn code 1 vào ngay bên dưới đoạn code vừa tìm thấy.

* Code 1:

<script type='text/javascript'>
   var timestamp = &quot;<data:post.timestamp/>&quot;;
   if (timestamp != &#39;&#39;) {
  var timesplit = timestamp.split(&quot;,&quot;);
  var date_yyyy = timesplit[2];
  var timesplit = timesplit[1].split(&quot; &quot;);
  var date_dd = timesplit[2];
  var date_mmm = timesplit[1].substring(0, 3);
     }
    </script>
  <span class='month block'><img align='absmiddle' border='0' src='link icon cua ban'/><span class='day'><script type='text/javascript'>document.write(date_dd);</script> - </span><script type='text/javascript'>document.write(date_mmm);</script>, <script type='text/javascript'>document.write(date_yyyy);</script>
</span> |
<span class='post-author vcard' style='background:;'>
        <b:if cond='data:top.showAuthor'>

              <span class='author' style='background:;Padding-left:0px; font:lucida sans unicode; font-size:12px;'>
        <b:if cond='data:top.showAuthor'>
<img align='absmiddle' border='0' src='http://farm3.static.flickr.com/2670/3681437984_8c8daa0a99_o.png'/><a expr:href='data:blog.homepageUrl' id='s-nabar'>Home</a> | 
          <img align='absmiddle' border='0' src='link icon cua ban'/><span class='fn'><data:post.author/></span>
        </b:if>|
<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <img align='absmiddle' border='0' src='link icon cua ban'/><span class='fn'><data:postLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url+ &quot;?max-results=10&quot;' rel='tag'><data:label.name/></a> |<a expr:href='&quot;http://ten blog cua ban.blogspot.com/feeds/posts/default/-/&quot; + data:label.name' target='_blank'><img align='middle' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png'/></a> RSS
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
</span>
        </b:if>|
      </span> 
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<span class='comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <img align='absmiddle' border='0' src='link icon cua ban'/><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>
      </span>
  </b:if>
   </span> 
        </b:if>
      </span>

* Chú ý:
- Các bạn nhớ thay tên 'ten blog cua ban' bằng tên blog của bạn vào.
- 'link icon cua ban': Link icon của bạn
- Các bạn có thể tham khảo mẫu các icon tại: http://www.freeiconsweb.com/

* Chèn Icon vào thanh tiêu đề của Wiget:

Sau đây mình xin lấy hướng dẫn thủ thuật lấy ID của widget mà bạn cần chèn vào. ( Tham khảo tại FD BlOg)

- Trước tiên, bạn phải biết rõ vị trí code của các widget trong code template. Để xác định việc này, bạn phải xác định được ID của các widget đó và việc này cũng rất đơn giản, ví dụ : ta có tiện ích(widget) "Người theo dõi" (xem hình minh họa bên dưới)

Bạn nhấp chọn "Chỉnh sửa" sẽ hiện ra hộp thọai như bên dưới:

Phần khoanh tròn màu đỏ chính là ID của widget. Như vậy ta đã xác định được id của nó, bây giờ vào code template để xác định vị trí của nó (xem hướng dẫn bên dưới)

* Xác định code của widget trong code template:

1. Đăng nhập blog

2. Vào chỉnh sửa code HTML(edit code HTML), chọn mở rộng mẫu tiện ích (Expand Widget Templates).

3. Tìm đọan code như bên dưới, nó chính là code của widget "Người theo dõi" (có thể nhấn Ctrl +F rồi điền từ khóa "Followers2" để tìm).

Khi đã xác định được code của 1 widget, bây giờ ta bắt đầu vào thủ thuật, để đơn giản ta xét code của 1 widget HTML/Javascript (như bên dưới):

<b:widget id='HTML3' locked='false' title='' 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>

- Sau đó bạn chèn đoạn code bên dưới vào sau dòng:<data:title/>

<img border='0' height='10' src='link icon cua ban' width='30'/>

- Save template lại thế là xong rồi!

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

Chèn Icon vào thanh thông tin bài viết và tiêu đề Wiget