Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




4 Dancing Links / Κινούμενα Λινκ

Νέοι bloggers γεια σας !!!Υπάρχει τρόπος να κάνουμε τα links και τις εικόνες στο blog μας να κινούνται όταν περνάμε από πάνω τους το ποντίκι μας...Σήμερα θα σας δώσω τον κώδικα για να κάνετε τα links στο ιστολόγιο σας να κινούνται όταν περνάτε το ποντίκι σας από πάνω τους !!!Δείτε την εικόνα, και το παράδειγμα εδώ....
Demo link No 1
Demo link No 2

Βρείτε τη φράση  </head>  (με ctrl F) όπως δείχνει στην εικόνα:

και ΠΑΝΩ από αυτή, βάλτε τον κώδικα:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
    var dur = 400; // Duration Of Animation in Milli Seconds
    $(document).ready(function() {
        $('a.linknudge').hover(function() {
            $(this).animate({
                paddingLeft: '25px'
            }, dur);
        }, function() {
            $(this).animate({
                paddingLeft: 0
            }, dur);
        });
    }); // end of Jquery Script
</script>
Πατήστε SAVE / ΑΠΟΘΗΚΕΥΣΗ.....
Τώρα όποτε βάζετε ένα link, θα προσθέτετε τη φράση  class='linknudge' για να λειτουργήσει η κίνηση...(αν δεν τη βάλετε δεν θα κινείται)...δηλαδή, ......παράδειγμα:
<a class='linknudge' href='http://www.blogger.com/'>Dr-Blogger</a>

***η κόκκινη φράση είναι που θα κινεί το link
***τη μπλε φράση, αλλάξτε τη με το δικό σας link.....
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!!(ότι απορία σας, στείλτε τη με email η σχόλιο!!!!
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
Related Posts Plugin for WordPress, Blogger...
Print Friendly and PDF

4 σχόλια:

pandelees karagiann είπε...

Υπάρχει τρόπος να το κάνουμε και με css3 κώδικα (μόνον...χωρίς js), αλλά θα το παρουσιάσω σε άλλη ανάρτηση !!!

Ανώνυμος είπε...

Μράβο Παντελή. Εισαι πρωτοπόρος
Γ. Γιαννόπουλος

ΙΡΙΣ ΡΟΔΗ ΣΙΟΝΑΚΙΔΟΥ είπε...
Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.
pandelees karagiann είπε...

Ιρις, το γραφω...
στο κώδικα του προτύπου του blog...Βρείτε τη φράση </head> (με ctrl F) όπως δείχνει στην εικόνα, και ΠΑΝΩ από αυτή, βάλτε τον κώδικα: