Εδώ θα σας εξηγήσουμε πως να φτιάξετε εύκολα & γρήγορα κουμπιά για το blog σας με τη χρήση κώδικα css.
Κουμπιά υπάρχουν δύο ειδών.
Τα απλά-normal & τα εναλλαγής-rollover είτε με εικόνα για background είτε όχι.
Από κει & πέρα με συνδιασμούς μπορείτε να φτιάξετε κι άλλα για οποιαδήποτε χρήση θέλετε.
Τώρα θα μου πείτε που μπορείτε να το χρησιμοποιήσετε κάτι τέτοιο;
Στο Διαβάστε περισσότερα σας κάνει σαν ιδέα...εε;;
Να φτιάξετε δύο κουμπιά διαφορετικού χρώματος ή εικόνας & όταν πάει ο κέρσορας πάνω ν'αλλάζει.
Άλλο....
Στο email σας...., στο banner σας ή στα φιλικά bannerάκια σας.
Κι αν καθήσετε & σκεφτείτε θα βρείτε κι άλλα σημεία.
Τι σας λέω τώρα....
χμμμμ....
Με την εμπειρία που απέκτησα κοντά δυο χρόνια στην blogόσφαιρα, θα προτιμήσετε να το δείτε κάπου & να το "κλέψετε", παρά να κουράσετε το κουτοπόνηρο μυαλουδάκι σας.
Θέλω να σας πω τα εξής, πως η σχεδίαση μιας σελίδας είτε αυτή είναι ένα blog είτε μια ιστοσελίδα θέλει φαντασία με πρωτότυπες ιδέες χωρίς αντιγραφές από τρίτους & να βάλετε τα πράγματα που διαθέτετε σε μια τάξη.
Να φτιάξετε κάτι που σας εκφράζει & σας αντιπροσωπεί.
Παράλληλα θα κοιτάξετε να είναι λειτουργική και το περιβάλλον της να μην είναι κουραστικό για τους αναγνώστες σας.
Αυτά τα λίγα κι όποιος καταλάβε.....κατάλαβε.
Ας πάμε να δούμε το κουμπάκι γιατί με 10 λεπτά κύρηγμα δε νομίζω ν' αλλάξετε, έτσι μάθατε & έτσι πορεύεστε.
Λοιπόν....
Ο βασικός σκελετός κώδικα css που θέλουμε είναι ο παρακάτω για ένα απλό "κουμπάκι"
όπου έχουμε πλάτος, ύψος, χρώμα κειμένου, αποστάσεις & εμφάνιση με στρογγυλεμένες γωνίες
<style>
.button{
display:block;
width:120px;
height:40px;
border-radius:10px;
background:#555;
color:#fff;
text-align:center;
padding-top:15px;
}
</style>
Τώρα στο συγκεκριμένο κουμπί για να το μετατρέψετε σε rollover, το μόνο που πρέπει να κάνετε είναι να του προσθέσετε το hover* στον κώδικα, με μια διαφοροποίηση στα χρώματα για να φανεί η διαφορά.
* (δηλαδή όταν ο κερσορας περάσει από πανω του να διαφοροποιηθεί.
Η διαφορά μπορεί να γίνει αλλάζοντας το χρώμα του backgound, το μέγεθος της γραμματοσειράς ή το στυλ της από έντονα σε πλάγια...κτλ )
Οπότε ο κώδικας θα είναι έτσι...
<style>
.button{
display:block;
width:120px;
height:40px;
border-radius:10px;
background:#555;
color:#fff;
text-align:center;
padding-top:15px;
}
.button:hover{
background:#888;
color:#fff;
text-decoration:none;
}
</style>
Η χρήση του μπορεί να γίνει είτε μέσα στο css του blog σας, δηλαδή πριν το ]]></b:skin> , είτε σε ξεχωριστό gadget.
Απλά θα πρέπει να προσθέσετε & τον σύνδεσμο για να μπορέσει να δουλέψει.
π.χ. < a href= "...ο σύνδεσμος σας..." class = "...το ID που θα δώσετε π.χ. button..." >...ο τίτλος π.χ contact me...< /a >
Δείτε κάποια σχέδια που έφτιαξα & πάρτε ιδέες για τα δικά σας.
Δημοσίευση σχολίου Blogger Facebook
Παρακαλώ, την προσοχή σας ! ! !
* Εάν εντοπίσετε κάποιο πρόβλημα σε κάποια δημοσίευση (μη ενεργός συνδεσμος λ.χ. ή οτιδήποτε άλλο), παρακαλούμε κάντε τον κόπο να γράψετε στα σχόλιά σας, το οποιοδήποτε πρόβλημά σας, ώστε να προβούμε στην άμεση διόρθωσή του.
Επίσης, μπορείτε να αποστείλετε ένα "Ευχαριστώ" προς όσους ασχολήθηκαν & σας προσέφεραν ένα... κομμάτι από τη γνώση τους.
Παράκληση προς τους φίλους αναγνώστες-σχολιαστές:
* Να αποφεύγετε να γράφετε με greekglish γιατί τα σχόλιά σας ΔΕΝ θα γίνονται δεκτά.
* Αποφεύγετε το spamάρισμα στα σχόλια. - Please don't spam me!
* Σε περίπτωση που δεν έχετε καταλάβει κάτι, επικοινωνήστε μαζί μας μέσα από την φόρμα των σχολίων και θα σας απαντήσουμε σε εύλογο χρόνο, γι' αυτό ΜΗΝ καταφεύγετε στη αποστολή e-mail για τις όποιες απορίες σας.
* Χρησιμοποιήστε το Reply (που βρίσκεται κάτω από την εικόνα χρήστη), αν θέλετε να του απευθύνετε το λόγο, ή να απαντήσετε σε προυγούμενο σχόλιο.
* Το μέγιστο όριο χαρακτήρων είναι 4.096
* Τα σχόλιά σας θα δημοσιεύονται μετά τον απαραίτητο έλεγχο.
Σημείωση: Όσοι θέλετε να παίρνετε ειδοποιήσεις για τα σχόλια που κανετε, μην ξεχάσετε να τικάρετε το κουμπί "Να λαμβάνω ειδοποιήσεις"
Σας Ευχαριστούμε για την κατανόηση και την επίσκεψή σας.!