Σήμερα θέλω να θέσω ένα ιδιαίτερο θέμα στο τραπέζι, την διαμόρφωση του Widget για Ετικέτες.
Όλα αυτά τα χρόνια που είμαι στον χώρο του Blogging, έχω δει χιλιάδες Widget για ετικέτες και έχω ενημερωθεί για την ύπαρξη άλλων τόσων. Δεν είχα ξαναδεί ποτέ όμως ένα Widget το οποίο είναι τόσο εύκολο στην εγκατάσταση και εμφανίζει όλες τις ετικέτες σε διαφορετικό χρώμα.
Βρίσκω αυτό το Widget αρκετά όμορφο, με επιβλητικό και πρωτότυπο Design και πιστεύω ότι σε σχέση με το σχεδόν απαρατήρητο Widget που σου δίνει ο Blogger, θα βοηθήσει και εσάς στο να έχετε μια πιο όμορφη παρουσία του Blog αλλά και τον επισκέπτη που θα περιηγηθεί καλύτερα.
Ακολουθήστε τα παρακάτω βήματα για την εγκατάσταση:
1) Σύνδεση στον Blogger
2) Διάταξη > Προσθήκη Gadget > Ετικέτες
3) Επιλέγουμε τα κουτάκια ώστε το Gadget μας να είναι όπως στην φωτογραφία.
4) Πηγαίνουμε Πρότυπο
5) Επεξεργασία HTML
6) Στους κώδικες τώρα, με την βοήθεια του CTRL + F ψάχνουμε για το:
]]></b:skin>
7) Ακριβώς από πάνω προσθέτουμε τον παρακάτω κώδικα:
/*-------------------------------------
Sidebar Label Cloud By Blogger Tricks
--------------------------------------- */
.sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;}
.sidebar .label-size a {
color:#fff!important;
background:#222;
padding:8px 22px;
margin:0 3px 3px 0;
float:left;
display:block;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.sidebar .label-size-1 a {background:#FF8000}
.sidebar .label-size-2 a {background:#F6FF03}
.sidebar .label-size-3 a {background:#FB2903}
.sidebar .label-size-4 a {background:#298A08}
.sidebar .label-size-5 a {background:#084B8A}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {
background:#2288bb; color:#fff; text-decoration:none}
.sidebar .label-size span {
background:#2288bb;
color:#fff;
padding:8px 22px;
margin:0 0 3px;
clear:both;
float:left;
}
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:16px;
font-family:'Oswald', sans-serif;
color:#fff;
}
.sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;}
Sidebar Label Cloud By Blogger Tricks
--------------------------------------- */
.sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;}
.sidebar .label-size a {
color:#fff!important;
background:#222;
padding:8px 22px;
margin:0 3px 3px 0;
float:left;
display:block;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.sidebar .label-size-1 a {background:#FF8000}
.sidebar .label-size-2 a {background:#F6FF03}
.sidebar .label-size-3 a {background:#FB2903}
.sidebar .label-size-4 a {background:#298A08}
.sidebar .label-size-5 a {background:#084B8A}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {
background:#2288bb; color:#fff; text-decoration:none}
.sidebar .label-size span {
background:#2288bb;
color:#fff;
padding:8px 22px;
margin:0 0 3px;
clear:both;
float:left;
}
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:16px;
font-family:'Oswald', sans-serif;
color:#fff;
}
.sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;}
8) Αποθήκευση και τέλος
πηγη
