![Нов дизайн на притурката Eтикети за Blogger Нов дизайн на Eтикети](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWYYRxCU5HXBnsb3gdbJGg_JKVHvgONE89Bane1YKO_dBgIhFYgwAR7U3kxaBq2PPwdyv41bk2hHm5k9i_X4qucuxMO9J68yd6k4nIoi7MPa4gEeyZxrkbTaJVXhQfK9WMPrxaYlLaheY/s1600/etiketi1-min.png)
Ще ви покажа 4 готови варианта на код за дизайн на етикетите като притурка в блог. Всъщност, използвайки готови кодове, можете лесно да настроите цветовете според вашите предпочитания. Но за начало, бих искал да насоча вниманието ви към факта, че:
Всички предложени кодове работят точно за показване на етикети под формата на облак.
Предварителни настройки
Настройте притурката Етикети така:![Настройте притурката Етикети така Настройте Етикети](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDP9TyJIy9Af-vyv0xOGI2wcCH6ZccQ3_FipDXQLnIL1FChU9iFbk9MJ5m2nGUY6tSWLfAy2fn6nFtm4CdDm9tOo1uWiX1nYOdo0H_ZjgB8tsU1DhQBenriippvGpNUfBwnUK1L0_kEFw/s400/oblak.png)
Вариант 1 с Червени бутони
![Вариант 1 Червени бутони Вариант 1](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV8oZlzUf-IDEuOf5uPsgD0BQH1kAFng7lTfEty-q5SX3TOn14gEOO7m8DfbnRHM18EJKtGfcOJ6SiLuXMo_u_umvF2XMTc04lKoeQGjRaoCpKMLlbMLtaJKfXMO2X9ofK3bx8k4oCWQs/s400/red-min.png)
.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 със Зелени бутони
![Вариант 2 Зелени бутони Вариант 2](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip_x-dKZ2-7LNC9VU0_lUGXGpInsWJ5EbeeDLZLg2WO0ItBxAAF-GPArFy-RZCuMhoolDapdlnAkP4OzHOe0eqSSe6esDVNlJ1hr_a8L7wTB-KwxhNbx47zHiFf_stiO4wbfwXnalfS5w/s400/green-min.png)
.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 с Черни бутони
![Вариант 3 Черни бутони Вариант 3](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI1UDyEzBsls_DFuCcAw59fv6x8XH1LJhEnWrD-AFTh8FEk3gjHEhGIG8wX8vvyFDbzamjWeWSnD1CMEejA12h_Ew4pQvIH_CY-yhsbdeIkr9y-cLleYqzCL2a39LkdYAxVIwxhth-O4o/s400/blak-min.png)
.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 с Пъстри бутони
![Вариант 4 с Пъстри бутони Вариант 4](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDC_ESBemumI6aiwqsXoM5Ww0hBi31xHJ5QS-_BH6OHz9ix7Li8CF9w4T1ZkBRlZffPnfYLotUbcLtrVjHOAnkyw-T3eKmfm4Lbthj0eSkD6Wgl9vSVw5hcrdYTp9cJSy0tRPoeSS6-Xs/s400/shareni-min.png)
.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> (прочетете тук) и веднага над него вписваме желания код ➔ Запаметяваме.
Остава само да се порадваме на резултата или да редактираме още нещо.
Още за етикетите в блога прочетете тук.
Благодаря на Виктория Барад за щедростта.
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
![Посетете .: BGtop.net :. Топ класацията на българските сайтове и гласувайте за този сайт! BGtop](http://bgtop.net/images/bgtop8831.gif)
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Няма коментари:
Публикуване на коментар