Προσθέστε Feed εικόνα η οποιαδήποτε εικόνα στις ετικέτες σας

   Σήμερα θα δούμε πως μπορούμε να προσθέσουμε στις    ετικέτες ( Labels ) μας feed εικόνα η όποια εικόνα θέλουμε  με 2   τρόπους .

    1ος τρόπος :

  Προσθέτουμε feed  εικόνα στις ετικέτες μας  και δίνουμε στην κάθε  ετικέτα μας ξεχωριστά feed  . 

 Έτσι αν κάνει κλικ κάποιος σε κάποιο από τα εικονίδια θα  μεταφερθεί  στη σελίδα τροφοδοσίας RSS για την εν λόγω  κατηγορία και θα έχει  τη δυνατότητα να γίνει  συνδρομητής στην συγκεκριμένη κατηγορία . 

Ας δούμε τώρα πως θα το κάνουμε αυτό .

Βήμα 1.

Πηγαίνετε  Διάταξη ► 'Επεξεργασία HTML ► Επιλογή πλαισίου Επέκταση προτύπων γραφικών στοιχείων

Πάντα πριν κάνουμε οποιαδήποτε ενέργεια  κάνουμε   Λήψη πλήρους προτύπου , για να είμαστε ασφαλείς ότι , σε περίπτωση που κάτι δεν πάει σωστά να είμαστε σε θέση να επαναφέρουμε το πρότυπο μας στην προηγούμενη κατάσταση

Βήμα 2.

Τώρα πρέπει  να βρούμε ένα μικρό τμήμα του html κώδικα στο blogs μας .


Εδώ είναι η ενότητα που  πρέπει να βρούμε :

<b:loop values='data:labels' var='label'> 
<li> 
<b:if cond='data:blog.url == data:label.url'> 
<span expr:dir='data:blog.languageDirection'><data:label.name/></span> 
<b:else/> 
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/></a> 
</b:if> 
<span dir='ltr'/> 
</li> 
</b:loop>

  Ο καλύτερος τρόπος για να βρείτε το σημείο είναι να βρείτε την πρώτη γραμμή του κώδικα που εμφανίζεται παρακάτω:

<b:loop values='data:labels' var='label'>

Σημείωση: Κάντε κλικ στο κουμπί CTRL + f  και θα εμφανιστεί ένα κουτάκι  αναζήτησης για να βρείτε τον κώδικα

Τώρα από την πρώτη γραμμή μπορείτε να κοιτάξετε προς τα κάτω για να εντοπίσετε το σύνολο του τμήματος.

Η ενότητα αρχίζει με -- <b: loop.....
Και τελειώνει με -- </ b: loop>

<b:loop values='data:labels' var='label'> 
<li> 
<b:if cond='data:blog.url == data:label.url'> 
<span expr:dir='data:blog.languageDirection'><data:label.name/>
</span> 
<b:else/> 
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/></a> 
</b:if> 
<span dir='ltr'/> 
</li> 
</b:loop>

Βήμα 3.

Τώρα θα αντικαταστήσετε αυτό το τμήμα του κώδικα με τον παρακάτω κώδικα:

<b:loop values='data:labels' var='label'> 
<li> 
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + 
data:label.name'>
<img alt='Subscribe To Label' 
src='http://lh3.ggpht.com/_L116RpGjEMY/S4Vya_hKIQI/AAAAAAAABPI/7O61yhWB7F4/rss-feed-16_thumb.png'
 style='vertical-align:middle;border:0'/></a> 
<b:if cond='data:blog.url == data:label.url'> 
<span expr:dir='data:blog.languageDirection'><data:label.name/></span> 
<b:else/> 
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/></a> 
  </b:if> 
  <span dir='ltr'/> 
</li> 
</b:loop>

Δείτε την εικόνα παρακάτω :




   Μόλις  αντικαταστήσετε τον κωδικό κάνετε προεπισκόπηση και αν είναι όλα εντάξει αποθηκεύσετε το πρότυπό σας και θα έχουν προστεθεί  rss feed  εικόνες σας.

Μπορείτε να δείτε το αποτέλεσμα σε λειτουργία  εδώ . 

Εδώ είναι ένα screenshot με το τελικό  το αποτέλεσμα:

2ος τρόπος :

Απλά προσθέτουμε στις λίστες του  sidebar στα ul \ li  εικόνες με προσθήκη CSS κώδικα

   Βρείτε τον παρακάτω κώδικα στο πρότυπο σας  :

.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 { 
  list-style: disc url(Image URL) inside;
  vertical-align: top;
  padding: 0;
  margin: 0;
}
 
.sidebar li {
  vertical-align: top;
  padding: 0;
  margin: 0;
}

Αλλάξετε το url της εικόνας με την εικόνα που εσείς θέλετε και αποθηκεύετε το πρότυπο σας .
Τώρα αν θέλετε με το πέρασμα του ποντικιού ( mouse over )  να να εμφανίζετε άλλη εικόνα  , απλά προσθέστε τις παρακάτω γραμμές μετά τον παραπάνω κώδικα

.sidebar ul li:hover {
    background: transparent url(http://lh6.ggpht.com/_Q6tRnBVZnko/S4VF2rPi7cI/AAAAAAAAAJE/awHj7pG0m64/BlockContentBullets.png) no-repeat scroll 0 5px;
}

 
Αλλάζετε  την διεύθυνση URL των εικονιδίων που χρησιμοποιούνται, αν θέλετε .


Μπορείτε να δείτε το αποτέλεσμα σε λειτουργία  εδώ .


Παρακάτω σας δίνω μερικές εικόνες που θα μπορούσατε να χρησιμοποιήσετε , απλά κάντε δεξί κλικ και  αντιγράψτε την διεύθυνση URL των εικονιδίων