За блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

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

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


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


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

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

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

    Настройте  Етикети



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

    Вариант 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 със Зелени бутони

    Вариант 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 с Черни бутони

    Вариант 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 с Пъстри бутони

    Вариант 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> (прочетете тук) и веднага над него вписваме желания код ➔ Запаметяваме.

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

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

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

    BGtop

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

    Няма коментари:

    Публикуване на коментар