Page navigation. Διαφορετική μορφή, αλλά ωραία. (Σελίδες με αριθμούς)

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Σε προηγούμενες αναρτήσεις έχουμε δώσει διάφορους κώδικες για αριθμημένες σελίδες. Σήμερα θα δείτε μια διαφορετική εκδοχή. Ακολουθήστε τα παρακάτω βήματα για να προσθέσετε στο blog σας:
  • Σύνδεση στον Blogger
  • Σχεδίαση / Επεξεργασία HTML
  • Βρείτε την ]]></b:skin>
  • Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:
.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/tAE1hAOX6Ys/s1600/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}

.fullsize .scroll_thumb {
display:none;
}

.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
  • Βρείτε τώρα την </body>
  • Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:
<script src='http://yourjavascript.com/123162034/script_bloggertipsandtricks_net.txt.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
</script>
<script src='http://yourjavascript.com/201563128/page-nav btt_net.txt.js'></script>
  • Αποθήκευση προτύπου και είστε έτοιμοι.
Ίσως να μη δείτε αμέσως το gadget. Κάντε υπομονή και συνεχίστε τη δουλειά σας όπως παλιά. Μετά από λίγο θα εμφανιστεί.

4 comments:

  1. Παίζει κάποιο DEMO???
    Φαίνεται πολύ καλό...
    Μπράβο σου!!

    ReplyDelete
  2. Δες εδώ! http://demo-paginator3000-abu-farhan.blogspot.com/

    Σ'ευχαριστώ πολύ για το ενδιαφέρον σου και τα καλά σου λόγια!

    ReplyDelete
  3. Η βλακεία με αυτή την αρίθμηση η οποία είναι πολύ καλή, είναι στο γεγονός ότι από κάτω υπάρχει το:

    Widget by Abu-farhan

    ReplyDelete
    Replies
    1. Σ' αυτή την ανάρτηση το έχουμε παρακάμψει, δε φαίνεται πουθενά.

      Delete

 
back to top