Thứ Hai, 3 tháng 9, 2012

Các thành phần trong template blogger


Bài viết này liệt kê các thành phần cần có của 1 blog. Các bạn có thể tuỳ chỉnh hoặc để nó mặc định.
Tạo hộp search.
vị trí: thường đặt ở top hoặc thanh menu ngang.

<div id='search'>

<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' id='searchform' method='get'>

<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search my site...&quot;;}' onfocus='if (this.value == &quot;Search my site...&quot;) {this.value = &quot;&quot;}' type='text' value='Search my site...'/>

<input id='searchsubmit' type='submit' value=''/>

</form>

</div>


<head> & Tiêu đề <title>
<!-- các thẻ ở phần <head> -->

<b:include data='blog' name='all-head-content'/>

<title>

 <b:if cond='data:blog.homepageUrl == data:blog.url'>

  <data:blog.title/>

 <b:else/>

  <data:blog.pageName/> | <data:blog.title/>

 </b:if>

</title>
Thiết kế CSS
<b:skin>
<![CDATA[
/*Thiết kế CSS tại đây*/
]]></b:skin>

BlogArchive
Vị trí: thường đặt ở sidebar.
<b:section>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>

Page Menu
Vị trí: thanh ngang, ngay dưới banner.
<b:section id='pages' maxwidgets='1' showaddelement='no'>
<b:widget id='PageList1' locked='false'  type='PageList'/>
</b:section>

Phần nội dung.
Có chức năng:
  • liệt kê (show) tất cả các bài viết:
    • tiêu đề.
    • nội dung.
    • thông tin người gửi, comment, nhãn.
  • hiển thị chi tiết 1 bài viết.
    • tiêu đề.
    • nội dung
    • thông tin người gửi, comments, thuộc nhãn.
    • hiển thị chi tết các comments.
      • chi tiết từng comment.
      • form gửi comment
    • thanh điều hướng tới bài khác.
Toàn bộ chức năng chỉ gói gọn trong đoạn code dưới đây :D.
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Đây là code sử lý mặc định của template blogger. Nếu bạn muốn tuỳ chỉnh thì nhớ chọn vào Expand Widget Templates để xem đầy đủ code.

PopularPosts (Xem nhiều nhất)
Widget các bài viết phổ biến được xem nhiều nhất.
Mặc định:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
Đầy đủ:
<ul>

      <b:loop values='data:posts' var='post'>

      <li>

        <b:if cond='data:showThumbnails == &quot;false&quot;'>

          <b:if cond='data:showSnippets == &quot;false&quot;'>

            <!-- (1) No snippet/thumbnail -->

            <a expr:href='data:post.href'><data:post.title/></a>

          <b:else/>

            <!-- (2) Show only snippets -->

            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            <div class='item-snippet'><data:post.snippet/></div>

          </b:if>

        <b:else/>

          <b:if cond='data:showSnippets == &quot;false&quot;'>

            <!-- (3) Show only thumbnails -->

            <div class='item-thumbnail-only'>

              <b:if cond='data:post.thumbnail'>

                <div class='item-thumbnail'>

                  <a expr:href='data:post.href' target='_blank'>

                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

                  </a>

                </div>

              </b:if>

              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            </div>

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

          <b:else/>

            <!-- (4) Show snippets and thumbnails -->

            <div class='item-content'>

              <b:if cond='data:post.thumbnail'>

                <div class='item-thumbnail'>

                  <a expr:href='data:post.href' target='_blank'>

                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

                  </a>

                </div>

              </b:if>

              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

              <div class='item-snippet'><data:post.snippet/></div>

            </div>

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

          </b:if>

        </b:if>

      </li>

      </b:loop>

    </ul>

    <b:include name='quickedit'/><!-- can edit on interface -->



Danh mục.
Liệt kê các danh mục categories.
<b:widget id='Label1' locked='false' title='Category List' type='Label'/>

Hiển thị ngày tháng của bài viết.
<b:if cond='data:post.dateHeader'>
<script>document.write("<data:post.dateHeader/>");</script>
</b:if>

Link tiêu đề của bài viết.
<b:if cond='data:post.title'>
    <h2 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
</b:if>


0 nhận xét:

Đăng nhận xét

 
Copyright © hoangit