Хаки и Скрипты Next Generation CMS : CSS, Настройка плагинов : Облако тегов на CSS3

irbees2008 Опубликовано - 14 - мая CSS

Адаптировал: irbees2008
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет. Вот искал новые варианты облака тегов для боковой панели, поскольку флеш накрылся медным тазом. Довольно долго искал подходящие варианты и я нашёл пару. Вот один сейчас и разберем он построен на CSS3.
Вот рабочий пример

Как видите получается довольно симпотично и интересно, главное что все просто, и можно еще поиграть со стилями и анимацией.
И так идем в директорию ваш сайт/templates/ваш шаблон/plugins/tags/skins/default и открываем файл sidebar.tpl
и заменяем содержимое файла на вот этот код

Код:

1<style>.sidebar-block{ display:none; } .sidebar-cal, .sidebar-tags, .sidebar-summary{ display:block; } .tags a:nth-child(1)  { color:#ffd !important; animation-delay:1s; animation-duration:9.59s; -moz-animation-delay:1s; -moz-animation-duration:9.59s; -webkit-animation-delay:1s; -webkit-animation-duration:9.59s;} .tags a:nth-child(3)  { color:#fed !important; animation-delay:4s; animation-duration:8.35s; -moz-animation-delay:4s; -moz-animation-duration:8.35s; -webkit-animation-delay:4s; -webkit-animation-duration:8.35s;} .tags a:nth-child(5)  { color:#fdf !important; animation-delay:3s; animation-duration:7.17s; -moz-animation-delay:3s; -moz-animation-duration:7.17s; -webkit-animation-delay:3s; -webkit-animation-duration:7.17s;} .tags a:nth-child(7)  { color:#ffe !important; animation-delay:2s; animation-duration:6.26s; -moz-animation-delay:2s; -moz-animation-duration:6.26s; -webkit-animation-delay:2s; -webkit-animation-duration:6.26s;} .tags a:nth-child(9)  { color:#fdf !important; animation-delay:5s; animation-duration:8.88s; -moz-animation-delay:5s; -moz-animation-duration:8.88s; -webkit-animation-delay:5s; -webkit-animation-duration:8.88s;} .tags a:nth-child(11) { color:#ffc !important; animation-delay:3s; animation-duration:7.47s; -moz-animation-delay:3s; -moz-animation-duration:7.47s; -webkit-animation-delay:3s; -webkit-animation-duration:7.47s;} .tags a:nth-child(13) { color:#fff !important; animation-delay:2s; animation-duration:9.79s; -moz-animation-delay:2s; -moz-animation-duration:9.79s; -webkit-animation-delay:2s; -webkit-animation-duration:9.79s;} .tags a:nth-child(15) { color:#fde !important; animation-delay:4s; animation-duration:5.25s; -moz-animation-delay:4s; -moz-animation-duration:5.25s; -webkit-animation-delay:4s; -webkit-animation-duration:5.25s;} .tags a:nth-child(17) { color:#fdf !important; animation-delay:6s; animation-duration:7.67s; -moz-animation-delay:6s; -moz-animation-duration:7.67s; -webkit-animation-delay:6s; -webkit-animation-duration:7.67s;} .tags a:nth-child(19) { color:#ffd !important; animation-delay:3s; animation-duration:6.26s; -moz-animation-delay:3s; -moz-animation-duration:6.26s; -webkit-animation-delay:3s; -webkit-animation-duration:6.26s;} .tags a:nth-child(21) { color:#ffc !important; animation-delay:4s; animation-duration:8.88s; -moz-animation-delay:4s; -moz-animation-duration:8.88s; -webkit-animation-delay:4s; -webkit-animation-duration:8.88s;} .tags a:nth-child(23) { color:#fcc !important; animation-delay:2s; animation-duration:7.35s; -moz-animation-delay:2s; -moz-animation-duration:7.35s; -webkit-animation-delay:2s; -webkit-animation-duration:7.35s;} .tags a:nth-child(25) { color:#fef !important; animation-delay:5s; animation-duration:9.79s; -moz-animation-delay:5s; -moz-animation-duration:9.79s; -webkit-animation-delay:5s; -webkit-animation-duration:9.79s;} .tags a:nth-child(27) { color:#ffd !important; animation-delay:1s; animation-duration:8.25s; -moz-animation-delay:1s; -moz-animation-duration:8.25s; -webkit-animation-delay:1s; -webkit-animation-duration:8.25s;} .tags a:nth-child(29) { color:#fdd !important; animation-delay:4s; animation-duration:7.17s; -moz-animation-delay:4s; -moz-animation-duration:7.17s; -webkit-animation-delay:4s; -webkit-animation-duration:7.17s;} .tags a:nth-child(31) { color:#fff !important; animation-delay:1s; animation-duration:6.26s; -moz-animation-delay:1s; -moz-animation-duration:6.26s; -webkit-animation-delay:1s; -webkit-animation-duration:6.26s;} .tags a:nth-child(33) { color:#fcd !important; animation-delay:3s; animation-duration:8.58s; -moz-animation-delay:3s; -moz-animation-duration:8.58s; -webkit-animation-delay:3s; -webkit-animation-duration:8.58s;} .tags a:nth-child(35) { color:#fff !important; animation-delay:2s; animation-duration:7.27s; -moz-animation-delay:2s; -moz-animation-duration:7.27s; -webkit-animation-delay:2s; -webkit-animation-duration:7.27s;} .tags a:nth-child(37) { color:#fef !important; animation-delay:1s; animation-duration:9.09s; -moz-animation-delay:1s; -moz-animation-duration:9.09s; -webkit-animation-delay:1s; -webkit-animation-duration:9.09s;} .tags a:nth-child(39) { color:#ffd !important; animation-delay:6s; animation-duration:9.45s; -moz-animation-delay:6s; -moz-animation-duration:9.45s; -webkit-animation-delay:6s; -webkit-animation-duration:9.45s;} .tags a{  -webkit-animation-name: coloring, tagmove;  -webkit-animation-timing-function: cubic-bezier(.50, 0, .50, 1);  -webkit-animation-iteration-count: infinite;  -moz-animation-name: coloring, tagmove;  -moz-animation-timing-function: cubic-bezier(.50, 0, .50, 1);  -moz-animation-iteration-count: infinite;  animation-name: coloring, tagmove;  animation-timing-function: cubic-bezier(.50, 0, .50, 1);  animation-iteration-count: infinite;  position:relative;  opacity:0; } .tags a:hover { color:#750B0B !important; text-decoration:underline !important; } .tags{  overflow:hidden;  height: 500px;  padding-top:100px;  font-size:1.5em !important;  line-height:1px; } .sidebar-tags dt{ display:none; } .tags .comma{ display:none; } @keyframes tagmove {  from { top:-80px; }  to { top:80px; } } @keyframes coloring {     from { opacity: 0; }     50% { opacity: 1; transform:scale(2,2)}     to { opacity: 0; } } @-moz-keyframes tagmove {  from { top:-80px; }  to { top:80px; } } @-moz-keyframes coloring {     from { opacity: 0; }     50% { opacity: 1; -moz-transform:scale(2,2)}     to { opacity: 0; } } @-webkit-keyframes tagmove {  from { top:-80px; }  to { top:80px; } } @-webkit-keyframes coloring {     from { opacity: 0; }     50% { opacity: 1; -webkit-transform:scale(2,2)}     to { opacity: 0; } }</style>
2<dl class="sidebar-block sidebar-tags">
3    <dd class="tags">{entries}</dd>
4    </dl>
5 <br/><a href="/plugin/tags/">Показать все теги</a>

Сохраняем и открываем файл params.ini и заменяем содержимое вот на этот код

Код:

1news.tag = "<a href='{url}'>{tag}</a>"
2news.tag.delimiter = ", "
3sidebar.tag = "<a href='{url}' {params} title='Количество новостей: {posts}' rel='tag'>{tag}</a>"
4sidebar.tag.delimiter = "<span class="comma">,</span> "
5cloud.tag = "* <a href='{url}' {params} title='Количество новостей: {posts}' rel='tag'>{tag}</a><sup><small> <font color='red'>{posts}</font></small></sup>"
6cloud.tag.delimiter = "<span class="comma">,</span>  "

Вот и все, код легко подгоняется под любой шаблон.

Можешь почитать и вот эту статейку "С Днём Победы !"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.