Красивое облако тегов для сайта

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Демо-пример Исходники (175 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

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

Установка на сайт не сложная, просто выполняйте все описанные шаги.

  1. Скачайте архив с материалом, распакуйте в отдельную папку на компьютере.
  2. В папке oblakotegovcolour Вы увидите папку scripts с ява скриптом и три файла - tagcloud.swf, tagcloud.xml и индексный файл.
  3. Файлы tagcloud.swf и tagcloud.xml закачайте на сайт в корневую папку или создайте для них отдельную папку и пропишите пути к ней в индексном файле. В моём варианте эти два файла находятся в одной папке с индексным файлом.
  4. Папку scripts тоже закачайте на сайт. Можно дать ей другое название и изменить путь вызова скрипта, а если такая папка уже есть на вашем сайте, закачайте в неё только файл AC_RunActiveContent.js. Единого рецепта здесь нет и каждый делает по-своему, как привык.
  5. На страницу своего сайта, где Вы планируете вставить облако, поместите нижеприведенный код:
<script src="scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<div align="center">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','500','height','500','title','облако тегов','src','tagcloud','quality','high','pluginspage','//www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','bgcolor','#FFFFFF','movie','tagcloud' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="500" height="500" title="облако тегов">
      <param name="movie" value="tagcloud.swf">
      <param name="quality" value="high"><param name="BGCOLOR" value="#FFFFFF">
      <embed src="tagcloud.swf" width="500" height="500" quality="high" pluginspage="//www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#FFFFFF"></embed>
    </object></noscript>
</div> 

scripts/AC_RunActiveContent.js - путь вызова скрипта.

width="500" height="500" (присутствуют в коде три раза) - размеры поля расположения облака.

tagcloud.swf - пути к файлу tagcloud.swf (присутствуют в коде два раза).

  • Для корректной работы ссылок, откройте файл tagcloud.xml и впишите свои названия и адреса ссылок, значения tag-link (произвольно) и title, а так же величину максимального шрифта ссылок и их цвет.
  • Вот и все несложные действия, после выполнения которых на вашей странице будет отражаться и радовать взор красивое облако ссылок.

Всех Вам благ, успехов и везения! Комментируйте статью. Ваш Л.М.


Ваше мнение по материалу, изложенному на сайте




  © 2015–2024  dynamic-site.olerant.ru  L.M. Служба поддержки Яндекс.Метрика