I Blogger Việt - Chia sẻ đam mê, kết nối ý tưởng.

Trong blogspot, việc phân trang đơn giản chỉ là: "Bài viết mới hơn, và bài viết cũ hơn", việc này gây nhàm chán, mất đi tính chuyên nghiệp hoặc thậm chí mất đi sự trải nghiệm của người dùng khi tìm kiếm vài viết trong blog của bạn.
Vậy để thay thế "Older Posts" (Bài đăng cũ hơn) hay "Newer Posts" (Bài đăng mới hơn) trong blogspot, Tạo phân trang trong blogspot để blog của bạn thể hiện được tính chuyên nghiệp chúng ta phải làm thế nào?
Trước tiên ta tìm hiểu phân trang (Page Navigation) trong blogspot là gì?

 Phân trang (Page Navigation), là thanh công cụ được đánh số để chia các bài viết trên trang chủ thành các trang khác nhau. Trong đó, số bài viết trên mỗi trang được người quản lý thay đổi theo ý thích.

Để tạo phân trang trong Blogspot, chúng ta thực hiện như sau:


Đầu tiên các bạn vào Blog nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </body>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </body>
Style 3:
[code type="CSS"]#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;} .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;} a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;} #blog-pager .pages{border:none;background: none;} [/code]
Style 4:
[code type="CSS"]#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}[/code]
Style 5:
[code type="CSS"]#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;} #blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}[/code]

Khi đã thực hiện qua 4 bài trong Seri hướng dẫn thiết kế một Template Blogger, các bạn đã bước đầu định hình được cách chia bố cục, cách thức hoạt động, cũng như thêm mới các widget.

Tiếp theo mình sẽ hướng dẫn các bạn làm sao để thu gọn bài viết trên trang chủ trong blogspot, vì qua 4 bài trước bạn nhận thấy các bài viết đang hiển thị  toàn bộ nội dung đến nỗi trang chủ trang blog của bạn nó quá dài và xấu xí.

Thôi, không dài dòng, mình cũng bắt đầu.

Chú ý; Trước khi thực hiện bất cứ 1 thủ thuật hay thay đổi nào trong Code Template Blogger của bạn, hãy sao lưu nó ra 1 bản để nếu bị lỗi thì bạn có thể hô phục lại được.
Xem thêm: cách sao lưu Template Blogger

Bạn hãy tìm đến thẻ <data:post.body/>. Thường sẽ có 2 đoạn code như vậy. Và nó sẽ là đoạn thứ 2 từ trên xuống.

Thay thế nó bằng đoạn code:
[code type="HTML"]<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Q5vqGjLdhVtJHksF1A9ukZov9lb4-mnmDMHZipfdWDncbMARrNGQ_dWnz9tYhsWHWzwU5ugGExuyfzUyWXJ3zhtEjiLcbv9VOUjiqdifdSn2RpHiPchTUHAvBbjlrUvIS-kHqYOfF0LD/s1600/no-image.png' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>[/code]
Lưu chủ đề để thấy kết quả

Với đoạn code trên : 
+ Thumbnail mặc định của blogger có kích thước là 72×72.
+ Số ký tự rút gọn được hiển thị là 140 ký tự

Với CSS thì tùy các bạn tùy chỉnh theo ý thích của mình, còn nếu không bạn có thể áp dụng mẫu CSS này để được đẹp hơn:

[code type="CSS"].post-outer { margin: 5px; background: #eff3dd; border: 1px solid #DEDEDE; }[/code]
Đây là đoạn code dùng các thẻ của blogspot mình dùng để tối ưu tốc độ load trang web của bạn, nhưng nó sẽ có 1 số hạn chế nhất định đó là kích thước là ảnh Thumbnail là 72×72 và số kí tự hiển thị là 140. Nếu bạn muốn nó có kích thước lớn hơn hoặc số ký tự nhiều hơn thì bạn có thể áp dụng 1 số thủ thuật trên mạng dùng Javascript, nhưng chắc chắn Javascript sẽ ảnh hưởng 1 phần đến tốc độ load trang của bạn.

Chúc bạn thành công!

Bên trong header thường chứa những thành phần sau:

[code type="HTML"] [/code]

Kết thúc bài viết Định hình cấu trúc HTML cho Template Blogspot ở phần trước, chúng ta đã cùng nhau thực hiện chia Blog thành 3 phần: header (Giống như Mở bài), 1 main content ( thân bài) và 1 footer

Chắc hẳn bạn đang thắc mắc, nhìn cái blog gì xuông xuông như cô gái 2 lưng vậy. Vậy để "Bơm" thêm phần thân cho main content thì ở bài Cách chia Main content làm 2 phần này , chúng ta sẽ cùng nhau thực hiện chia nó làm hai phần, 1 phần để để phần nội dung chính của Blog, 1 phần là Sidebar bên trái hoặc bên phải.

Phần Content thường chia làm hai là Left-Content (Nội dung bên trái) và Right-Content (Nội dung bên phải). Một trong 2 phần này sẽ chứa nội dung chính là các bài viết, phần còn lại chứa các nội dung phụ như tìm kiếm, các bài viết mới nhất, fanpage…

Đây là nội dung hiển thị trong phần Main Content

Nằm trong Serie Tự tay thiết kế template blogger và nối tiếp Bài 1: Việc Đầu Tiên Bắt Đầu Thiết Kế Một Template Blogger, chúng ta sẽ tiếp tục định hình cấu trúc HTML ( bộ khung cho trang Blog ) cho Template Blogger Blogspot.

Nếu bạn đã biết về HTML và CSS thì việc này khá đơn giản, với những bạn chưa hiểu về CSS thì có thể tham khảo trên mạng hoặc tại đây

Bắt đầu nhé, giống như 1 bài văn, chúng ta có đầu bài, thân bài và kết luận, từ đó chúng ta hình dung được bố cục trang Template blog của mình. Trong bài này, mình sẽ làm mẫu với bố cục trang blog gồm 1 khung header (Giống như Mở bài), 1 main content ( thân bài) và 1 footer (kết bài) bên dưới.

Phần I: Đầu tiên, ta sẽ có cấu trúc web như sau

<div class='wrapper'>
    <div class='header'>
        Đây là nội dung hiển thị trong phần Header
    </div>
    <div class='main-wrapper'>
        Đây là nội dung hiển thị trong phần Main Content
    </div>
    <div class='footer'>
        Đây là nội dung hiển thị trong phần footer
    </div>
</div>

Ở đây ta có class='wrapper' Bạn hình dung nó như 1 tờ giấy, bao quanh toàn bộ trang blog

Tiếp theo ta có class='header' bạn hình dung nó là phần mở bài cho blog.

Với class='main-wrapper' nó được đình hình như phần thân của blog.

và cuối cùng với class='footer' nó sẽ là phần chân trang của blog


Vậy ta sẽ chèn đoạn code trên vào đâu ở Template Blogspot của bạn?

Như cấu trúc ở bài 1 mình đã giới thiệu bạn có được cấu trúc như sau:

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
    <title>
        Tiêu đề trang web
    </title>
    <!-- Chú thích: Code Css cho Blog-->
    <b:skin>
        <![CDATA[ /* Viết mã Css tại đây */ ]]>
    </b:skin>
</head>
<!--Chú Thích:  Bắt đầu phần hiển thị trên web -->
<body>
    <div class='wrapper'>
        <div class='header'>
            Đây là nội dung hiển thị trong phần Header
        </div>
        <div class='main-wrapper'>
            Đây là nội dung hiển thị trong phần Main Content
        </div>
        <div class='footer'>
            Đây là nội dung hiển thị trong phần footer
        </div>
    </div>
    <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
    </b:section>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>

Phần II: Định hình Template Blogspot với CSS

Mình sẽ áp dụng css như sau:

.wrapper {
    width: 800 px;
    margin: 0 auto;
}
.header {
    width: 100 % ;
    min - height: 90px;
    background: #4d90fe;
}
.main-wrapper {
width: 100%;
background: #e4e3b3;
}
.footer {
width: 100%;
    min - height: 300 px;
    background: #f9edbe;
}

Ta sẽ được 1 cấu trúc blog hoàn chỉnh là:

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
    <title>
        Tiêu đề trang web
    </title>
    <!-- Chú thích: Code Css cho Blog-->
    <b:skin>
        <![CDATA[ /* Viết mã Css tại đây */ ]]>
.wrapper {
width: 800 px;
margin: 0 auto;
}
.header {
width: 100% ;
min-height: 90px;
background:#4d90fe;
}
.main-wrapper {
width: 100%;
min-height: 300px;
background: #e4e3b3;
}
.footer {
width: 100%;
min-height:90px;
background: #f9edbe;
}
    </b:skin>
</head>
<!--Chú Thích:  Bắt đầu phần hiển thị trên web -->
<body>
    <div class='wrapper'>
        <div class='header'>
            Đây là nội dung hiển thị trong phần Header
        </div>
        <div class='main-wrapper'>
            Đây là nội dung hiển thị trong phần Main Content
        </div>
        <div class='footer'>
            Đây là nội dung hiển thị trong phần footer
        </div>
    </div>
    <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
    </b:section>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>

Và dĩ nhiên khi bạn lưu chủ đề, ra trang chủ thì nó sẽ rất xấu, nhưng như phần mở đầu mình đã nói,  mình sẽ làm mẫu với bố cục trang blog gồm 1 khung header (Giống như Mở bài), 1 main content ( thân bài) và 1 footer (kết bài) bên dưới.

Quên đi việc thắc mắc làm sao để có thể hiển thị danh sách các bài viết hay là thêm các widget như thế nào, hay nó thế này thế kia. các bạn đón chờ bài viết ở phần sau nhé.

https://ibloggerviet.blogspot.com/2018/05/dinh-hinh-cau-truc-cho-template-Blogspot.html

Để bắt đầu series Hướng Dẫn Thiết Kế Một Template Blogger, mình sẽ bắt đầu từ con số không đến việc lập dự án thiết kế template từ A tới XYZ. Mình sẽ bỏ qua bước đăng nhập, tạo mới 1 tên miền bới Blogspot và đi thẳng đến việc thiết kế một Template Blogger.

Các thẻ điều kiện ( If- Else) trong Blogspot – Bài toán giải quyết vấn đề hiển thị ở những widget,module, hay hình ảnh ... hiển thị ở các trang nhất định như trang chủ, trang tĩnh, trang bài viết, trang lưu trữ, trang chứa url bất kỳ.. Đây cũng là bài toán để tối ưu tốc độ cho Blog của mình.

Cấu trúc có dạng như sau:

<b:if cond='Điều kiện'>
Code, file Js, CSS hoặc nội dung tùy chỉnh
</b:if>

Hoặc: