Skip to content

6 комментариев

  1. shredinger

    Облако тегов, Облако меток, или Облако ключевых слов (англ. tag cloud, wordle) — визуальное представление списка ярлыков (или категорий). Частота упоминаний, поисков, ссылок в интернете с определённого сайта неких слов, терминов, имён отображается в специальной области в виде изображения этих слов в формате гиперссылок. Размер изображения тем больше, чем чаще использовался данный тег (слово, термин или имя).
    Материал из Википедии — свободной энциклопедии.

    Путешествуя в Интернете по различным сайтам, Вы, наверняка, видели что-либо подобное. Кстати, этот пример один из многих существующих. Помимо красивого дизайна "облако тегов" имеет ряд преимуществ и полезных применений. Во-первых это своего рода довольно нестандартный элемент навигации, набор ссылок, по которым можно легко найти соответствующие темы и ориентироваться в содержимом сайта. "Облако" в удобной и приятной глазу форме динамически определяет и визуально выделяет наиболее важные и популярные темы. Очень спорно его использование в качестве навигации по сайту, но, как дополнительное средство ориентировки в наиболее интересных разделах сайта, оно может играть не последнюю роль. Так же с его помощью можно привлечь целевых пользователей, т.е. увеличить целевой трафик с поисковых систем. Да и использовать его можно, где угодно, в зависимости от широты вашей фантазии.

    Для размещения облака тегов необходимо выполнить всего один шаг.

    Код, который Вы видите внизу, вставить в <body> в то место, где будет располагаться ваше "облако".
    Капируйте код и вставте в то место котором вы хотите  чтобы отображалась ваше облоко
    Сам код написан ниже:
    ——————————————————————————————————————————————————————-
    <!— Ставить туда где хотите видеть облако —>

       <div id="yoblako" align=center><noindex>
       
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       <a style="font-size:8pt;" href="ССЫЛКА" rel="nofollow" class="eTag eTagGr8">НАЗВАНИЕ</a>
       
       </noindex></div>

    <script type="text/javascript" src="http://neotech.3dn.ru/Tegs/swfobject.js"></script&gt;
    <script type="text/javascript">
    var flashvars = {};
    flashvars.mode = ‘tags’;
    flashvars.minFontSize = ‘8’;  /* минимальный размер  шрифта в облаке. Размер задается в пунктах.*/
    flashvars.maxFontSize = ’12’;  /* максимальный размер  шрифта в облаке. Размер задается в пунктах.*/
    flashvars.tcolor = ‘0x006600’;  /*"0x009CFF" — цвет самого частого текста в облаке тегов в RGB формате. Частота текста определяется по свойству ссылки style. 0x не меняем.*/
    flashvars.tcolor2 = ‘0x006600’; /* "0x009CFF" — цвет самого редкого текста в облаке тегов в RGB формате. Частота текста определяется по свойству ссылки style. 0x не меняем.*/
    flashvars.hicolor = ‘0xFF0000’;   /*"0xFF0000" — цвет текста при наведении на него курсора. 0x не меняем.*/
    flashvars.distr = ‘true’;   /*тип вращения облака, может принимать значение "true" или "false"*/
    flashvars.tspeed = ‘100’; /*скорость вращения*/
    eTagz = document.getElementById(‘yoblako’).getElementsByTagName(‘A’);
    flashvars.tagcloud = ‘<tags>’;
    for (var i=0; eTagz[i]; ++i) flashvars.tagcloud += ‘<a href=» + eTagz[i].getAttribute(‘href’)
    + » style=» + parseInt(eTagz[i].style.fontSize)
    + »>’ + eTagz[i].innerHTML.replace(/&/i, ‘%26’) + ‘</a>’;
    delete eTagz;
    flashvars.tagcloud += ‘</tags>’;
    var params = {};
    /*params.wmode = ‘transparent’;  устанавливаем фон облака прозрачным. Если убрать эту строку, то можно будет самим задавать цвет фона.*/
    params.bgcolor = ‘#FFFFCC’;
    params.allowscriptaccess = ‘always’;
    var attributes = {};
    attributes.id = ‘yoblako’;
    attributes.name = ‘tagcloud’;
    swfobject.embedSWF(‘http://neotech.3dn.ru/Tegs/tagcloud.swf’, ‘yoblako’, ‘300’, ‘200’, ‘9.0.0’, false, flashvars, params, attributes);          /*"200" — ширина будущего облака тегов в пикселях.
                           "190" — высота будущего облака тегов.
                            "9" — максимальная версия флеш-плеера, которая нужна для отображения облака.*/
    </script>

    —————————————————————————————————————————————————————————
    Как выгледит это облоко можно помотреть на сайте http://management.moy.su/ &nbsp;

  2. Aлик

    давно узнал такие слова как: "тэг", "облако" ?  

  3. OverHerz

    Облако тэгов формируется несколькими html-тэгами A
    Одного html-тэга для вывода облака нет и не будет.
    Чтобы вывести облако тэгов обычно производят программирование или ищут модуль, реализующий такой функционал для вашей CMS  

  4. REM99

    напишу еще раз адрес сайта который можно посмотреть как это оболако выгледит

  5. Uniks Unasovich

    Вот пример горизонтального:

    <html>
    <head>
    <title></title>
    <style>
    .cell{
    width:48px;
    height:50px;

    font-size:12px;
    float:left;
    border:1px solid black;
    text-align:center;
    }
    </style>
    </head>
    <body>
    <div id="table" style="width:200px; height:100px;">
    <!— FIRST ROW—>
    <div class="cell">123</div>
    <div class="cell">123</div>
    <div class="cell">123</div>
    <div class="cell">123</div>
    <div class="cell">123</div>
    <div class="cell">123</div>
    <div class="cell">123</div>
    <div class="cell">123</div>
    <div class="cell">123</div>
    <div class="cell">123</div>
    <div class="cell">123</div>
    <div class="cell">123</div>
    <div class="cell">123</div>
    <div class="cell">123</div>
    </div>

    </body>
    </html>  

  6. asscrab

    сделайте просто три столбика и после каждого елемента генерируйте <br /> и после каждого четвертого элемента генерируйте </div><div class="stolbik">
    без PHP или JS конечно генерация невозможна

Comments are closed.