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
|
Súgó
Friss hozzászólások