Αυτόματη υπογράμμιση στο blog σας

Χρήστος Διολής 291 views0

sliding underlines on blogger
Μοιράσου το

Σε αυτήν την ανάρτηση θα δούμε ένα εφέ με το οποίο όταν πηγαίνουμε τον κέρσορα πάνω από μια πρόταση αυτομάτως υπογραμμίζεται. Δημιουργείτε με κώδικα CSS και είναι αρκετά χρήσιμο όταν θέλουμε να τραβήξουμε την προσοχή στους αναγνώστες-επισκέπτες του blog μας, σε κάποιες λέξεις η προτάσεις, των κειμένων μας.

Για να το δημιουργήσετε και εσείς για το δικό σας  blog ακολουθήστε τα εξής βήματα:

1. Θα πρέπει πρώτα να εγκαταστήσουμε τον κώδικα  CSS και για να γίνει αυτό, απλώς αντιγράψτε τον ακόλουθο κώδικα.

[syntax_highlighter mode=”HTML mixed-mode(CSS+JavaScript)” height=”600″ font=”Default” font_size=”14″ wrap=”0″]JTNDc3R5bGUlM0UlMEElMkYlMkElMjBVbmRlcmxpbmUlMjBTbGlkZSUyMCUyQSUyRiUwQS51c2xpZGUlMjAlN0IlMEFkaXNwbGF5JTNBJTIwaW5saW5lLWJsb2NrJTNCJTBBJTdEJTBBLnVzbGlkZSUzQWFmdGVyJTIwJTdCJTBBY29udGVudCUzQSUyMCUyNyUyNyUzQiUwQWRpc3BsYXklM0ElMjBibG9jayUzQiUwQWhlaWdodCUzQSUyMDNweCUzQiUwQXdpZHRoJTNBJTIwMCUzQiUwQWJhY2tncm91bmQlM0ElMjB0cmFuc3BhcmVudCUzQiUwQXRyYW5zaXRpb24lM0ElMjB3aWR0aCUyMC41cyUyMGVhc2UlMkMlMjBiYWNrZ3JvdW5kLWNvbG9yJTIwLjVzJTIwZWFzZSUzQiUwQSU3RCUwQS51c2xpZGUlM0Fob3ZlciUzQWFmdGVyJTIwJTdCJTBBd2lkdGglM0ElMjAxMDAlMjUlM0IlMEFiYWNrZ3JvdW5kJTNBJTIwJTIzOTkwMDAwJTNCJTBBJTdEJTBBJTJGJTJBU2xpZGUlMjBSaWdodCUyMFRvJTIwTGVmdCUyQSUyRiUwQS51c2xpZGUyJTIwJTdCJTBBZGlzcGxheSUzQSUyMGlubGluZS1ibG9jayUzQiUwQXBvc2l0aW9uJTNBJTIwcmVsYXRpdmUlM0IlMEFwYWRkaW5nLWJvdHRvbSUzQSUyMDNweCUzQiUwQSU3RCUwQS51c2xpZGUyJTNBYWZ0ZXIlMjAlN0IlMEFjb250ZW50JTNBJTIwJTI3JTI3JTNCJTBBZGlzcGxheSUzQSUyMGJsb2NrJTNCJTBBcG9zaXRpb24lM0ElMjBhYnNvbHV0ZSUzQiUwQXJpZ2h0JTNBJTIwMCUzQiUwQWJvdHRvbSUzQSUyMDAlM0IlMEFoZWlnaHQlM0ElMjAzcHglM0IlMEF3aWR0aCUzQSUyMDAlM0IlMEFiYWNrZ3JvdW5kJTNBJTIwdHJhbnNwYXJlbnQlM0IlMEF0cmFuc2l0aW9uJTNBJTIwd2lkdGglMjAuNXMlMjBlYXNlJTJDJTIwYmFja2dyb3VuZC1jb2xvciUyMC41cyUyMGVhc2UlM0IlMEElN0QlMEEudXNsaWRlMiUzQWhvdmVyJTNBYWZ0ZXIlMjAlN0IlMEF3aWR0aCUzQSUyMDEwMCUyNSUzQiUwQWJhY2tncm91bmQlM0ElMjAlMjM5OTAwMDAlM0IlMEElN0QlMEElM0MlMkZzdHlsZSUzRSUwQQ==[/syntax_highlighter]

2. Στην συνέχεια πηγαίνετε στο μενού blogger > Πρότυπο > Προσαρμογή > Προηγμένη >  Προσθήκη CSS και επικολλήστε τον κώδικα στο πλαίσιο που εμφανίζεται και μετά πατήστε Εφαρμογή στο ιστολόγιο.

3. Όποτε θέλετε να εφαρμόσετε το εφέ θα πηγαίνετε blogger > Διάταξη >Προσθήκη gadget > HTML/JavaScript η Κείμενο ή στο HTML section της ανάρτησης και θα βάζετε τον παρακάτω κώδικα:

[syntax_highlighter mode=”HTML mixed-mode(CSS+JavaScript)” font=”Default” wrap=”0″ font_size=”14″]JTNDZGl2JTIwY2xhc3MlM0QlMjJ1c2xpZGUlMjIlM0UlQ0UlOTUlQ0UlOTQlQ0UlQTklMjAlQ0UlQTQlQ0UlOUYlMjAlQ0UlOUElQ0UlOTUlQ0UlOTklQ0UlOUMlQ0UlOTUlQ0UlOUQlQ0UlOUYlMjAlQ0UlQTMlQ0UlOTElQ0UlQTMlMkZkaXYlM0UlMEElMEElQ0UlQkElQ0UlQjElQ0UlQjklMjAlQ0UlQjMlQ0UlQjklQ0UlQjElMjAlQ0UlQjElQ0UlQkQlQ0YlODQlQ0UlQUYlQ0YlODMlQ0YlODQlQ0YlODElQ0UlQkYlQ0YlODYlQ0UlQjElMEElMEElM0NkaXYlMjBjbGFzcyUzRCUyMnVzbGlkZTIlMjIlM0UlQ0UlOTUlQ0UlOTQlQ0UlQTklMjAlQ0UlQTQlQ0UlOUYlMjAlQ0UlOUElQ0UlOTUlQ0UlOTklQ0UlOUMlQ0UlOTUlQ0UlOUQlQ0UlOUYlMjAlQ0UlQTMlQ0UlOTElQ0UlQTMlM0MlMkZkaXYlM0UlMEE=[/syntax_highlighter]

Δείτε εδώ το demo που έχουμε δημιουργήσει.