[Tips] - Blog Page Next and Previous đẹp cho Blogspot

Blog Page hay còn gọi là nút Next và Previous nằm dưới bài viết nhằm mục đích chuyên tới bài đăng mới hơn hoặc bài đăng củ hơn cho blogspot. Nay mình sẽ hướng dẫn các bạn tạo một mẫu blog page siêu đẹp cho blogspot. Mẫu blog page này có kèm tiêu đề bài viết giúp người đọc biết rõ hơn bài viết trước đó hay bài viết sau đó có nội dung là gì rất chuyên nghiệp.

Cách thêm blog page vào blogspot

1. Đăng nhập vào blogspot

Truy cập vào phần quản trị Blogger > Mẫu > Chỉnh sửa HTML

2. Thêm css vào templates (mẫu)

Trong templates blogspot các bạn tìm đến thẻ ]]></b:skin> và thêm đoạn code bên dưới trên thẻ này

#blog-pager-older-link h6{margin:0;padding:0;text-align:right;font-family:&#39;Oswald&#39;,sans-serif;font-size:14px;color:#333333;text-transform:uppercase;line-height:1.625em;font-weight:700}
#blog-pager-newer-link h6{margin:0;padding:0;text-align:left;font-family:&#39;Oswald&#39;,sans-serif;font-size:14px;color:#;text-transform:uppercase;line-height:1.625em;font-weight:700}
.pager-content{width:99.5%;overflow:hidden;margin:10px 0 0;padding:10px 0 0}
.pager-content a:hover,.pager-content{color:#000;text-decoration:none}
.showpageNum a,.showpage a,.showpagePoint{background:#DE3C3C;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;margin-right:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{color:#FFF}
.showpageOf{display:none!important}

3. Thêm Javascripts 

Tìm đến thẻ </head> trong templates blogspot và thêm đoạn code sau trên thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

4. Chỉnh sữa blog page trong templates

Nếu templates của bạn đã có sẵn blog page rồi thì bạn hãy xóa đi và thêm mẫu mới vào nhé, nếu không sẽ không đẹp lắm cho blogspot và không tốt cho việc seo blogspot của bạn lắm.

Nếu xóa thì bạn tìm đến đoạn code tương tự như sau :

<div class='blog-pager' id='blog-pager'>
....................
</div>

Xóa tất cả code nằm trong thẻ đóng này và thay vào đó là đoạn code bên dưới, nếu templates blogspot của bạn chưa có thì các bạn có thể thêm đoạn code này ngay sau thẻ <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
<div class='pager-content'>
<div id='blog-pager-newer-link'>
<b:if cond='data:newerPageUrl'>
<h6>Previous</h6>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
</b:if>
</div>
<div id='blog-pager-older-link'>
<b:if cond='data:olderPageUrl'>
<h6>Next</h6>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
<data:olderPageTitle/>
</a>
</b:if>
</div>
</div>
<div class='clear'/>
</div>
<script type='text/javascript'>
$(document).ready(function(){
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});</script>
</b:if>

Bay giờ lưu mẫu lại và kiểm tra kết quả bằng cách xem thử bên dưới một bài viết bất kỳ trên blog xem thế nào nhé. Nếu không được các bạn có thể comments bên dưới để được hỗ trợ. Chúc các bạn thành công 

Bài Viết Cùng Chủ Đề

• [Tips] - Slider Image đơn giản cho blogspotSlider Image (slider ảnh) là một tiện ích được các blogger thường hay dùng để thêm phần chuyên nghiệp cho blog của mình ...
• [Tips] - Làm sao để title, description, keywords cho mỗi trang khác nhau Chào các bạn nói đến title, description, keywords thì chắc ai cũng biết nếu làm blog, đối với seo thì chúng ta có rất ...
• [Tips] - Quy trình để seo blogspot từ A đến ZChào các bạn nói đến seo blogspot thì có nhiều bạn nói với tôi rằng rất khó nhưng khi bạn đã lòng đam mê và nhiệt huyết ...
• [Tips] - Tự thiết kế blogspot chuẩn W3C/HTML5W3C là từ viết tắt của World Wide Web Consortium, là nhiệm vụ hướng dẫn World Wide Web với đầy đủ các tiềm năng phát tr ...
• Recent Post Widget For Blogspot chuyên nghiệpRecent post là widget trình diễn bài viết theo label tùy chỉnh của nhà thiết kế, nếu bạn có một label (nhãn) muốn nằm t ...