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

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

Как видите получается довольно симпотично и интересно, главное что все просто, и можно еще поиграть со стилями и анимацией.
И так идем в директорию ваш сайт/templates/ваш шаблон/plugins/tags/skins/default и открываем файл sidebar.tpl
и заменяем содержимое файла на вот этот код
Код:
<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>
<dl class="sidebar-block sidebar-tags">
<dd class="tags">{entries}</dd>
</dl>
<br/><a href="/plugin/tags/">Показать все теги</a>
Сохраняем и открываем файл params.ini и заменяем содержимое вот на этот код
Код:
news.tag = "<a href='{url}'>{tag}</a>"
news.tag.delimiter = ", "
sidebar.tag = "<a href='{url}' {params} title='Количество новостей: {posts}' rel='tag'>{tag}</a>"
sidebar.tag.delimiter = "<span class="comma">,</span> "
cloud.tag = "* <a href='{url}' {params} title='Количество новостей: {posts}' rel='tag'>{tag}</a><sup><small> <font color='red'>{posts}</font></small></sup>"
cloud.tag.delimiter = "<span class="comma">,</span> "

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

Можешь почитать и вот эту статейку "Меняем стандартный скролбар"

mistakes

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

Ваше мнение

Вы нашли что искали?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element