» » » Вид тегів для uCoz

Вид тегів для uCoz

Всі привіт =)
Вид тегів для uCoz це в принципі дрібниця, але яка? В основному всі залишають стандартний вид тегів і зараз я не говорю тільки про систему та її теги uCoz . Під словом стандартний, я малюю собі такий вид, де є просто посилання і є просто дай бог цифра, а найчастіше цифра компенсується розміром тексту тега
Стандартний вигляд виглядає приблизно так, погодьтеся неважливо, тому я і вирішив зробити кілька рішень щодо поліпшення візуального сприйняття тегів для uCoz
Вид тегів для uCoz


Я вам пропоную два варіанти, один спрощений, другий анімований, який вибрати для себе вирішуйте самі.
Вид тегів для uCoz

Тепер давайте розберемося зі стандартною структурою тегів створених за допомогою інформера, для цього спочатку встановимо цей інформер. Перейдіть в ПУ / Інструменти / Інформери, клікаємо створити новий інформер, розділ вибираємо теги, спосіб виведення - список тегів, а інше за бажанням. Отриманий код виклику інформера
 $ MYINF_ # $
вставляємо в те місце де хочемо бачити список тегів, перш замінюємо в цьому коді # на свій номер інформера.
У нас вийшов не стилізований список тегів uCoz , що має ось таку структуру для кожного тега
<div class="tagItem"><a href="/search/%D0%B1%D0%BE%D0%B5%D0%B2%D0%B8%D0%BA/" rel="nofollow" class="eTag eTagGr25">css</a> (3)</div>


Наступним кроком у нас вже буде установка. для першого варіанту тегів UCOZ вона дуже проста. Просто копіюйте код css до себе в ПУ/Дизайн/Управління дизайном(CSS) або ж в окремий css файл


.tagItem { 
  float:left; 
  margin:0 10px 7px 0; 
  padding:2px 10px 2px 0; 
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg3.png) no-repeat right -25px; 
  color:#fff; 
  font-size:11px; 
  font-family:helvetica, arial, sans-serif; 
} 
.eTag { 
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg3.png) no-repeat left top; 
  padding:6px 5px 4px 7px; 
  position:relative; 
  margin:0 3px 0 -2px; 
  border-right:1px solid #d2d2d2; 
  -moz-border-radius:0 3px 3px 0; 
  -webkit-border-radius:0 3px 3px 0; 
  border-radius:0 3px 3px 0; 
  color:#3f3f3f; 
  text-shadow:0 1px #fff; 
  text-decoration:none; 
  font-size:11px; 
}


А для другого варіанту нам потрібно буде ще встановити JS, скопіюйте код в самий низ сторінки перед тегом /body
<script type="text/javascript" src="http://mvcreative.ru/example/16/2/js/functions.js"></script>


В те місце куди ми встановлювати код виклику інформера $MYINF_#$, поряд поставимо даний код

<div id="newTags"></div>


Має вийти ось так:
$MYINF_#$ <div id="newTags"></div>


Ну а далі все те саме, що ми робили з першим варіантом. Копіюємо CSS код

#newTags {
  position:relative;
  z-index:1;
}
#newTags div { 
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg.png) no-repeat; 
  color:#3f3f3f; 
  float:left; 
  height:25px; 
  line-height:1; 
  margin:5px; 
  padding:0 5px 0 8px; 
  position:relative; 
  text-decoration:none; 
  overflow:hidden; 
  font-family:helvetica, arial, sans-serif; 
} 
#newTags div:active { 
  top:1px; 
} 
#newTags div a, #newTags div span { 
  display:block; 
  float:left; 
} 
#newTags div a { 
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg.png) no-repeat 100% -25px; 
  height:19px; 
  padding:6px 10px 0 0; 
  position:relative; 
  text-shadow:0 1px 1px #fff; 
  z-index:10; 
  font-weight:bold; 
  font-size:12px;  
  color:#3f3f3f; 
  text-decoration:none; 
} 
#newTags div span { 
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg.png) no-repeat 100% -50px; 
  color:#fff; 
  height:19px; 
  padding:5px 10px 0; 
  position:absolute; 
  right:0; 
  top:1px; 
  text-shadow:0 -1px 0 #5c5c5c; 
  z-index:-1; 
  font-size:12px; 
  line-height:14px; 
}



Ось і все на цьому.


UCOZ scripts
1688 06.01.14



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру