Được tạo bởi Blogger.

Độc giả phản hồi

Tin bài mới nhất

(HN) - (TP.HCM)

BẢN QUYỀN

CÔNG NGHỆ

RSS

Thứ Sáu, 10 tháng 4, 2015

Đâ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.
Code ở chân bài viết

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.

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.

Thứ Tư, 8 tháng 4, 2015

Trước đây mình đã từng viết 1 bài viết hướng dẫn thiết kế template blogger. Sau 1 thời gian trôi đi, bài viết được copy ra rất nhiều nơi nhưng dường như hiệu quả mà nó đem lại vẫn chưa như mình mong đợi nên hôm nay mình viết bài viết này vẫn với mục đích giúp bạn "Tự tạo nên website mang phong cách riêng của mình" nhưng sẽ ở mức độ chi tiết hơn rất nhiều.
Cấu trúc 1 trang web



1. Một số lưu ý trước khi bắt đầu
» Để có thể tự thiết kế ra giao diện mang phong cách riêng của chính mình thì đòi hỏi bạn phải hiểu về css. Nếu không biết gì về css thì bạn hãy đọc hết bài viết TỰ HỌC CSS TOÀN TẬP để có thể hình dung ra CSS là gì. Và mình khẳng định lại 1 lần nữa. Chỉ khi bạn biết CSS bạn mới có thể thiết kế ra được 1 website mang phong cách riêng của mình.

» TUYỆT ĐỐI KHÔNG THIẾT KẾ NGAY TRÊN TRANG BLOG CHÍNH CỦA MÌNH. Hãy tạo 1 trang blog mới và thiết kế trên đó. Sau khi hoàn thành hãy đem giao diện đó về sử dụng ngay trên blog chính của mình.

» Trên bài viết này mình sẽ không đề cập nhiều đến css. Mọi vấn đề liên quan đến trang trí blog bạn đọc qua bài viết TỰ HỌC CSS TOÀN TẬP và tùy biến theo ý của mình nha.

» Trước khi thiết kế bạn nên phát thảo ra giấy về hình dạng trang blog mình mong muốn sẽ như thế nào. Việc này giúp bạn định hình được việc chính mình cần phải làm là gì, tránh lang mang không biết phải làm gì.

» KIÊN NHẪN LÀM TỪ TỪ. Không thể làm xong 1 website chỉ trong vài tiếng được đâu bạn àh. Với khả năng hiện tại của mình thì nhanh lắm mình cũng phải mất 2 - 3 ngày mới xong được 1 trang web, nên đòi hỏi bạn phải kiên nhẫn 1 tí. 
 2. Chuẩn bị:
Bạn cần phải trả lời hết các câu hỏi sau: 
» Bạn đã phát thảo giao diện web mình mong muốn ra giấy chưa? Nếu chưa thì lấy giấy viết ra phát thảo sơ bộ đi. Mình đảm bảo chỉ với trí tưởng tượng thì bạn không thể thiết kế được như ý đâu.

» Phát thảo xong rồi đúng không? Vậy blog của bạn có bao nhiêu module chính tất cả? Module chính là module sẽ chứa các module nhỏ bên trong. Header (phần đầu blog), 2 Sidebar (2 thanh công cụ trái phải), Main (module chứa bài viết), Footer (Chân blog)... còn gì nữa không? Xem hình bên dưới bạn sẽ hiểu module chính là gì. 
Theo hình bên trên thì mình muốn blog của mình bao gồm 3 phần chính: 
» Ở đầu trang là header.
» Ở giữa gồm 3 phần là 1 sidebar bên trái (sidebar1) 1 sidebar bên phải (sidebar2) và phần nội dung bài viết ở giữa.(post)
» Ở cuối trang là footer.
Tất nhiên đây chỉ là những module lớn. Bên trong mỗi module lớn này sẽ còn được chia thành nhiều module nhỏ nữa.

3. Tiến trình thiết kế template blogger: mỗi thành phần bên dưới mình sẽ đưa vào 1 bài viết và hướng dẫn chi tiết hơn. Bạn nên làm từng bước từ trên xuống dưới đừng đốt giai đoạn, xảy ra lỗi mình không chịu trách nhiệm đâu àh.

1. Cấu trúc cơ bản của template blogger.
2. Tạo thẻ meta description và title cho website.
3. Xây dựng cấu trúc website của bạn.
4. Sidebar toàn tập.
5. Header toàn tập.
6. Main toàn tập. (Bài quan trọng nhất)
7. Footer toàn tập.

4. Túm lại:
Về cơ bản template blogspot chỉ có bao nhiêu đó thôi. Ngoài ra cũng chẳng còn gì nữa.
Tiếp theo là bạn áp dụng những thủ thuật khác để tạo ra những nét đặc trưng riêng cho blog của mình là được rồi.

Xem qua chắc chắn bạn sẽ nghĩ trong đầu "blog gì mà thấy gê" :D nhưng thật sự thì không gê đâu bạn. Blog hiện tại mình đang dùng cũng từng trãi qua những lúc ghê như zậy đó.
Nguyên nhân nhìn thấy gê là do trong bài hướng dẫn này mình chưa xài nhiều những thuộc tính css. Bài viết này mình chỉ đề cập đến việc tạo ra và nắm bắt được cấu trúc template của mình thôi.
Việc trang trí là sao cho đẹp là ở chổ bạn có thật sự sáng tạo khi kết hợp các thuộc tính css lại với nhau hay không thôi.
 5. Bonus 1 số class và id mặc định blogger tạo ra.
Bằng cách chỉnh sửa css cho các class và id này bạn cũng sẽ tùy biến được khá nhiều thứ đó.
  h1 /* đây là thẻ chứa tiêu đề của blog */
.description /* đây là class chứa mô tả mặc định của blog */
.post /* đây là class post chỉ chứa nội dung của bài viết (không có comment) */
.post h3  /* đây là thẻ h3 của class post chứa tiêu đề bài viết */
.comments /* đây là class chứa nội dung toàn bộ comment */
.widget h2  /* đây là thẻ h2 của class widget chứa tiêu đề các tiện ích */
.widget-content /* đây là class chứa nội dung các widget (không có tiêu đề) */

Và vấn đề cuối cùng. Nếu quá trình thiết kế có vấn đề gì thì đừng ngại để lại comment bên dưới mình sẽ hồi âm trong thời gian sớm nhất có thể. Chúc bạn thành công và có được một ngôi nhà trực tuyến như mơ ước! 
Tác giả bài viết: Võ Quốc An