Нов дизайн на притурката Eтикети за Blogger

Поздрави за всички вас. Притурката Етикети е приспособление, предоставено от Blogger, което позволява да се класифицира съдържанието на блога по конкретни етикети. Притурката за етикети прави нашия блог лесен за ползване, като позволява на посетителите лесно да навигират в съдържанието, което търсят, като избират категории / етикети.

Стандартната притурка за етикети в Blogger сама по себе си изглежда много простичко и предизвиква желание за по-интересен вариант. Но ние можем да я персонализираме с CSS. Ако не знаете как, не се притеснявайте, лесно е да се справите. Използвайки CSS и ефекта на анимирания градиент, ние ще ѝ предадем интересен и привлекателен вид. Да започнем.
Ще ви покажа 4 готови варианта на код за дизайн на етикетите като притурка в блог. Всъщност, използвайки готови кодове, можете лесно да настроите цветовете според вашите предпочитания. Но за начало, бих искал да насоча вниманието ви към факта, че:

Всички предложени кодове работят точно за показване на етикети под формата на облак.

Предварителни настройки

Настройте притурката Етикети така:

Вариант 1 с Червени бутони

Код

.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}
.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
  background-image: linear-gradient(#EE4343, #E07C7C); /*цвят на бутоните*/
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000; /*размер и цвят на долна граница*/
}
.label-size a:hover {
  background-position: 0 0;
}

Вариант 2 със Зелени бутони

Код

.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}
.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
  background-image: linear-gradient(#00FF3B, #778C7C); /*цвят на бутоните*/
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000; /*размер и цвят на долна граница*/
} .label-size a:hover {
  background-position: 0 0;
}

Вариант 3 с Черни бутони

Код

.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}
.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
  background-image: linear-gradient(#8A8C8B, #1A1D1B); /*цвят на бутоните-->
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000; /*размер и цвят на долна граница*/
}
.label-size a:hover {
  background-position: 0 0;
}

Вариант 4 с Пъстри бутони

Код

.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:12px;
  font-family:Open Sans;
  color:#fff!important;
  }
.sidebar .label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#1abc9c;border:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#127F69;border:3px solid #1abc9c;}
.sidebar .label-size-2 a {background:#3498db;border:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#226693;border:3px solid #3498db;}
.sidebar .label-size-3 a {background:#2ecc71;border:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#1F8C4C;border:3px solid #2ecc71;}
.sidebar .label-size-4 a {background:#9b59b6;border:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#74398E;border:3px solid #9b59b6;}
.sidebar .label-size-5 a {background:#e74c3c;border:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#922C20;border:3px solid #e74c3c;}

Уточнения

В първите три варианта можете да промените:

➤Стойностите на linear-gradient / * цвят на бутоните * / на такива, каквито ви трябват. Можете да намерите в търсачките генератори на linear-gradient;

➤Размера и цвета на долната граница - border-bottom: 3px solid # 000000; / *дебелина и цвят на долна граница */;

Много блогъри инсталират притурката за етикети в долната част на блога или някъде другаде, така че първите три варианта могат да се използват без значение къде е инсталирана притурката. Вариант 4 е предвиден специално за страничната колона. В него можете да променяте всички стойности в редовете:

.sidebar .label-size-1 a {background:#1abc9c;border:3px solid #127F69;} /*основен цвят на бутона, долна граница*/

.sidebar .label-size-1 a:hover {background:#127F69;border:3px solid #1abc9c;} /*цвят под курсор*/

Когато сме готови с избора на вариант, отиваме в раздела Тема ➔ Редактиране на HTML➔ Намираме реда ]]> </ b: skin> (прочетете тук) и веднага над него вписваме желания код ➔ Запаметяваме.

Остава само да се порадваме на резултата или да редактираме още нещо.
Още за етикетите в блога прочетете тук.

Благодаря на Виктория Барад за щедростта.

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:


Здраве за всички вас! Не забравяйте да правите добро на други хора!