2 ΒΑΛΤΕ ΕΙΚΟΝΙΔΙΟ ΣΤΙΣ ΕΤΙΚΕΤΕΣ(LABELS) ΚΑΙ ΣΤΟΥΣ ΣΥΝΔΕΣΜΟΥΣ(LINKS) ΣΤΗΝ ΠΛΕΥΡΙΚΗ ΣΤΗΛΗ(SIDEBAR)

Προσθέτοντας εικονίδιο δίπλα απο τις ετικέτες σας ή σε οποιουσδήποτε άλλους συνδέσμους θα δείχνει στο blog σας κάτι ξεχωριστό και πολύ όμορφο...Πρίν επεξεργαστείτε τον HTML του Blog σας πρέπει να κάνετε λίγα πράγματα.

• Η εικόνα που θα διαλέξετε πρέπει να έχει μέγεθος 16x16(px) ή και μικρότερη.Θα βρείτε πολλά arrows icons με διαφανές φόντο στην σελίδα FINTICONS/ARROWS και οι περισσότερες σε μέγεθος 16x16(px).Δεξί κλικ (copy image location)..(θα δείτε παρακάτω που πρέπει να το επικολλήσετε)
• ;Άν έχετε εικονίδιο αποθηκευμένο σε δικό σας φάκελο τότε ανεβάστε την εικόνα σας σε δωρεάν υπηρεσιές φιλοξενίας ιστοσελίδων(Photobucket,Tinypic,Picasa)ώστε να αντιγράψετε το url της εικόνας

 Προχωράμε τώρα στα γνωστά εξής βήματα:
Πίνακας ελέγχου ►Διάταξη►Επεξεργασία HTML►Λήψη πλήρους προτύπου

•  Βρείτε το παρακάτω τμήμα κωδικού

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

• Αντικαταστήστε το παραπάνω με αυτόν τον κωδικό(Επειδή μπορεί να διαφέρει λίγο ο κωδικός στο δικό σας πρότυπο,απλά βρείτε το ".sidebar ul" και το ".sidebar li" και αντικαταστήστε τα με το παρακάτω κωδικό

.sidebar ul {

list-style:none;

margin:0 0 0;

padding:10px 0 0;

}

.sidebar ul li {

background:url("http://i33.tinypic.com/332b6dt.jpg") no-repeat 2px .25em;

margin:0;

padding:0 0 3px 16px;

margin-bottom:2px;

text-indent:7px;

line-height:1.3em;
}

-Αντικαταστήστε το ("url εικόνας") που είναι με πορτοκαλί χρώμα,με το url της δικιάς σας εικόνας
-Επίσης το σημείο που είναι με ρόζ χρώμα είναι η απόσταση  μεταξύ του εικονιδίου και του    κειμένου(αν αυξήσετε τα px αυξάνεται και η απόσταση)
 -Στο πράσινο μέρος αλλάζετε το κάθετο διάστημα(ύψος γραμμής)μεταξύ των συνδέσεων)
►Προεπισκόπηση
ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ







ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!