» » Hướng dẫn tạo Next post và Previous post đẹp cho blogspot

Hướng dẫn tạo Next post và Previous post đẹp cho blogspot

Trong khi lập blog mới, các blogger đau đầu đối mặt đó là việc lựa chọn các chủ đề phù hợp với blog. Theme Right là những gì có chứa một số tính năng quan trọng. Giao diện người sử dụng dễ dàng là một trong những tính năng quan trọng nhất mà tất cả các blogger muốn trong blog của họ. Nó thực sự giúp người dùng duyệt các blog một cách dễ dàng Next & Previous. Nếu chủ đề blog của bạn có chứa các nút Next post và Previous post tồi tệ nhất hoặc bạn muốn thực hiện một số nút mới hơn trong bài viết này, mình sẽ chia sẻ một số nút Next post và Previous post  đánh số tiếp theo và trước đó cho blogger.

Next post và Previous post

Hướng dẫn tạo Next post và Previous post đẹp cho blogspot


Bước 1:

  • Đăng nhập Blogger => Template => Sao lưu mẫu lại đề phòng làm sai nhé
  • Nhấp vào Chỉnh sửa HTML => Tìm đến </ body>
  • Bây giờ dán code phía trên </ body>


<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<script type='text/javascript'>

  /*<![CDATA[*/

    var postperpage=5;

    var numshowpage=2;

    var upPageWord ='« Previous Page';

    var downPageWord ='Next Page »';

    var urlactivepage=location.href;

    var home_page="/";

  /*]]>*/

</script>

<script type='text/javascript'>

  /*<![CDATA[*/

    var nopage;var jenis;var nomerhal;var 
lblname1;halamanblogger();function loophalaman(banyakdata){var 
html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span

 class='showpageOf'>Page "+nomerhal+' of 
'+maksimal+"</span>";var 
prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span

 class="showpage"><a 
href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span

 class="showpageNum"><a 
href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span

 class="showpageNum"><a href="#" 
onclick="redirectpage('+prevnomer+');return 
false">'+upPageWord+'</a></span>'}else{html+='<span 
class="showpageNum"><a href="#" 
onclick="redirectlabel('+prevnomer+');return 
false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span

 class="showpageNum"><a 
href="'+home_page+'">1</a></span>'}else{html+='<span 
class="showpageNum"><a 
href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+='

 ... '}for(var 
jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span 
class="showpagePoint">'+jj+'</span>'}else 
if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a
 href="'+home_page+'">1</a></span>'}else{html+='<span 
class="showpageNum"><a 
href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span

 class="showpageNum"><a href="#" 
onclick="redirectpage('+jj+');return 
false">'+jj+'</a></span>'}else{html+='<span 
class="showpageNum"><a href="#" 
onclick="redirectlabel('+jj+');return 
false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span

 class="showpageNum"><a href="#" 
onclick="redirectpage('+maksimal+');return 
false">'+maksimal+'</a></span>'}else{html+='<span 
class="showpageNum"><a href="#" 
onclick="redirectlabel('+maksimal+');return 
false">'+maksimal+'</a></span>'}}var 
nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span

 class="showpageNum"><a href="#" 
onclick="redirectpage('+nextnomer+');return 
false">'+downPageWord+'</a></span>'}else{html+='<span 
class="showpageNum"><a href="#" 
onclick="redirectlabel('+nextnomer+');return 
false">'+downPageWord+'</a></span>'}}var 
pageArea=document.getElementsByName("pageArea");var 
blogPager=document.getElementById("blog-pager");for(var 
p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function

 hitungtotaldata(root){var feed=root.feed;var 
totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function

 halamanblogger(){var 
thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script

 
src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script

 
src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1"

 ><\/script>')}}}function 
redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var

 nBody=document.getElementsByTagName('head')[0];var 
newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function

 
redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var

 nBody=document.getElementsByTagName('head')[0];var 
newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function

 finddatepost(root){post=root.feed.entry[0];var 
timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var

 timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var 
alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var

 
alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}

  /*]]>*/

</script>

</b:if>

</b:if>

Nhấn Save để lưu lại

Bước 2:
  • Đi tới Blogger => Template => Edit HTML
  • Ấn Ctrl +F tìm kiếm ]]> </ b: skin>
  • Copy 1 trong 4 code dưới đây đặt phía trên ]]> </ b: skin>

Màu Đỏ

  
//* Red Style ---------------------------------------- *//



#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}

.showpageNum a,.showpage 
a,.showpagePoint{background:#e74c3c;border:none;border-bottom:3px solid 
#862B20;color:#FFF;font-size:15px;font-family:open 
sans;font-weight:700;margin-left: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{background:#c0392b;color:#FFF}

.showpageOf{display:none!important}

@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'),
 local('OpenSans-Bold'), 
url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff)
 format('woff')}

Màu Xanh

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}

.showpageNum a,.showpage 
a,.showpagePoint{background:#3498db;border:none;border-bottom:3px solid 
#246EA0;color:#FFF;font-size:15px;font-family:open 
sans;font-weight:700;margin-left: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{background:#2980b9;color:#FFF}

.showpageOf{display:none!important}

@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'),
 local('OpenSans-Bold'), 
url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff)
 format('woff')}

Màu Lục 

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}

.showpageNum a,.showpage 
a,.showpagePoint{background:#2ecc71;border:none;border-bottom:3px solid 
#208C4D;color:#FFF;font-size:15px;font-family:open 
sans;font-weight:700;margin-left: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{background:#27ae60;color:#FFF}

.showpageOf{display:none!important}

@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'),
 local('OpenSans-Bold'), 
url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff)
 format('woff')}

Màu Tối 
#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}

.showpageNum a,.showpage 
a,.showpagePoint{background:#34495e;border:none;border-bottom:3px solid 
#202D3A;color:#FFF;font-size:15px;font-family:open 
sans;font-weight:700;margin-left: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{background:#2c3e50;color:#FFF}

.showpageOf{display:none!important}

@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'),
 local('OpenSans-Bold'), 
url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff)
 format('woff')}

Xong lưu template lại. Bạn sẽ cảm thấy rất hài lòng khi làm xong chức năng Next post và Previous post cho blog của mình.
Đi lên