Tag cloud No3- dr-blogger

Tag cloud No3

Φίλοι bloggers, βρήκα ένα ακόμα tag cloud και σας το παρουσιάζω...Μπορείτε να βάλετε όλο το κώδικα σαν gadget, html/javascript....μπορείτε επίσης να προσαρμόσετε τα χρώματα, ωστε να ταιριάζουν με τα χρώματα του blog σας...

Ο ΚΩΔΙΚΑΣ:

<style>

.tagcloud {
width:300px;
margin:10px auto;
font-family:Times;
text-align:center;
padding:15px 8px;
border:solid 1px #000;
background:#F4FA58;
}
.tcloud {
padding:3px 6px;
text-decoration:none;
-o-transition:all 0.6s ease-in;
-moz-transition:all 0.6s ease-in;
-webkit-transition:all 0.6s ease-in;
}
.tcloud:link {
color:#003EBA;
}
.tcloud:visited {
color:#ff900;
}
.tcloud:hover {
color:#ffffff;
background:#08298A;
text-decoration:none;
}
.tcloud:active {
color:#ffffff;
background:#5D7CBA;
}

</style>

<div class="tagcloud">
<a style="font-size:10px" class="tcloud" href="ΕΤΙΚΕΤΑ-1" title="Title ΕΤΙΚΕΤΑ-1">ΕΤΙΚΕΤΑ-1</a>
<a style="font-size:16px" class="tcloud" href="ΕΤΙΚΕΤΑ-2" title="Title ΕΤΙΚΕΤΑ-2"> ΕΤΙΚΕΤΑ-2</a>
<a style="font-size:18px" class="tcloud" href="ΕΤΙΚΕΤΑ-3" title="Title ΕΤΙΚΕΤΑ-3">ΕΤΙΚΕΤΑ-3</a>
<a style="font-size:14px" class="tcloud" href="ΕΤΙΚΕΤΑ-4" title="Title ΕΤΙΚΕΤΑ-4">ΕΤΙΚΕΤΑ-4</a>
<a style="font-size:27px" class="tcloud" href="ΕΤΙΚΕΤΑ-5" title="Title ΕΤΙΚΕΤΑ-5">ΕΤΙΚΕΤΑ-5</a>
<a style="font-size:22px" class="tcloud" href="ΕΤΙΚΕΤΑ-6" title="Title ΕΤΙΚΕΤΑ-6">ΕΤΙΚΕΤΑ-6</a>
<a style="font-size:14px" class="tcloud" href="ΕΤΙΚΕΤΑ-7" title="Title ΕΤΙΚΕΤΑ-7">ΕΤΙΚΕΤΑ-7</a>
<a style="font-size:18px" class="tcloud" href="ΕΤΙΚΕΤΑ-8" title="Title ΕΤΙΚΕΤΑ-8">ΕΤΙΚΕΤΑ-8</a>
<a style="font-size:10px" class="tcloud" href="ΕΤΙΚΕΤΑ-9" title="Title ΕΤΙΚΕΤΑ-9">ΕΤΙΚΕΤΑ-9</a>
<a style="font-size:14px" class="tcloud" href="ΕΤΙΚΕΤΑ-10" title="Title ΕΤΙΚΕΤΑ-10">ΕΤΙΚΕΤΑ-10</a>
</div>

***στο πρώτο μέρος του κώδικα (css) αλλάξτε τα χρώματα (πχ #ffffff)
***στο δευτερο μέρος, αλλάξτε αν θέλετε τα μεγέθη της γραμματοσειράς (πχ "font-size:10px)
***όπου href="ΕΤΙΚΕΤΑ-1" βαλτε τα link / url των ετικετών του blog σας...
***όπου title="Title ΕΤΙΚΕΤΑ-1">ΕΤΙΚΕΤΑ-1 βάλτε τον τίτλο και την ονομασία της ετικέτας...
***βάλτε κι άλλες ετικέτες, πολαπλασιάζοντας τη φράση <a style="font-size:27px" class="tcloud" href="ΕΤΙΚΕΤΑ-5" title="Title ΕΤΙΚΕΤΑ-5">ΕΤΙΚΕΤΑ-5</a>
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!

3 σχόλια:

Litsa Georgiadou είπε...: Πολύ χρήσιμα όλα όσα μας δείχνεις. Δοκίμασα το gadget σου "Tag cloud" με τις οδηγίες σου και πολλές δοκιμές κατάφερα να το φέρω στα μέτρα μου το μόνο που με δυσκολεύει είναι να βάλω την URL σε κάθε ετικέτα. Θα ήμουν ευγνώμων αν μου έλεγες πως βρίσκω την σωστή url και την επικόλληση της στο code με ένα παράδειγμα. Επισης γίνεται να έχει καθε ετικέτα άλλο χρώμα? Κανω δοκιμές στο http://litsatest.blogspot.gr/Ευχαριστώ για τον χρονο σου.; 1/2/15, 2:46 π.μ.
pandelees karagiann είπε...: Λιτσα, κοιτα ενα παραδειγμα πως βαζεις το url:

<a style="font-size:10px" class="tcloud" href="http://litsatest.blogspot.gr/search/label/Test" title="test">Test</a>

<a style="font-size:16px" class="tcloud" href="http://litsatest.blogspot.gr/" title="Litsa-test"> Litsa-blog</a>

...γινεται να αλλαξεις τα χρωματα...
βρες χρωματα εδω:
http://html-color-codes.info/; 1/2/15, 10:05 π.μ.
Litsa Georgiadou είπε...: Σε ευχαριστώ.... Το κατάφερα τελικά!!! :-); 1/2/15, 9:42 μ.μ.