Follow my blog with Bloglovin

Τα βλέπεις παντού τελευταία! Είναι απλά, ευδιάκριτα, υπηρετούν το ρόλο τους χωρίς πολλές φανφάρες και αρέσουν. Αρέσουν πολύ!
Είναι τα εικονίδια social media Font-Awesome και σήμερα θα σου δείξω πως να τα βάλεις στο blog σου!

 Θέλεις το blog σου να το βρίσκουν εύκολα μέσω των μηχανών αναζήτησης; Τότε πρέπει να αρχίσεις την καμπάνια του, προωθώντας το μέσω των κουμπιών κοινωνικής δικτύωσης!

Είναι ελάχιστοι πια όσοι δεν χρησιμοποιούν κουμπάκια κοινωνικής δικτύωσης στο blog τους. Ο blogger που σέβεται τον εαυτό του και τους αναγνώστες του, φροντίζει ευκρινώς να ενημερώνει για τα μέσα κοινωνικής δικτύωσης που συμμετέχει προωθώντας τη δουλειά του, το blog του, τον εαυτό του βρε αδερφέ! Γιατί όλα πια θέλουν την κατάλληλη προώθηση· και διαφήμιση.

Τα κουμπάκια font-awesome για τα οποία σας μιλώ σήμερα είναι τόσο απλά, διακριτικά και όμορφα που όλοι υποκλινόμαστε μπροστά τους!
Και σου υπόσχομαι πως η εφαρμογή τους είναι τόσο απλή που θα τα βάλει και ο πιο άσχετος -στα τεχνικά θέματα- blogger!

Τι είναι όμως τα εικονίδια font-awesome;

Πρόκειται για σενάριο κώδικα που περιέχει εικονίδια vector.  Δεν καθυστερούν το ανέβασμα του blog, είναι δωρεάν και εύκολα εφαρμόσιμα.

Πως τα εφαρμόζουμε στο blogger blog;

Πρώτα από όλα, μπείτε στον κώδικα του blog σας και ακριβώς κάτω από το (θα το βρείτε στις πρώτες γραμμές του κώδικα) προσθέστε το σενάριο:

Αποθηκεύστε και ήδη έχετε τελειώσει με το πρώτο βήμα!

Τώρα, μέσα από τη διάταξη, ανοίξτε ένα gadget Προσθήκη html/javascript και προσθέστε τον παρακάτω κώδικα:

Όπου "ΔΙΕΥΘΥΝΣΗ..." βάζετε φυσικά τη διεύθυνση του συγκεκριμένου social media όπου βρίσκεστε. Τα άλλα όλα θα τα κάνει μόνο του το σενάριο!
Τελειώσατε και με το δεύτερο βήμα!

Πάμε τώρα στο τρίτο και τελευταίο βήμα που είναι και αυτό που θα εμφανίσει τα font-awesome εικονίδια στο blog σας!

Πίσω στο Πρότυπο → Προσαρμογή → Προηγμένη → Προσθήκη CSS
και προσθέτουμε τον παρακάτω κώδικα:

.fa {
color: $(link.color);
width: 20px;
height: 20px;
padding-top: 5px;
border-radius: 5px;
font-size: 18px;
}
.fa:hover {
color: $(link.hover.color);
}
#socialmedia a {
padding: 0px 2px;
}

[Τον οποίο και βρήκα στην Carrie και πολύ με έχει εξυπηρετήσει, το ομολογώ!]
Αποθηκεύστε και είστε έτοιμοι!
Τώρα, όσοι από εσάς το έχετε με το css, μπορείτε να "παίξετε" με τα μεγέθη, τις αποστάσεις ή τα χρώματα μέχρι να καταλήξετε στο αποτέλεσμα που θα θέλατε.

Δεν είναι υπέροχα;
Αν σας αρέσουν οι συμβουλές πάνω στο blogging και τα tips που αναρτώ, ακολουθήστε με και στο bloglovin για να μην χανόμαστε!

Μέχρι να τα ξαναπούμε, σας εύχομαι να περνάτε υπέροχα το καλοκαίρι σας!