Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Tạo khung Thông tin tác giả dành cho Blogspot - Blogger Author Box

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi Phạm Hữu Dư, 6/9/13.

Lượt xem: 9,307

  1. Phạm Hữu Dư phamhuudu.com

    Rất nhiều website con thuộc hệ thống mình đã dùng Blogspot, 1 nền tảng web hoàn toàn miễn phí và đa năng của Google! Và những website con này thường mình tuyển nhiều Cộng tác viên để viết bài, phát triển web! Ví dụ như Việt Font, Việt Cover,...

    Tuy nhiên Blogspot không có sẵn khung Thông tin dành cho mỗi tác giả mà bắt buộc ta phải tùy biến vào! Việc thêm khung tác giả giúp cho website trở nên chuyên nghiệp hơn, và các tác giả cộng tác viên cũng cảm thấy hào hứng hơn vì mỗi bài viết của mình đều có phần giới thiệu thông tin tác giả.

    Mình có xem nhiều bài hướng dẫn tạo khung thông tin tác giả rồi, tuy nhiên có 1 cách mà mình rất ưng ý và sử dụng nó cho hệ thống website sử dụng nền tảng Blogspot của Việt Designer. Bởi vì nhìn nó đơn giản và dễ tùy chỉnh :)

    Và hôm nay mình xin chia sẻ bài hướng dẫn dành cho những ai đang tập tành Blogspot.

    Trước tiên mới các bạn xem hình ảnh Demo:
    [​IMG]

    Khi áp dụng nó vào Việt Cover
    [​IMG]

    Bạn có thể xem demo trực tiếp tại đây: http://cover.vietdesigner.net/2013/08/cover-thang-6-co-gai-cua-thang-6.html

    OKAY! Ta bắt đầu bài hướng dẫn luôn nhé!

    Bước 1: Đầu tiên ta vào phần chỉnh sửa template, và tìm đến đoạn:
    Code:
    ]]></b:-skin>
    Sau khi tìm ra vị nó nằm ở đâu, bạn dán đoạn CSS này ở phía trên của nó:
    Code:
    .author-box{background:#CFCFCF;width:570px border:1px dashed #999; margin-top:20px; overflow:hidden; padding:10px}
    .avatar-author{border:1px solid #888; float:left; padding:5px}
    .info-author{float:right; width:483px}
    .info-author h2{font-size:18px}
    Bước 2: Việc đơn giản cuối cùng đó là bạn đưa đoạn code sau đây đến bất cứ chỗ nào mà bạn muốn chèn khung thông tin tác giả:
    Code:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
                                        <div class='author-box'>
                                            <b:if cond='data:post.author == &quot;Thay tên tác giả vào đây&quot;'>
                                                <img class='avatar-author' height='80' src='Hình tác giả' width='80'/>
                                                <div class='info-author'>
                                                    <h2>Thông tin tác giả:<a href='Link 
    	
    website của tác giả' target='_blank'>Tên tác giả</a></h2>
                                                    <p>Lời giới thiệu</p>
                                                </div>
                                            </b:if>
                                        </div>
                                    </b:if>
    Thường thì đoạn code Thông tin tác giả này được chèn ở 1 trong những đoạn sau trong template của bạn:
    Code:
    <div class='post-footer-line post-footer-line-1'>
    Hoặc
    Code:
    <div class='post-footer-line post-footer-line-2'>
    Hoặc
    Code:
    <div class='post-footer-line post-footer-line-3'>
    Hoặc nếu template của bạn không có 3 đoạn trên, thì chèn vào dưới đoạn:
    Code:
    <data:post.body/>
    Lưu 1 số điều:
    1. Phần thay tên tác giả vào đây là bạn sẽ chèn tên profile của tác giả đó vào, nếu bạn điền không đúng tên thì khung tác giả sẽ không xuất hiện.
    2. Cứ mỗi 1 tác giả là bạn phải tạo 1 đoạn code riêng, và điền đầy đủ info, link, avatar của người vào.
    3. Tùy vào mỗi template, bạn có thể tùy chỉnh bố cục màu sắc của khung tác giả tùy theo ý thích ở phần CSS nhé!
    Chúc các bạn thành công!!! Mãi mà mình vẫn chưa có 1 bài viết chính thức giới thiệu về Blogspot, hẹn 1 ngày đẹp trời mình sẽ viết bài giới thiệu về mã nguồn blog tuyệt vời này cho những ai thích vọc phá web có thể tham khảo thêm :D

    Bài viết trên có tham khảo từ tác giả Yolks

    ...
    Nguyễn Tôm, JusTa Khôi, Hồng Sơn3 người khác thích bài viết này.
  2. JusTa Khôi

    JusTa Khôi Thành viên cấp 3

    Thêm nhiều bài về blog nữa đi anh ơi :D
  3. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Chắc chắn rồi JusTa Khôi ;)
    Mà nếu trong quá trình hiểu trên Google có bài nào hay cũng nhớ chia sẻ lên diễn đàn nhé, đang cần nhiều những bài viết hay về web/blog :D
    JusTa Khôi thích bài viết này
  4. nguoinhobe

    nguoinhobe Mới đăng kí

    như có lỗi rồi anh ơi, blog của em mienphiphanmem. blogspot.com cấu trúc có <div class='post-footer-line post-footer-line-1'> mà làm như hướng dẫn thì vẫn không show ra dược author như bài viết của anh, anh có thể check lại được không ?
  5. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    nguoinhobe ko show ra đc chỉ có 2 lý do, 1 là đặt ở chỗ ko hiện ra đc, 2 là điền thông tin author sai, cố gắng check lại đi! Bài hướng dẫn trên ko có sai chỗ nào đâu :)
  6. banbaonylong

    banbaonylong Ko phải assmin

    chèn tay kiểu này cực hen, ko có query lấy info ra tự điền vào :P
  7. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

  8. banbaonylong

    banbaonylong Ko phải assmin

    uh, hơi gò bó nên ko thích :(

    vậy là cứ nhìu tác giả thì lặp lại số bước cho mỗi thằng author đúng hem? :D
  9. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Chuẩn banbaonylong :D

    Nó gò bó, nhưng nếu biết tùy biến thì từ 1 cái blog thô kệch, ta có thể biến nó thành website chuyên nghiệp ấy chứ :D
  10. dinhhiep36

    dinhhiep36 Thành viên cấp 1

    theme này nhìn khó quá, tìm cái nút theo dõi để bookmark lại mà không thấy đâu hết
  11. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    dinhhiep36 ý bạn là sao mình ko hiểu?
  12. dinhhiep36

    dinhhiep36 Thành viên cấp 1

    ý mình là muốn Subscribe để lưu trữ những bài viết có ích, sau này vào tài khoản kiếm cho dễ đó mà
  13. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    dinhhiep36 mà bạn nói theme này là theme nào?
  14. dinhhiep36

    dinhhiep36 Thành viên cấp 1

    ah, không có gì đâu bạn.

    Mình có làm thử theo cách này nhưng cái css author-box nó không nhận bạn ah ?

    Code:
    http://dihisi.
    	
    blogspot.com/2013/12/tang-sach-quan-tri-ngan-hang-thuong-mai.html
  15. Trần Bá Đạt

    Trần Bá Đạt Thành viên cấp 2

    Code:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='author-box'>
      <b:if cond='data:post.author == &quot;Trần Bá Đạt&quot;'>
      <img class='avatar-author' height='80' src='https://lh5.googleusercontent.com/-XkPo-DXSLq4/AAAAAAAAAAI/AAAAAAAAAFI/x8-vIJYHi00/s120-c/photo.jpg' width='80'/>
      <div class='info-author'>
      <h2>Facebook của tác giả<a href='https://www.facebook.com/tranba.dat.1' target='_blank'>Trần Bá Đạt</a></h2>
      <p>ABCDXYZ gì đó </p>
      </div>
      </b:if>
      </div>
      </b:if>
    
    A Phạm Hữu Dư E thay vào code của a như thế này, nhưng cho vào blogspot thì không xuất hiện gì cả x_x

Ủng hộ diễn đàn