Ще ви покажа 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;
}
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;
}
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;
}
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;}
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> (прочетете тук) и веднага над него вписваме желания код ➔ Запаметяваме.
Остава само да се порадваме на резултата или да редактираме още нещо.
Още за етикетите в блога прочетете тук.
Благодаря на Виктория Барад за щедростта.
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Няма коментари:
Публикуване на коментар