Car Reviews

Auto Show

Sự kiệnThông tinChi tiết
Vietnam Motor Show 20165/10 đến 9/10 tại I.C.E, 91 Trần Hưng Đạo, Hà Nội Tham gia
Vietnam International Motor Show 201626/10 đến 30/10 tại SECC, 799 Nguyễn Văn Linh, Sài Gòn Tham gia

Tuesday, August 13, 2013

Code ở chân bài viết trong mẫu simple template của blogspot

Với tất cả các mẫu Simple của blogger cuối mỗi bài đăng sẽ có một hệ thống các thành phần phụ như: tên tác giả, tên nhãn, nút chia sẻ, nút đánh giá bài viết,... Vậy khi bạn muốn xóa hoặc cho thêm những thành phần này thì phải làm sao. Rất đơn giản chỉ cần xóa hoặc thêm nó vào thoi. bài viết sau đây sẽ giúp bạn làm được điều đó một cách đưn giản.

Chia sẻ:
Code ở chân bài viết trong mẫu simple template của blogspot
Đây là một số code trong các mẫu mặc định của blogger mà có thể nhiều người chưa biết. Các code này được blogger sử dụng để trang trí phần chân mỗi bài viết trong blog của bạn.

Với tất cả các mẫu Simple của blogger cuối mỗi bài đăng sẽ có một hệ thống các thành phần phụ như: tên tác giả, tên nhãn, nút chia sẻ, nút đánh giá bài viết,... bạn có thể xem chúng ở hình dưới.
Code ở chân bài viết trong mẫu simple template của blogspot
Các thành phần tồn tại ở chân mỗi bài viết.
Vậy khi bạn muốn xóa hoặc cho thêm những thành phần này thì phải làm sao. Rất đơn giản chỉ cần xóa hoặc thêm nó vào thoi. bài viết sau đây sẽ giúp bạn làm được điều đó một cách đơn giản.

» Code tác giả:

- Khi sử dụng code này thì cuối mỗi bài viết của bạn sẽ hiển thị một mục là bài viết được đang bởi tác giả nào đó....
<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </span>
            <b:else/>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <span itemprop='name'><data:post.author/></span>
              </span>
            </b:if>
        </b:if>
      </span>

» Code thời gian đăng bài:

- Đây là đoạn code hiển thị thời gian đăng bài của bạn. Gồm giờ, phút đăng bài; ngày tháng đăng bài và năm bạn đăng bài viết đó. Phần này để người đọc có thể biết được bài viết của bạn được đăng lúc nào. Phần này rất quan trọng nếu trang của bạn là trang tin tức.
<span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span>

» Code đánh giá.

- Đây là đoạn code để người đọc đánh giá về bài viết của bạn xem nó thú vị, hấp dẫn hay dở ẹc,.... Hiện nay không nhiều trang sử dụng tiện ích này vì nó không hỗ trợ nhiều cho seo và khá nặng khi tải trang của bạn.
<span class='reaction-buttons'>
        <b:if cond='data:top.showReactions'>
          <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
            <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
              <span class='reactions-label'>
              <data:top.reactionsLabel/></span>&#160;</td>
            <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
           </tr></table>
        </b:if>
      </span>
Code đánh giá:
<span class='star-ratings'>
        <b:if cond='data:top.showStars'>
           <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
        </b:if>
      </span>

      <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <b:include data='post' name='comment_count_picker'/>
            </b:if>
          </b:if>
        </b:if>
      </span>
- Code back link nếu bạn bật trong bài viết.
<!-- backlinks -->
       <span class='post-backlinks post-comment-link'>
         <b:if cond='data:blog.pageType != &quot;item&quot;'>
           <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
             <b:if cond='data:post.showBacklinks'>
               <a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
             </b:if>
           </b:if>
         </b:if>
       </span>

» Code nút chia sẻ bài đăng:

- Đoạn code này sẽ hiển thị các nút chia sẻ bài viết lên các mạng xã hội. Kiểu chia sẻ này không được đẹp và tiện cho lắm nên nếu có thể hãy sử dụng các nút chia sẻ của riêng bạn,
<span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

» Code chỉnh sửa nhanh bài viết hình bút chì:

- Đoạn code này sẽ giúp hiện thị một nút chỉnh sửa nhan bài viể cuối trang của bạn. hoặc cuối bài viết. Bạn có thể xóa nó đi vì để nó không có lợi nhiều cho SEO và không chuẩn HTML5.
<!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span>
- Code nút chia sẻ:
<!-- share buttons -->
      <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div>

» Code tên nhan:

- Đoạn code này sẽ hiển thị tên nhãn bài viết của bạn. Tất nhiên nó sẽ không hiển thị gì nếu bạn không gắn nhãn cho bài viết của bạn.
<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>
Chúc bạn thành công.

42 nhận xét:

  1. giúp e tạo 3 widget ở chân footer blog e vs anh Nam
    http://khanhal.blogspot.com/

    ReplyDelete
  2. Replies
    1. a xem giùm e, màu nền của footer nó rộng cả màn hình làm sao cho nó có độ rộng như content-wrapper. Giúp e tạo suppor-wrapper như a luôn

      Delete
    2. hình như mẫu của e ko có bố cục content-warapper nên nó mới rộng ra vả màn hình thì phải

      Delete
    3. Không ohair đâu em. Em thử sửa:

      #footer{width:1033px;margin:0 auto;padding:0}

      thành:

      #footer{background:#33332e;width:1033x;margin:0;color:#8f887c;position: relative;word-wrap:break-word}
      #nav-footer

      và thay:{width:1033px;margin:0 auto;padding:0}

      thay dòng:

      <div id='footer'>
      <div id='nav'>

      thành:

      <div id='footer'>
      <div id='nav-footer'>

      Delete
    4. ko phải đâu anh, e chèm 3 widget vào
      <div id='footer'>
      <div id='nav'>
      giờ ok rồi, thks anh nhiều nhé

      Delete
  3. anh tại sao khi chia sẻ 1 bài nào thì ảnh thumbnail đại diện là cái logo chứ nó ko phải là cái ảnh đầu tiên, nó bị sao vậy a

    ReplyDelete
    Replies
    1. Em áp dụng thủ thuật này nha: Tối ưu thẻ Title trong Blogspot cho Search Engine

      Và các hình ảnh khi đăng bài phải tải lên host picasa hoặc blog của em nha.

      Delete
    2. ảnh bài nào e cũng đăng lên picasa anh à, ko hiểu sao cứ share qua facebook hoặc google+ ảnh thumbnail đại diện là nó là cái logo, anh coi có cách nào khắc phục ko

      Delete
  4. Cho mình hỏi blog đã có bài viết hướng dẫn cách làm như này chưa nhỉ? http://i.upanh.com/vasnfo
    Khi viết bài gửi đi nó tự Xuất hiện chỗ tìm kiếm như trong hình

    ReplyDelete
  5. cô muốn cắt mấy ô phản ứng vui nhộn , hấp dẫn mà không biết là cái nào NK ơi! Blog thiên đường của cô, cô lấy ô tìm kiếm bài đăng trong blog , giờ không tìm được bài đăng trong blog , không hiểu là cô bị mất đi code nào cháu biết thì chỉ giúp cô nhé ! Cảm ơn cháu . Cả tiện ích nâng cấp thông kê blog ,như số lượt xem , số bài viết , số comments trong blog hồng anh ảnh , lần đầu tiên làm được nhưng không hiện số bài viết . nên cô gỡ đi làm lại , đến bước hai thay đoạn mã số lượt xem trang thì không sao lưu được cháu ạ.

    ReplyDelete
    Replies
    1. Muốn cắt hiệu ứng nào thì cô chỉ cần xóa code hiệu ứng đó trong bài viết trên đi thôi cô ak.

      Blog thiên đường của cô cháu thấy khung tìm kiếm vẫn chạy tốt mà,

      - Về tiện ích thống kê có thể cô copy thiếu hoặc xóa nhầm code cô tải lại trang và làm lại là oke mà.

      Delete
  6. ảnh bài nào e cũng đăng lên picasa anh à, ko hiểu sao cứ share qua facebook hoặc google+ ảnh thumbnail đại diện là nó là cái logo, anh coi có cách nào khắc phục ko

    ReplyDelete
    Replies
    1. Em dán vào sau thẻ head code sau xem sao nha:

      <b:include data='blog' name='all-head-content'/>
      <meta content='article' property='og:type'/>
      <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
      <meta expr:content='data:blog.title' property='og:site_name'/>
      <meta expr:content='data:blog.pageName' property='og:title'/>
      <b:if cond='data:blog.metaDescription != ""'>
      <meta expr:content='data:blog.metaDescription' name='description'/>
      </b:if>
      <b:if cond='data:blog.pageType == "index"'>
      <b:if cond='data:blog.pageType == "item"'>
      <title><data:blog.pageName/> | <data:blog.title/></title>
      <b:else/>
      <title><data:blog.pageTitle/> |MÔ TẢ BLOG ....</title>
      </b:if>
      <b:else/>
      <title><data:blog.pageName/> | <data:blog.title/></title>
      </b:if>

      Delete
  7. Anh nam ơi anh có code nào dùng để đăng ký gia sư -
    -gia đình đăng ký và giao viên đăng ký đi dạy ấy
    em tìm mãi mà tim không được anh ạ .
    anh xem có không share cho em với
    hoặc chỉ cho em với
    tks anh !

    ReplyDelete
  8. anh Nam ơi làm thế nào để hiển thị sô bài trên index ạ.. template của em hiện có 4 bài là sao ạ
    http://share68.blogspot.com/

    ReplyDelete
    Replies
    1. Hiện tại anh vào thấy nó hiển thị đầy đủ mà em.

      Delete
  9. hình thức na ná trang :http://giasungoaithuong.com.vn/tim-gia-su/
    đó anh

    ReplyDelete
    Replies
    1. Cái đó đang ký ở trang http://www.deliciousdays.com/cforms-plugin/ nhưng mất phí em ak.

      nếu thích em hãy dùng google documents vì nó hoàn toàn miễn phí.

      Delete
  10. Namkna ơi giúp em tạo widget thêm tiện ích chỗ này dùm em
    http://2.bp.blogspot.com/-jEVhPGSxq6k/UhSUQav_b0I/AAAAAAAAAZM/Yawei50FBe8/s1600/themtienich.bmp
    Cám ơn anh nhiều

    ReplyDelete
    Replies
    1. Cách đơn giản nhất là em là theo bài thêm tiện ích dưới header TẠI ĐÂY

      Delete
  11. ko có code hả anh vì em muốn thêm 1 ô riêng luôn vì theme của em phần header chỉ đặt menu với tên thôi nó rất nhỏ , nên em muốn thêm 1 ô thêm tiện ích mới khác
    Sù sao cũng cám ơn anh

    ReplyDelete
    Replies
    1. Đây nha em: Dán vào vị trí em muốn
      <b:section class='new-widget' id='new-widget2' preferred='yes'>
      </b:section>

      Delete
  12. mình muốn bỏ dòng Subscribe to: Posts (Atom) ở phía dưới phần bác đang hướng dẫn đây thì làm thế nào, trong sample theme ạ.

    ReplyDelete
    Replies
    1. Làm tương tự bạn ak. Về cơ bản các code đó tương tự như trong bài này

      Ngoài ra bạn có thể tham khảo bài viết bên dưới nha: Mẹo nhỏ khi thiết kế template cho Blogspot

      Delete
  13. Chào bác.
    Bác có thể chỉ mình cách làm 1 trang lấy giá trị sản phẩm trong 1 blogspot được không?

    ví dụ trang này mình muốn lấy giá trị tiền
    http://johny-blackstore.blogspot.com/

    mình muốn hiểu cơ chế của nó

    ReplyDelete
  14. a ơi.cho e xin cái mã code của cái khung có 4 nút like face,g+,twier,share với
    mã code này thì đặt vào đâu vậy a

    ReplyDelete
  15. anh ơi em làm theo anh hướng dẫn mà sao ko dk ,em chèn code sửa bài bút chì lên trc code (viết liền nó báo lỗi HTML j j đó @@) như anh nói rồi bấm lưu mẫu xong rồi vào bài xem mà ko thấy có j hết nó vẫn như cũ @@ (em là Tan Le đây anh) :D

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. code div j j đó mà anh nói ý (em viết ra ko dk nó ko hiện vs báo lỗi) ,em chèn code sửa bút chì trc code đó rồi xong lưu mẫu rồi vào blog mà vào bài ko thấy hiện cái j cả :( ,mong anh giúp em với ạ ^^

      Delete
    3. Nó có 2 đoạn div như anh nói nha em. một đoạn chỉ hiện ở giao diện điện thoại thôi, nếu không báo lỗi và không hiển thị thì em chèn nhầm rồi em làm lại với đoạn khác nha :)

      Delete
    4. dạ anh ơi em làm dk cái bút chì rồi :D ,nhưng bây h em muốn làm 1 cái box thông tin như trong bài này nè anh :D : http://www.trollvl.com/2013/10/them-box-thong-tin-bai-viet-vao-blogspot.html ,em có làm rồi ,nó hiện ok ,nhưng mà nó lại ở đầu bài @@ ,vậy anh có cách nào cho nó xuống cuối bài dk ko ạ :) ,tks anh :)

      Delete
    5. Em chỉ cần dán đoạn code của thủ thuật đóa vào sau một trong các đoạn bên dưới nha e:

      Đoạn 1:

      <div class='post-footer'>

      Đoạn 2:

      <div class='post-footer-line post-footer-line-1'>

      Đoạn 3:

      <div class='post-footer-line post-footer-line-2'>

      Đoạn 4:

      <div class='post-footer-line post-footer-line-3'>

      Delete
    6. Cách chèn tương tự như bài viết này em ak:

      Delete
    7. dạ tks anh :D để em thử xem sao rồi sẽ báo cáo lại vs anh liền ạ :)

      Delete
  16. blog của em dung tem có sẵn làm sao để khôi phụ thêm các thuộc tính này vậy demo: datlun.com mong bác online chỉ bảo

    ReplyDelete
  17. vui lòng giúp mình với, mình tìm mãi mà không ra các đoạn code mà bạn chỉ để xóa nó đi. mình muốc xóa các thành phần này nè (Được đăng bởi Đồng Thanh vào lúc 06:59 Không có nhận xét nào) ở cuối mỗi bài đăng. mà không tìm ra đoạn code để xóa. mình hiểu cách hứng dẫn của bạn nhưng tìm code không ra. có cách nào tìm code nhanh không ? xin cảm ơn

    ReplyDelete