Ads 468x60px

Τετάρτη, 17 Φεβρουαρίου 2016

Sliding Underlines On Blogger: Αυτόματη Υπογράμμιση στις προτάσεις

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






Για να το εγκαταστήσετε και εσείς ακολουθήστε τα εξής βήματα..


1ον:Θα πρέπει πρώτα να εγκαταστήσουμε τον κώδικα  CSS και για να γίνει
αυτό

αντιγράψτε τον ακόλουθο  κώδικα: 


..............................................................................................................................................................
<style>
/* Underline Slide */
.uslide {
display: inline-block;
}
.uslide:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide:hover:after {
width: 100%;
background: #990000;
}
/*Slide Right To Left*/
.uslide2 {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.uslide2:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide2:hover:after {
width: 100%;
background: #990000;
}
</style>
.......................................................................................................................................................

και για να τον επικολλήσετε  





  Αυτό ήταν τώρα όποτε θέλετε να εφαρμόσετε το εφέ θα




Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript η Κείμενο

η στο HTML section της ανάρτησης

 και στο παράθυρο που θα ανοίγει θα χρησιμοποιείτε  τον  ακόλουθο κώδικα
........................................................................................................................................


<div class="uslide">ΕΔΩ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ/div>


και για αντίστροφα

 <div class="uslide2">ΕΔΩ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</div>

.......................................................................................................................................

Καλή επιτυχία!!!!


Πηγή κώδικα
thanks to spiceupyourblog.com/



Edit by



0 σχόλια :

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

Icon Icon Icon

spice up your blog