Thủ thuật này sẽ bổ xung thêm vào nút phân trang Older/Newer post (bài đăng cũ hơn, và bài đăng mới hơn) trong blog kèm theo tiêu đề bài viết. Cách thay thế thành tiêu đề bài viết co thể có nhiều blog đã viết nhưng có thể bạn sẽ thấy tiếc nếu không đọc bài viết này. Tại sao namkna nói vậy? Tại vì tiện ích này có điểm đặc biệt khác với những hướng dẫn của mọi người. Tiện ích này sẽ di chuyển phần Tiêu đề bài đăng cũ hơn và bài đăng mới hơn xuống ngay bên dưới bài đăng (thay vì sau comment như các hướng dẫn khác). Như vậy sẽ tăng được tính tò mò của độc giả về bài viết tiếp theo, Như vậy khả năng thu hút người đọc bấm vào để xem một trong 2 liên kết đó là rất lớn. Thêm nữa tiện ích này cũng hiển thị cả tiêu đề bài viết nên càng nếu thấy có ích người đọc sẽ bấm chuột vào đó để đọc nội dung bài viết (hơn là chỉ hiện nút bấm phải không các bạn?)
Ảnh minh họa:
Xem demo trên blog khác:
» VIEW DEMO
Bây giờ namkna sẽ hướng dẫn các bạn cách thực hiện thủ thuật này cho blog của bạn.
Lưu ý: Hướng dẫn này sẽ can thiệp lớn vào phần mẫu của bạn do vậy hãy tải mẫu của bạn về lưu lại dự phòng trước khi tiến hành theo bất cứ bước nào namkna hướng dẫn sau đây.
☼ Thêm Next & Previous kèm tiêu đề bài viết từ Jquery cho blogger
1- Đăng nhập vào Blog2- Vào Mẫu => Chỉnh sửa HTML
3- Thêm đoạn code bên dưới vào trước thẻ ]]></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 {font-size: 18px; color: #666;font-family:Arial, Tahoma, sans-serif; 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;}
» Tùy biến CSS:
4- Bây giờ chúng ta sẽ thêm Jquery và một số font chưc mới mà Google ưa thích gọi là Oswald. Bằng cách dán đoạn code bên dưới sau thẻ <head>:
- font-size: 18px là font chữ tiêu đề bài viết
- color: #666 là màu chữ tiêu đề bài viết
- font-family:Arial, Tahoma, sans-serif là loại font chữ của tiêu đề bài viết
4- Bây giờ chúng ta sẽ thêm Jquery và một số font chưc mới mà Google ưa thích gọi là Oswald. Bằng cách dán đoạn code bên dưới sau 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'/>» Lưu ý:
- Nếu blog 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ên nếu bạn viết blog bằng tiếng việt thì hãy xóa nó đi hoặc vào đây để chọn font chữ tiếng việt mà bạn muốn nha.
5- 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>
» Tùy biến XML:
- Bạn có thể thay đổi phần màu đỏ theo ý của bạn.
- Phần màu tím là thông báo khi bạn đang xem bài đăng mới nhất và bài đăng cũ nhất trên blog đó.
- Trong mẫu mặc định tiêu đề là .post h3.post-title nên tôi sử dụng nó cho đoạn code Jquery trên. Ở đây mình dùng JQuery để lấy dữ liệu trong thẻ tiêu đề thông qua các lớp class và Id. Phần này có thể khác nhau đối với những blog khác nhau. Nếu bạn không tìm được thẻ đó thì có thể cần đến sự giúp đỡ của mình để xác định các lớp thẻ tiêu đề đó. Phần này rất quan trọng vì nếu làm không đúng bài viết sẽ không thể hiển thị được tiêu đề (Nếu cần thì hãy để URL blog của bạn ở bên dưới phần comment của bài này tôi sẽ chỉ nó cho bạn).
6- Cuối cùng bạn cần ẩ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. Để làm điều đó bạn làm như sau. 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>
Để ẩn nó thì ta phải sử dụng các thẻ điều kiện trong xml, cách thực hiện rất đơn giản bạn hãy làm theo 2 bước bên dưới nha:
6.1- Thêm vào sau đoạn màu vàng 2 đoạn mã bên dưới
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'>
6.2- Thêm vào trước đoạn màu xanh 2 đoạn mã bên dưới:
</b:if></b:if>7- Giờ lưu mẫu của bạn lại và vào trang kiểm tra thành quả nha.
Nhận xét
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaChúc a Nam năm mới vui vẻ và mạnh khỏe!
Trả lờiXóaE lại làm phiền a. Hi. E mới đổi mẫu và muốn khi xem bài viết thì bài viết sẽ che mất sidebar bên trái, hiện tại là bị che sidebar bên phải a ah. A giúp e ah: http://www.cuois2.com/.
Cảm ơn a nhé!
Cảm ơn em. Chúc e năm mới luôn vui vẻ, hạnh phúc và tràn ngập niềm vui./.
XóaTrở lại câu hỏi của em:
1- Tìm đoạn code bên dưới:
.column-right-outer, .homewalatitle, .postdetail{
display: none !important;
}
- sửa nó thành:
.column-left-outer, .homewalatitle, .postdetail{
display: none !important;
}
2- Chỉnh lại độ rộng ở đoạn bên dưới vì độ rộng cột trái nhỏ hơn nên phải chỉnh lại:
.fauxcolumn-center-outer {
width: 698px;
}
Ak anh bổ xung thêm một góp ý về mẫu đó. Nếu để ý em sẽ thấy nó có một đoạn javarscript quy định thông tịn Copyright, do vậy nếu trong quá trình tải trang mà em bấm dừng không tải thì nó sẽ chuyển hướng đến trang khác không phải trang của em.
XóaA Nam ơi chưa được ạ. Sidebar bên trái bị ẩn nhưng bài viết không lấp mà vẫn giữ nguyên như bây giờ nên sidebar bên phải chắn mất nội dung. Còn mẫu e lấy ở SEO blogger, họ có nói là xóa backlink dưới footer thì bị chuyển hướng về trang của họ, không biết có cách nào khắc phục nhược điểm như a nói ko ạ. Cảm ơn a!
Trả lờiXóaÀ a Nam cho e liên kết wed với a nữa. Hi. Blog e cũng đang xây dựng nên chưa có traffic lắm hi vọng a đồng ý. Hi.....
Trả lờiXóaMấy hôm nay bận quấ. Em làm lại như sau coi sao nha:
Xóa1- Tìm đoạn code bên dưới:
.column-right-outer, .homewalatitle, .postdetail{
display: none !important;
}
- sửa nó thành:
.column-left-outer, .homewalatitle, .postdetail{
display: none !important; width:1px !important;
}
2- Chỉnh lại độ rộng ở đoạn bên dưới vì độ rộng cột trái nhỏ hơn nên phải chỉnh lại:
.fauxcolumn-center-outer {
width: 698px; float:left;
}
Mấy hôm nay đầu năm chắc a bận là phải rùi...Hi. Nhưng vẫn vấn đề a nêu cho e ý là liệu khắc phục được nhược điểm là dừng tải trang thì bị chuyển hướng và a xem dùm e mẫu này liệu có bị chuyển hướng khi có traffic lớn ko ạ. A nói e cũng thấy hơi lo. Hix...
XóaCái đó thì ko lo em ak. Nếu như nó tự chuyển hướng thì em có thể dùng mẫu khác tranh bị lạm dụng. Tuy nhiên với lỗi đó tốt nhất nên thay thế vì thông thường vơi những độc giả mạng chậm nó sẽ chuyển hướng mất đến 20% nếu trình duyệt không load tới Copyright ở chân blog của em.
XóaChào Nam.
Trả lờiXóaCho mình hỏi có cách nào để hiện bài viết trước đây và bài viết tiếp theo trong label của bài viết hiện tại không ?
Thanks
Nó có mà bạn. Chẳng qua bạn ẩn nó đi thôi bạn kiểm tra trong mẫu nếu có đoạn tương tự bên dưới thì xóa nó đi là được:
Xóa#blog-page{display:none}
Hi. Mình nói chưa rõ. Ý mình là vẫn hiện newer post và older post nhưng khi nhấn vào newer post thì nó hiện ra bài viết mới hơn cùng chuyên mục label của bài viết hiện tại đó bạn.hoặc là bạn chỉ mình cách làm bài viết liên quan mới hơn và cũ hơn cùng chuyên mục nhưng chỉ hiện 1 related cho mỗi cái thôi. Mình đang định làm wap truyện bằng blogspot, tính là mỗi tên truyện là 1 label nên cần biết cái này để tự động thêm đường dẫn chương trước và chương tiếp theo cho chương đang đọc.
XóaTrường hợp bạn nói là làm newer post và older post cho một nhãn riêng biệt là chưa thể được bạn ak. Bạn có thể để ý đoạn code newer post và older post của blog nó khai báo biến l;ink dưới dạng: expr:href='data:newerPageUrl' có nghĩa là nó lấy link trước đó theo tuần tự đăng bài của tất cả các nhãn khác nhau.
XóaNhư vậy có một giải pháp duy nhất là bạn đăng bài theo nhãn nhưng đăng hết truyện này mới đến truyện khác (có thể chỉnh thời gian của bài đăng cho nó gần nhau).
2- Giải pháp tạo bài liên quan thì khả thi hơn bạn ak. Bạn có thể chọn một kiểu ở đây: CÁC LOẠI BÀI VIẾT LIÊN QUAN
Có kiểu hiện bang tooltip hok nhỉ
Trả lờiXóanhư vậy đẹp hơn :D
Tất nhiên nếu muốn vẫn có thể được bài tới mình sẽ tích hợp thêm tooltip nội dung của bài viết trên tiện ích này ,,,,
Xóaanh xem ảnh - cho em hỏi tí làm sao để xóa hoặc đổi màu được cái khung em tô màu vàng đó anh
Trả lờiXóaảnh :http://1.bp.blogspot.com/-7ExacfvJVFU/UtD2lQ2RT_I/AAAAAAAAAC0/OxYveZYV_eQ/s1600/p.jpg
Nếu muốn xóa nó đi em chỉ cần xóa đoạn này:
Xóa<div class='submenu'>
<div class='search'>
<form action='/search' id='searchThis' method='get' style='display: inline;'><input class='boxsearch' id='searchBox' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Tìm kiếm' vinput=''/>
<input class='buttonsearch' id='searchButton' type='submit' value='Tìm'/></form>
</div>
<div class='rss'>
<a href='/feeds/posts/default' style='font:500 10px/18px Arial; color:#d1d1d1;'>RSS <img border='0' src='http://1.bp.blogspot.com/-3VL3i4xw_rM/TvB26h6oZ3I/AAAAAAAAAWw/nITz02BXomk/s1600/rss.png'/>
</a>
</div>
</div>
Đổi màu thì nó liên quan đên đoạn code có dạng như sau:
.menucontent{width:960px;background:url(https://lh5.googleusercontent.com/-oSssHlGj628/UgRNIC6ENRI/AAAAAAAABEc/jWeJx7MPq7A/w1-h64-no/menurepeat.png) repeat-x;height:64px;position:relative;margin-top:10px}
Link ảnh anh in đậm có thể khác vì anh không có link trang em nên không nói chính xác được hình ảnh đó.
anh ơi không xóa được toàn bộ - em chỉ xóa đc chữ và ô tìm kiếm thôi
Trả lờiXóatrang em là:http://giasudhv.blogspot.com/
Em gửi mẫu vào tavannam01@gmail.com anh xóa nó đi cho nha.
XóaAD sao em làm hoài k đc: http://buaonl.blogspot.com/
Trả lờiXóanó hide luôn chứ k hiện như Demo
Trả lờiXóaMình chỉ muốn có 2 mũi tên nhỏ nhỏ cuối bài đăng để next và previous dc không? Chứ hiện thế kia tốn diện tích lắm. Nhưng mà mình dùng temp sẵn khó sửa quá, temp của mình bị lỗi phần này với bài viết liên quan. Thanks trước nha @@.
Trả lờiXóaTrang của mình: Muzikers
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaBạn ơi, blog của mình đã 32 bài viết mà không có nút next và previous, blog của mình là Nguyễn Văn Thương
Trả lờiXóaBạn giúp mình với nha ! Cám ơn nhiều.
Bạn đã ẩn nó đi trong mẫu rồi. bạn có thể để nó hiển thị lại bằng cách vào Chỉnh sửa HTML và xóa đoạn code sau đi nha:
Xóa#blog-pager-newer-link {
float: left;
display:none;
}
#blog-pager-older-link {
float: right;
display:none;
}
#blog-pager {
text-align: center;
display:none;
}
Mình làm theo hướng dẫn của bạn quả nhiên là hiệu quả, nhưng nó chỉ hiện với ie, firefox thì không hiện được bạn ơi. Giúp mình lần nữa nhé !
XóaBạn tìm với từ khóa: b:includable id='nextprev' và thay thế đoạn có dạng như bước 6 trong bài viết này thành đoạn code bạn bước 6 đó nha bạn.
XóaNếu vẫn khong được thì bạn có thể gửi tem vào tavannam01@gmail.com mình chỉnh sửa cho nh.a
Anh có thể kiểm tra dùng em cái thẻ tiêu đề của blog em là gì dc ko? Em mò hoài chẳng thấy được :(
Trả lờiXóahttp://giaoxutraco.tk
Nó nằm trong cặp thẻ
Xóa<h1 class="post-title entry-title" itemprop="name">
và </h1>
Hay nói cách khác chính là thẻ h1 khi xem bài viết.
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaChào Anh. Em đã làm theo đúng hướng dẫn và thật là phần .post h3.post-title là em bị vướng vì tiêu đề hiển thị không được. Đây là Blog của em Nguyễn Duy Thanh. Anh có thể giúp em cho nó hiển thị với. Cám ơn anh trước nhé.
Trả lờiXóaTrân trọng!
Em đã làm được rồi. Tks anh
Xóaanh Nam vào blog của em rồi kiểm tra cái next - previous có tiêu đề bài viết, bài viết liên quan nhé
Trả lờiXóaem đã làm đúng hết các bước rồi sao mà nó không hiện tiêu đề bài viết anh Nam ơi, chỉ hiện chữ Previous và Next thôi ak, anh xem dùm em nhé.
Trả lờiXóaBlog em: TẠI ĐÂY
Anh ơi em làm được rồi nhưng em muốn next và prev bài trong cùng chuyên mục đó thì làm sao ạ?
Trả lờiXóaBlog của bạn là gì nhỉ? Nhắn cho mình nhé :D
XóaEm đang xây dựng blog truyện: http://chomdaotv.blogspot.com/
Xóavì là blog truyện có nhiều bài trong 1 label nên em muốn làm vậy cho tiện đọc bài..
@trần anh chung chờ mình ra thủ thuật đó nhé, hiện tại mình vẫn chưa viết được thủ thuật đó. Bên mình sẽ viết và gửi đến bạn nhé, bạn gửi email cho mình nha!
XóaMail của anh đâu rồi, đây phải ko ạ thanh.jobs@Oapcorp.com
Xóabạn add admin@oapcorp.com nhé
XóaOk Rồi đó a :)
Xóaanh ơi, em, làm hoài ko dc anh ạ, xem giúp em nhé, blog em là elhteamreadonline.blogspot.com
Trả lờiXóacám ơn anh trước
em muốn gắn buiton chuyển tiếp bài khác trển ảnh của bài viết thì làm sao ạ
Trả lờiXóaad giúp em với
http://xinh2s.blogspot.com/2014/11/tai-sao-uong-cong-lai-tao-ra-uong-thang.html
Namkna ơi, cũng là bài mới hơn cũ hơn kèm next và priview, nhưng ở trang này đẹp quá bạn ak Ảnh: http://2.bp.blogspot.com/-217mskADbzw/VNpBGh7sB2I/AAAAAAAAAE0/vU-ix9mYaOM/s1600/Untitled.png
Trả lờiXóaWeb: http://bloggeraz.net/huong-dan-su-dung-font-awesome-icons-trong-blogspot/
Bạn làm 1 bài hướng dẫn về cách như vậy đi. Cảm ơn bạn nhiều
Bạn ơi nếu như mình tạo một trang bán hàng nếu muốn hiện bài đăng cũ hơn ngay bên dưới những bài đăng phía trên thay vì phải chuyển sang một trang khác thì phải làm ntn? liệu có khả thi không? vì số lượng mặt hàng là khá ít, không nhất thiết là phải chuyển sang một trang mới?
Trả lờiXóamình làm hoài không được, nhờ bạn trợ giúp, có thể làm trực tiếp cho mình không
Trả lờiXóa