Csatlakozz te is!

A közösséghez

 
 
TAG CLOUD

Miért jó a tag cloud (felhő)?

A címkefelhővel találkozhattál már különböző blogokon. A felhő segítségével egy-egy cikkedhez vagy akár az egész oldaladra vonatkozóan feltüntetheted azokat a kulcsszavakat és kifejezéseket, amelyek leginkább jellemzik az adott tartalmat, így a látogatóid könnyedén tájékozódhatnak arról, hogy miről szól a portálod, és mik a leggyakoribb témáid. A felhő keresőoptimalizásra is kiválóan alkalmas eszköz.

Alapok a tag cloud kód használatához

Ahhoz, hogy a kód működjön, fontos, hogy elhelyezd a portálodon a jquery.js fájlt az alábbi módon:

<script type="text/javascript" src="/js/jquery.js"></script>

Ha a fenti kód nincs fennt a portálodon pl. a fejléc modulodban vagy a bal felső egyszerű modulodban, a felhő nem fog működni. Azért javaslom inkább a fejléc modult, mert a fenti jquery.js scriptnek először kell lefutnia, mint a tag cloud scriptnek, és a fejléc modul tölt be legelőször.

A tag cloud (felhő) kód

Az alábbi 2 javascriptből, css-ből és div-ből áll a tag cloud kódja. Fogd az alábbi kódot, és másold be egy az egyben valamelyik modulod forrásába, és egyből működni fog.

<script type="text/javascript">
(function($){
    $.fn.tagCloud = function(options) {

        var defaults = {
            separator: ',',
            randomize: true
        };
 
        var options = $.extend(defaults, options);
 
        var randomize = function(){
            return (Math.round(Math.random())-0.5);
        };
 
        var trim = function(text){
            return text.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
        };

        return this.each(function() {
            var arr = $(this).text().split(options.separator);
            if (options.randomize) arr.sort(randomize);
            var words_arr = {};
            $(arr).each(function(i){
                word = trim(this);
                words_arr[word] = words_arr[word]? words_arr[word] + 1 : 1;
            });
            var html = '';
            $.each(words_arr, function(k, v) {
                v = (v > 9)? 9 : v;
                v = (v >= 3)? '2' + '.' + v : v;
                html += '<a href="#' + k + '" style="font-size: ' + v + 'em" title="' + k + '"><span>' + k + '</span></a>'
            });
            $(this).html(html);
        });
    };
})(jQuery);
</script>
       
<script type="text/javascript">
            $(function() {
                $('#tagcloud').tagCloud({separator: '.'});
            });
</script>

<style type="text/css">
.tagcloud {
width: 610px!important;}

.tagcloud a{
color: #006BA9;
border-bottom: 1px dotted #ffffff;
text-decoration:none;
padding-bottom:3px;
margin: 4px;
display: inline-block}

.tagcloud a:hover {
color: #479000;
border-bottom: 2px solid #479000;
text-decoration:none;
padding-bottom:2px;
margin: 4px;}
</style>

<div id="tagcloud" class="tagcloud">
kredit. kredit. kredit. história. css. css. zöld. design. design. kék. superuser. talányos. szerkesztés. szerkesztés. közösség. közösség. közösség. blog. verseny. verseny. verseny. webmester. oldal. portál. portál. barátság. ajánló. kreativitás. kreativitás. statisztika. sms. sms. html. játék. játék. internet. chat. modulkezelő. G-Polgár. lábléc. team. látogatottság. rébusz. rébusz. reklám. reklám. Talányuser. Photoshop. hirdetés. társaság. banner. banner. fórum. látogatók. szerkesztők. boldogság. képtár. segítség. segítség. hírek.
</div>

A fenti kódban rózsaszínnel jelöltem azt a részt, amit módosítanod kell ahhoz, hogy saját tartalom jelenjen meg a felhődben. Az alsó divben találhatod azt a tartalmat, ami a felhőben megjelenik. A megjelenő szavak méretét egyszerűen variálhatod:

- ha azt szeretnéd, hogy az adott szó kis betűvel jelenjen meg, akkor EGYSZER írd be a listába a szót, pl. kredit.
- ha azt szeretnéd, hogy az adott szó nagyobb betűvel jelenjen meg, akkor KÉTSZER írd be a listába a szót egymás után, pl: kredit. kredit.
- ha azt szeretnéd, hogy az adott szó mégnagyobb betűvel jelenjen meg, akkor HÁROMSZOR írd be az adott szót egymás után a listába, pl. kredit. kredit. kredit.

A szavakat minden esetben ponttal válaszd el egymástól, pl. kredit. kredit. design. stb.

Formázás:
- a fenti kódban zölddel jelöltem azt a részt, ahol beállíthatod a tag cloud szélességét
- a fenti kódban kékkel jelöltem azt a részt, ahol a linkek színét és keretét formázhatod
- a fenti kódban sárgával jelöltem azt a részt, ahol azt a színt és keretet adhatod meg, ami akkor jelenik meg, ha a linkek fölé viszed a kurzort

A Jimpl tag cloud forrását találjátok: http://imagesplitter.net/examples/cloud/index.html

Szólj hozzá te is!
Név:
E-mail cím:
Amennyiben megadod az email-címedet, az elérhető lesz az oldalon a hozzászólásodnál.
Hozzászólás:
Azért, hogy ellenőrízhessük a hozzászólások valódiságát, kérjük írd be az alábbi képen látható szót. Ha nem tudod elolvasni, a frissítés ikonra kattintva kérhetsz másik képet.
Írd be a fenti szót: új CAPTCHA kérése
 
 
Még nincs hozzászólás.
 

 
KEDVENC KÉP

Küldj be Te is képet! >>>

 
TÁRSALGÓ
 
HÍRFOLYAM
Friss hozzászólások
 
SZAVAZÁS
Te varázsoltál tavaszi kinézetet a portálodra?

Igen
Nem
Szavazás állása
Lezárt szavazások
 
HÍRLEVÉL
E-mail cím:

Feliratkozás
Leiratkozás
SúgóSúgó
 
TÁMOGATÓK

AndreaSerlegBolt
UIP Duna Nemzetközi FIlm Kft
Horgolt Csoda
Moments