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

Thêm box thông tin bài viết đẹp cho blogspot

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi TrollVL, 30/10/13.

Lượt xem: 4,343

  1. TrollVL Thành viên cấp 2

    Như mặc định các thông tin trong bài viết như tên tác giả, thời gian đăng bài, nhãn đều nằm ở cuối bài viết. Để tạo ra sự khác biệt hơn chúng ta sẽ cho những thông tin trên vào một box nhìn cho chuyên nghiệp và đặt box này lên phía trên bài viết, như vậy người đọc có thể nắm rõ hơn về các thông tin liên quan đến bài viết.

    [​IMG]

    Demo
    Thực hiện
    Bước 1: Tìm trong template đoạn code sau
    Code:
    <a expr:name='data:post.id'/>
    Bạn sẽ tìm được 2 đoạn code như trên và dán sau nó đoạn code thứ 2 bạn tìm được code bên dưới
    Code:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='box-info'>
    <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
    <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
    &#187;
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <span typeof='v:Breadcrumb'>
    <a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
    <b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if>
    </b:loop>
    <b:else/>
    &#187;Unlabelled
    </b:if>
    &#187; <span><data:post.title/></span>
    </b:loop>
    </div>
    <div class='thumbnail-info'>
    <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
    <b:else/>
    <img alt='no image' class='post-thumbnail' src='https://googledrive.com/host/0Bz_65BAr9KCZMk5fWGQ5SDUzOUU'/>
    </b:if>
    </div>
    <div class='info-box'>
    <ul>
    <li>Title : <data:post.title/></li>
    <li>Author : <span class='post-author vcard'> <span class='fn'><data:post.author/></span></span></li>
    <li>Date : <a class='updated timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></li>
    <li>Labels : <span class='post-labels'>
            <b:if cond='data:post.labels'>       
              <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></li>
    </ul>
    </div>
    </div>
    </b:if>
    Do khung code của diễn đàn không hỗ trợ sử dụng màu sắc nên mình không thể hướng dẫn cụ thể chi tiết từng thành phần trong đoạn code trên được. Nếu bạn muốn tìm hiểu rõ hơn để tùy chỉnh box cho phù hợp hơn cho blog của mình thì bạn có thể truy cập trực tiếp vào bài viết hướng dẫn trên blog của mình tại đây
    Bước 2: Tìm thẻ sau trong template
    Code:
    ]]></b:skin>

    Và dán trước nó đoạn CSS sau:
    Code:
    .box-info, .ndpost{border:1px solid #323232;background:#161616;background-image:-moz-linear-gradient(#161616,black);background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#161616),to(black));background-image:-webkit-linear-gradient(#161616,black);background-image:-o-linear-gradient(#161616,black);background-image:-ms-linear-gradient(#161616,black);-pie-background:linear-gradient(#161616,#000);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:10px;overflow:hidden}
    .thumbnail-info{float:left;padding:5px;background-color:black}
    .thumbnail-info img{border:0}
    .info-box{float:left;color:white;width:560px}
    .info-box ul{margin:0;padding:0}
    .info-box li{list-style:none;padding:3px 10px}
    Nếu nắm một chút về CSS bạn có thể tùy chỉnh style cho box phù hợp hơn với blog của mình. Chúc bạn thành công!

    ...
    mgrPhạm Hữu Dư thích bài viết này.
  2. love_computer2

    love_computer2 Mới đăng kí

    mình muốn thêm những thông tin khác vào có đc không nhỉ
  3. TrollVL

    TrollVL Thành viên cấp 2

    love_computer2 tất nhiên là được nhưng trước hết bạn phải biết rằng mình đang làm gì
  4. love_computer2

    love_computer2 Mới đăng kí

    TrollVL pác đừng làm e sợ nha. nghe có vẻ nghiêm trọng quá vậy. làm gì là sao pác
  5. TrollVL

    TrollVL Thành viên cấp 2

  6. love_computer2

    love_computer2 Mới đăng kí

    câu hỏi của pác làm em thấy không ổn
Từ khóa:

Ủng hộ diễn đàn