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:'Oswald',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:'Oswald',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'>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/>
....................
</div>
<b:if cond='data:blog.pageType == "item"'>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
<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>
<data:olderPageTitle/>
</a>
</b:if>
</div>
</div>
<div class='clear'/>
</div>
<script type='text/javascript'>
$(document).ready(function(){
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle);//rgt
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
});</script>
</b:if>
Icon CommentsIcon Comments