Αριθμημένες σελίδες αναρτήσεων 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 και το τοποθετούμε κάτω από τις αναρτήσεις μας.
Δείτε την φωτό παρακάτω!


Image and video hosting by TinyPic

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




Add To Facebook Add To Twitter Add To Yahoo Stumble This Fav This With Technorati Add To Del.icio.us Digg This Add To Reddit

9 σχόλια:

Eva F. είπε...

ΚΑΛΟ ΜΗΝΑ Γιώργο.
Να είσαι καλά!

ekabitis είπε...

Επίσης Εύα μου. Ότι επιθυμείς.

Γιωργος είπε...

Καλησπερα! Ευχαριχτω για τα tips, μου εχουν φανει πολυ χρησιμα.
Εωχω προβλημα με ευτο το Tip.
Ενω μου βγαζει κανονικα τις αρηθμησεις παει μονο μεχρι τις 20 σελιδες.Αν μπορεις να βοηθησεις.

Γιωργος!!

ekabitis είπε...

Γεια σου Γιώργο.
Γράψε μου λίγο το blog σου, και στείλε καλύτερα mail, με το τι πρόβλημα σου παρουσιάζει.

Cataman(Kosmas) είπε...

Φίλε μου και εγώ έχω το ίδιο πρόβλημα με τον Γιώργο. Βρήκαμε καμιά λύση?
Όσο και αν άλλαξα το var pageCount πάντα δεν μου δείχνει όλες τις αναρτήσεις που αναφέρονται σε ένα tag.

akalestoi είπε...

den doulevei se emena ... to kanw kai molis anoigw to istologio na to dw katw apo tis anarteiseis mou gvazei to kwdika ....

ekabitis είπε...

Παιδιά, έχετε δίκιο.
Λείπει ένα style
στην αρχή του κωδικού. Δεν ξέρω πως ...εξαφανίστηκε.
Ο κωδικός διορθώθηκε.
Ξαναπροσπαθήστε και αν θέλετε ενημερώστε με εάν δούλεψω.
Ευχαριστώ πολύ για την σημείωση!

Unknown είπε...

Καλησπερα φιλε μου Εκαβιτη !!

Τι δικο μου προβλημα ειναι οτι δεν καταλαβαινω που να κανω drag - drop το κουτακι με τον κωδικα..

απο την εικονα που δειχνεις δεν βγαζω ακρη..

το εχω μεταφερει σε ολο το blog, οπου θα μπορουσε να παει και παλι τιποτα...

ekabitis είπε...

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

Δημοσίευση σχολίου