Πολλές σελίδες και πολλά blogs έχουν πάνω απο 2-3 posts στην αρχική σελίδα. Οι περισσότεροι απο μας το βρίσκουμε κουραστικό να κάνουμε scroll down στο τέρμα της σελίδας με το ποντίκι. Τοποθετώντας έναν απλό JavaScript κώδικα, μπορούμε να κάνουμε αυτόματα με ένα πάτημα του ποντικιού στο τέρμα η την κορυφή κάθε σελίδας σε χρόνο μηδέν. Μπορείτε να δείτε τα δύο πράσινα βελάκια δεξιά στο δικό μου blog.
Πώς να βάλετε τα Go to top και bottom button:
α) CSS κώδικας: Κάντε Copy και paste τον παρακάτω κώδικα, ανάμεσα στα <head> και </head>. Η καλύτερη θέση θα ήταν αμέσως πρίν το ]]></b:skin> ή σε άλλα πρότυπα γνωστό σαν </b:skin>
.gototop{
background:url(http://i31.tinypic.com/2vtqqt3.png)no-repeat;
display:block;_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
width:17px;
height:17px;
overflow:hidden;
outline:none;
left:3px; bottom:30px;}
.gotobottom {
background:url(http://i32.tinypic.com/16lle91.png)no-repeat;
width:17px;
height:17px;
display:block;
_display:none;
position:fixed; z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
left:3px; bottom:5px;
}
β) HTML κώδικας: Κάντε Copy και paste τον παρακάτω κώδικα, πάνωαπο το </body>.
<a href='#' style='display:scroll;position:fixed;bottom:115px;right:5px;' title='Back to Top'><img src='http://i31.tinypic.com/2vtqqt3.png' style='border:0;'/></a>
<br/>
<a href='#GoDown' style='display:scroll;position:fixed;bottom:80px;right:5px;'><img src='http://i32.tinypic.com/16lle91.png' style='border:0;'/></a>
<a name='GoDown'/>
Αποθηκεύστε και δείτε το blog σας.
Πώς να κάνετε κάποιες μετατροπές στον CSS και στον HTML κώδικα.
a) Αλαγές στον CSS κώδικα:
background:url(http://i31.tinypic.com/2vtqqt3.png)no-repeat;
background:url(http://i32.tinypic.com/16lle91.png)no-repeat;
1. Αλάξτε το background image link (κόκκινα γράμματα) με το link κάποιας δικής σας δική σας εικόνας.
2. Για να αλαξετε το "position" των Buttons, αλάξτε τις μεταβλητές (κόκκινα γράμματα) απο τα δύο right:5px;
Για παράδειγμα, αν θέλετε να εμφανίζονται τα buttons αριστερά, αντικαταστήστε τα: right:5px; σε: left:5px;
http://nikos63.blogspot.com
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου