Αριθμημένες σελίδες αναρτήσεων No 2

Τ

ον προηγούμενο μήνα, σας είχα δείξει ένα ωραίο widget, που αντικαθιστούσε τα

"νεότερες αναρτήσεις", "Αρχική σελίδα" και "παλαιότερες αναρτήσεις",

με αριθμημένες σελίδες πλοήγησης στο blog.
(Δείτε την ανάρτηση πατώντας εδώ)
Σήμερα θα δούμε ένα παρόμοιο trick, λιγάκι διαφορετικό.
Βασικά μπαίνει κι αυτό σαν widget, κάνει ακριβώς την ίδια δουλειά, αλλά αλλάζει λίγο εμφανισιακά. Στην αρχική μορφή του εμφανίζεται μέσα σε γαλάζια κουτάκια, στα οποία όμως μπορούμε να επέμβουμε και να αλλάξουμε τους χρωματισμούς τους.

Ας τα δούμε όμως αναλυτικά.
Πάμε στον Πίνακα Ελέγχου --> Διάταξη --> Προσθήκη gadget --> Html/Javascript, και προσθέτουμε τον παρακάτω κωδικό.

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;

}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=15;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}

</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>

Στο σημείο του κωδικού "var pageCount = 15;", ο κόκκινος αριθμός δηλώνει τον αριθμό των αναρτήσεων που θα εμφανίζονται σε κάθε σελίδα.
Ο κωδικός "var displayPageNum = 3;" με το πράσινο χρώμα, δηλώνει τον αριθμό των σελίδων που θα περιλαμβάνονται στην λίστα, στην αρχική μας σελίδα.

Τους html χρωματικούς κωδικούς με το γαλάζιο χρώμα, μπορείτε να τους αλλάξετε, βάζοντας τα χρώματα που ταιριάζουν περισσότερο στο blog σας. Σε αυτό το σημείο θα πρέπει να πειραματιστείτε μόνοι σας, βρίσκοντας τους δικούς σας αντιπροσωπευτικούς χρωματισμούς.
Για να βοηθηθείτε θα σας δώσω ένα site όπου μπορείτε να βρείτε τους κωδικούς όλων των χρωμάτων. Έτσι θα βρείτε το χρώμα που σας ταιριάζει. Πατήστε εδώ για να μεταφερθείτε αυτόματα.

Αφού έχουμε τελειώσει με τις αλλαγές μας, πατάμε αποθήκευση του widget, αλλά δεν φεύγουμε από την σελίδα. Με drag and drop, παίρνουμε το widget και το τοποθετούμε κάτω από τις αναρτήσεις μας.
Δείτε την φωτό παρακάτω!



Αφού έχουμε κάνει κι αυτό, πατάμε αποθήκευση και προβολή ιστολογίου.
Θα δείτε το αποτέλεσμα!
Ελπίζω να σας άρεσε.

Αν βρίσκετε χρήσιμες τις αναρτήσεις μου, και θέλετε να σας έρχονται μέσω e-mail, για να ενημερώνεστε άμεσα για κάθε καινούρια ανάρτηση, κάντε ενγραφή στο RssFeed που βρίσκεται στη sidebar του Blog μου!