03 Δεκεμβρίου 2009



20 Go to TOP and Bottom

Πολλές σελίδες και πολλά blogs έχουν πάνω απο 2-3 posts στην αρχική σελίδα. Οι περισσότεροι απο μας το βρίσκουμε κουραστικό να κάνουμε scroll down στο τέρμα της σελίδας με το ποντίκι. Τοποθετώντας έναν απλό Java Script κώδικα, μπορούμε να κάνουμε αυτόματα με ένα πάτημα του ποντικιού στο τέρμα η την κορυφή κάθε σελίδας σε χρόνο μηδέν. Μπορείτε να δείτε τα δύο πράσινα βελάκια δεξιά στο δικό μου 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://your-image.gif)no-repeat;

background:url(http://your-image.gif)no-repeat;


1. Αλάξτε το background image link (κόκκινα γράμματα) με το link κάποιας δικής σας δική σας εικόνας.
2. Για να αλαξετε το "position" των Buttons, αλλάξτε τις μεταβλητές (κόκκινα γράμματα) απο τα δύο right:5px;
Για παράδειγμα, αν θέλετε να εμφανίζονται τα buttons αριστερά, αντικαταστήστε τα: right:5px; σε: left:5px;


Σύνοψη:
Ελπίζω αυτή η ανάρτηση είναι αρκετά απλή και αναλυτική ώστε να μπορείτε να την καταλάβετε εύκολα. Εάν όμως συναντήσατε κάπου δυσκολίες η δεν καταλάβατε κάτι, αφήστε ένα σχόλιο και θα σας απαντήσω το συντομότερο δυνατόν (με ξέρετε άλλωστε).
Λοιπόν; σας άρεσε;


"Γεια σου,
Εάν βρέθηκες για πρώτη φορά στο Blog μου, και εάν σε ενδιαφέρουν οι αναρτήσεις μου, μπορείς να εγγραφείς στο RSS feed του Blog. Μπορείς επίσης να κάνοντας εγγραφή στο Newsletter του blog μου
, να λαβαίνεις απ ευθείας κάθε μου ανάρτηση στο email σου. Είσαι Twitter user; τότε μπορείς επίσης να με κάνεις Follow στο Twitter.
Σε ευχαριστώ που με διαβάζεις,"




Print this post



Related Posts :



20 σχόλια:

αντωνης είπε... Best Blogger Tips

Να υποθεσω οτι αυτο το "κολπακι" και η αναρτηση αφορα τα blogs που ειναι στην πλατφορμα του blogger ή ισχυει και για τη wordpress?

Καλησπερα.


AATON είπε... Best Blogger Tips

Αντώνη, αν έχεις πρόσβαση στον πηγαίο κώδικα (HTML) του Template σου στο WP, και αν βρείς εκεί μέσα (και που σίγουρα υπάρχουν) /Head, body και #footer, τότε ναι, γίνεται και εκεί.


αντωνης είπε... Best Blogger Tips

Α ωραια, θα το ψαξω.
Ευχαριστω.


DaisyCrazy είπε... Best Blogger Tips

Νίκο θα το δοκιμάσω γιατί το άλλο που είχα πάρει από παλιότερη ανάρτηση που και που εξαφανίζεται...
Ευχαριστώ!

Αντώνη από ότι ξέρω στο wordpress λέγεται css όχι html ΑΛΛΑ για να το αλλάξεις πρεπει να πληρώσεις δυστυχώς.


Το Θολό Τοπίο...με ξεκάθαρη ματιά. είπε... Best Blogger Tips

Δάσκαλε άμα τον βάλω μόνη μου θα κάνω μία μικρή καταστροφή...Νιώθω πολλή κουρασμένη και μπερδεμένη...
Αν νομίζεις ότι πρέπει να μπει στο μπλόκ και δεν είναι κόπος για σένα σε παρακαλώ βάλτο.:)


Eva Neocleous είπε... Best Blogger Tips

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


AATON είπε... Best Blogger Tips

Βάλτε το "μόνο" αν το χρειάζεστε.
Το ότι έχω 100 "καί" αναρτήσεις με widget, δεν σημαίνει πως πρέπει να τα βάλλετε όλα. Κάτι που νομίζετε πως σας χρειάζεται, βάλτε το, κάτι που είναι περιττό όμως, αγνοήστε το. Και δεν μιλάω γι αυτήν την ανάρτηση, μιλάω γενικά.
Απλά, μέσα στις "εκατόν τόσες" αναρτήσεις, σίγουρα όλο και κάτι θα βρεί ο καθ' ένας που θα του είναι χρήσιμο.


to alataki είπε... Best Blogger Tips

Σ'ευχαριστώ πάρα πολύ, ωραίο κόλπο, το πρόσθεσα, όχι ακριβώς με βελάκια δηλαδή, αλλά δουλεύει... be happy...


Μάδε είπε... Best Blogger Tips

Γειά σου φίλε και συγχαρητήρια για το blog σου... Είναι εξαιρετικό!!!

Ήθελα να σε ρωτήσω, στο τελευταίο κομμάτι της ανάρτησής σου, στο β)
άν σε αυτό το μέρος : λείπει το end tag γιατί βγάζει σφάλμα.

Ευχαριστώ πολύ !!! Θα ξαναδοκιμάσω άμεσα τις οδηγίες σου για να βάλω τα buttons...

Μάδε


AATON είπε... Best Blogger Tips

*** Μάδε, ευχαριστώ πολύ. Για το πρόβλημα που αναφέρεις, προσωπικά σε μένα δεν βγάζει σφάλμα και χρησιμοποιώ ακριβώς αυτόν τον κώδικα.


Μάδε είπε... Best Blogger Tips

Ακολουθώ ακριβώς τις οδηγίες και μου βγάζει το πρακάτω σφάλμα:

Δεν ήταν δυνατή η ανάλυση του προτύπου σας, επειδή δεν είναι σωστά μορφοποιημένο. Βεβαιωθείτε ότι όλα τα στοιχεία XML είναι σωστά κλεισμένα.
Μήνυμα σφάλματος XML: The element type "a" must be terminated by the matching end-tag "".

Μώλις κλείνω το tag το δέχετε αλλά δεν εμφανίζονται τα buttons...

Κάνω κάτι λάθος?


AATON είπε... Best Blogger Tips

θα ήθελες να το αναλάβω εγώ;


Μάδε είπε... Best Blogger Tips

Ξέρω γω, άν έχεις χρόνο και θέλεις... :)


AATON είπε... Best Blogger Tips

Κάνε με διαχειριστή (http://nikos63.blogspot.com/2009/04/blog.html)


Μάδε είπε... Best Blogger Tips

Σε ευχαριστώ πάρα πολύ...!!! Νά'σε καλά :) Πώς το έβαλες?


AATON είπε... Best Blogger Tips

Όπως δείχνω στην ανάρτηση :)


Μάδε είπε... Best Blogger Tips

Μ'αρέσει που το δοκίμασα 3-4 φορές και έκανα σε όλες λάθος... Τέλος πάντον... Σε ευχαριστώ και πάλι !!!


Αstrapi είπε... Best Blogger Tips

Πολύ βολικό κι εύκολο φίλε Νίκο...Σε ευχαριστώ για τις βοήθειες που προσφέρεις...


traveler είπε... Best Blogger Tips

aaton help!!! evala ta velakia sto blog alla to katw velaki den me paei sto telos tis selidas alla ligo parakatw, ti den kanw kala??


AATON είπε... Best Blogger Tips

@traveler σε οδηγεί παρακάτω, γιατί ο κώδικας του προτύπου σου έχει "και παρακάτω" στοιχεία, και το βελάκι, απλά κάνει τη δουλειά του σωστά :))


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

Πες πως δεν έχεις χρόνο να σχολιάσεις.. να 'χεις πάρει όμως σοβαρό ύφος, καλά;

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.

Next Next Next