Hiện Next & Previous kèm tiêu dề bài viết cho blogspot dưới chân trang
Tuyệt vời khi bạn tùy biến được tất cả. Đối với Template của một Blogger, Google chỉ cung cấp cho chúng ta những thiết kế chuẩn, thật là chán mỗi khi chỉ nhìn thấy ở cuối chân trang những hàng chữ: nhỏ xíu, không có nét, không có hồn, không có tên, không có tuổi luôn...
Mình tình cờ tìm thấy được những Source code nầy mà thôi, và...còn thấy chúng nhiều ở vô số nơi trên mạng. Chỉ việc chép về ...và ngâm cứu mãi cho đến hôm nay mới thực hành và chia sẽ lại cùng bạn bè.
Tiến trình rất đơn giản, gồm các bước:
Bước 1: Thêm đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>.
/*################ Show Next & Previous Post Titles in Blogger with jQuery Navigation ##########################*/
.bogger-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd; margin-bottom: 10px; overflow:hidden; padding:0px;}
.bogger-pager li.next { float: right; padding:0px; background:none; margin:0px;}
.bogger-pager li.next a { padding-left: 24px; }
.bogger-pager li.previous { margin:0px -2px 0px 0px; float: left; border-right:1px solid #ddd; padding:0px; background:none;
}
.bogger-pager li.previous a { padding-right: 24px; }
.bogger-pager li.next:hover, .bogger-pager li.previous:hover {background:#333333; }
.bogger-pager li { width: 50%; display: inline; float: left; text-align: center; }
.bogger-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.bogger-pager li i { color: #ccc; font-size: 18px; }
.bogger-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.bogger-pager li a span {<span style="box-sizing: border-box; color: red;">font-size: 18px</span><b style="box-sizing: border-box;">;</b> <span style="box-sizing: border-box; color: purple;"><b style="box-sizing: border-box;">color: #666</b></span>;<span style="box-sizing: border-box; color: orange;"><b style="box-sizing: border-box;">font-family:Arial, Tahoma, sans-serif</b></span>; margin:0px}
.bogger-pager li a:hover span,
.bogger-pager li a:hover i { color: #ffffff; }
.bogger-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
.bogger-pager li.next i { float: right; margin-top: 15%; margin-right: 5%; }
.bogger-pager li.next i, .bogger-pager li.previous i ,
.bogger-pager li.next, .bogger-pager li.previous{
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }
.fa-chevron-right {padding-right:0px;}
<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'/>
Chú ý:
- Nếu blog của bạn đã có file Jquery rồi thì hãy bỏ đoạn code màu xanh đi.
- Đoạn font màu vàng chỉ dành cho blog chuyên viết tiếng anh.
- Nếu bạn viết blog bằng tiếng việt thì xóa nó đi hoặc vào đây để chọn font chữ tiếng việt mà bạn muốn trong Google Fonts.
Bước 3: Chúng ta sẽ tìm vị trí cố định để thêm tiện ích này. Như đã nói ở trên chúng ta thêm nó vào ngay sau nội dung của bài đăng nên các bạn tìm đoạn code bên dưới:
<data:post.body/>
- Dán vào sau nó đoạn code sau: <b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<ul class='bogger-pager'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' rel='next'/>
<b:else/>
<i class='fa fa-chevron-right'/><a rel='next'><strong>Next</strong> <span>Bạn đang xem bài đăng mới nhất trên blog này</span></a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' rel='previous'/>
<b:else/>
<i class='fa fa-chevron-left'/><a rel='previous'><strong>Previous</strong> <span>Bạn đang xem bài đăng cũ nhất trên blog này</span></a>
</b:if>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
</b:if></b:if>
Bước 4: Thực hiện thao tác ẩn đi các liên kết bài đăng cũ hơn và mới hơn mặc định của blogger. Trong trình chỉnh sữa Html của Template, nhấn Ctrl+ F tìm đoạn code có dạng:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<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>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<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>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>
Sau khi tìm được (chỉ cần tìm được 1 hàng màu vàng thôi) bạn hãy làm tiếp 2 bước bên dưới:
1- Thêm vào sau đoạn màu vàng phía đầu source code 2 đoạn mã bên dưới
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
2- Thêm vào trước đoạn màu xanh ở cuối source code đoạn mã bên dưới:
</b:if></b:if>
Tuy nhiên, đế cho biến mất hẳn những nút Next Home Preview cuối mỗi bài đăng, là một mặc
định của trình thiết kế Blogger, bạn cần tìm các đoạn mã sau trong Template nhé:
#blog-pager-newer-link{float:left;display: none;}
#blog-pager-older-link{float:right;display: none;}
#blog-pager{text-align:center;display: none;}
|
Trong từng hàng Code trên, chỉ cần tìm cho đúng các mã màu xanh bên trái và thêm vào đó phía
sau các thuộc tính mã Code display: none;Xong chưa? Giờ thì bạn lưu mẫu lại và kiểm tra thử hoạt động của Blogspot nhé. Chúc các bạn
thành công.thành công.
Người viết: Nguyễn Đạt Khánh
Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..
Được viết bởi Khánh Nguyễn
Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :Nghề nghiệp: IT Computer Networking - Kỹ thuật viên Mạng máy tính Viễn thông
Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.
Nơi truy cập vào Nick của Tôi trên mạng:
0 Comments:
Đăng nhận xét