Дизайн гаджета ярлыки в BLOGGER.

Приветствую всех на своём блоге. Вот  люблю блоггеровский шаблон за то, что он достаточно гибкий в настройках. Из всех предложенных гаджетов можно с помощью небольших изменений и дополнений, придать совсем уникальный вид тому или иному элементу блога. При этом, не прибегая к установке сторонних кодов.
Например, как изменить родной гаджет постоянные читатели уже разобрались в этой шпаргалке. И совсем недавно изменили внешний вид гаджета подписки на Email. Кто пропустил это сообщение, прочитайте здесь. Сегодня опять хочу предложить вам шпаргалку о том, как изменить внешний вид виджета ярлыки. Рассмотрим 2 варианта, где будет возможность сделать небольшие изменения под ваш дизайн.

Вариант1. 

оформление ярлыков в блоге


Это код для него

#Label1 a{
color:#FFFFFF;
padding:10px 15px;
line-height:35px;
margin:0 -2px;
border:1px solid #ddd;
border-radius:0px;
font-size:11px !important;
text-decoration:none;
text-transform: uppercase;
background-color: #0053CE;
font-weight: 900;
list-style-type: none;
}#Label1 a:hover{
color:#FFFF00;
text-decoration:none;
background-color: #000099;border-radius:15px;
}


Вариант 2. Его мы можете посмотреть у меня в боковой колонке блога.

Это его код.

.label-size a { margin:0 4px 6px 0; padding: 5px; text-transform: uppercase; border: solid 1px #C6C6C6; box-shadow: 1px 1px 2px #333 inset; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#990000; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #E1E1E1; } .label-size a:hover { border:1px solid #990000; text-decoration: none; -moz-transition: all 0.7s ease-out;  -moz-transform: rotate(7deg); color: #333; background-color: #FFFFFF; box-shadow: 1px 1px 2px #333; }

Ну, а теперь, как всё это реализовать. Наверняка у вас уже установлен такой гаджет. Для новичков скажу, как это сделать. Вкладка дизайн-добавить гаджет и из предложенных вариантов выбираем -ярлыки. Сразу заострю ваше внимание, что коды, предложенные выше работают если выбран стиль ОБЛАКО. При варианте СПИСОК они не подходят.

Если вы определились и хотите так же изменить внешний вид этого гаджета, копируйте один из кодов в блокнот или черновик, меняйте цветовые значения на свои. Я выделила их разным цветом. Надеюсь, что с этим проблем не будет. Затем заходим во вкладку шаблон, изменить HTML и перед строкой ]]></b:skin>вставляете свой код.

 В некоторых шаблонах есть более удобный путь. Так же вкладка шаблон-настроить-дополнительно-добавить CSS. Справа, в открывшемся окне добавляем код и сохраняем. Он сам автоматически установится в шаблоне блога. Проверьте на всякий случай эту функцию у себя.

После установки кода, непосредственно в шаблон, обязательно нажмите просмотреть шаблон и убедитесь, что всё получилось. Не забудьте сохранить. Остаётся только зайти посмотреть блог и порадоваться новому дизайну гаджета ярлыки. Или как вы его назвали. И если вы с этим справились, я тоже порадуюсь, что пост оказался для вас полезным.

И на сегодня всё. Жду вас снова на своём блоге.
Удачи всем нам.


Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :

29 комментариев:

  1. У меня не работает ни так, ни так...

    ОтветитьУдалить
    Ответы
    1. Анна, дайте адрес Вашего блога.

      Удалить
    2. Посмотрите строку в шаблоне 597 - Закройте после строки border-color:transparent #f3f3f3; не закрыта фигурной скобкой } Должно быть так
      border-color:transparent #f3f3f3;}
      и тут другой любой код CSS. Всегда эти коды закрываются так и ниже прописываются следующие. Не игнорируйте ни одного знака в кодах.

      Удалить
    3. Этот комментарий был удален автором.

      Удалить
    4. Спасибо? получилось. А как вы ко мне зашли в настройки.,)))) Так ведь все могут?

      Удалить
    5. Мне пришлось 2 раза код одинаковый вводить с .label, потому что строки border-color:transparent #f3f3f3;} у меня 2 почему-то и после каждой скобку поставила тогда только заработало. Первая бордер у меня border-color:transparent #f3f3f3};.pluso-more{display:none!important;}
      Вторая перед .label. Если не вводить два раза, не работает, если скобку у одной строки убрать - тоже...

      Удалить
    6. Также при наведении на тег, остальные скачут в разные стороны:)))

      Удалить
    7. Анна, даже не знаю с чего и начать отвечать. В настройки к Вам я ни как не могла зайти. Чтобы просмотреть код Вашего шаблона достаточно нажать правой кнопкой мыши и выбрать просмотр кода элемента.
      Сейчас не помню, но то что в вашем шаблоне что-то не то , а именно в CSS кодах и именно в участке о котором идёт речь. Да. там их 2 одинаковых. и этого не должно быть.

      Удалить
    8. Так мне какую строк удалить из двух?

      Удалить
  2. Этот комментарий был удален автором.

    ОтветитьУдалить
  3. а у Вас ссылки и комменты nofollow? Как там под закрытие не попасть случайно:)) Пишут, что надо сделать так.

    ОтветитьУдалить
    Ответы
    1. Анна, да комментарии закрыты. и некоторые ссылки тоже. Где и куда под закрытие не попасть?

      Удалить
    2. Как их закрыть? Говорят, сайт могут закрыть, типа списки запрещенных сайтов.

      Удалить
    3. Анна, опять не совсем поняла. Что именно закрыть

      Удалить
    4. Этот комментарий был удален автором.

      Удалить
  4. Ответы
    1. Строка 597-фрагмент border-color:transparent #f3f3f3}; фигурные ковычки после точки с запятой. И уберите дублирующий код

      Удалить
    2. А такую же строку внизу оставлять или удалять? У меня две одинаковых строки есть. А код под второй находится.

      Удалить
    3. Уберите вот этот участок кода
      .label-size a { margin:0 4px 6px 0; padding: 5px; text-transform: uppercase; border: solid 1px # E1E1E1; box-shadow: 1px 1px 2px #333 inset; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#9800ff; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #E1E1E1; } .label-size a:hover { border:1px solid #990000; text-decoration: none; -moz-transition: all 0.7s ease-out; -moz-transform: rotate(7deg); color: #333; background-color: #FFFFFF; box-shadow: 1px 1px 2px #333;} он у Вас начинается со строки 598 до строки 599.
      А в строке 597 надо правильно написать вот так border-color:transparent #f3f3f3;}

      Удалить
  5. Так пишу все по-порядку. 1) я слышала, что сайты попадают в списки под закрытие. Как сделать, чтобы мой не попал? 2) как сделать все что нужно nofollow? 3) у меня в шаблоне два строки бордер. После одной идет плюсов,после второй два кода тегов. Какую из двух бордер удалить, удалять ли? На строке 597 у меня бордера нет, там некуда поставить скобку.

    ОтветитьУдалить
  6. Анна, дайте мне вашу эл. почту.

    ОтветитьУдалить
  7. timokhina.anna@gmail.com
    Напишите тест, я вам сейчас код свой весь скину с одной строчки бордер до другой, по-моему там задвоение.

    ОтветитьУдалить
  8. Добрый вечер,Вика! у меня не получается вставить.

    ОтветитьУдалить
  9. Добрый вечер,Вика! у меня не получается вставить.

    ОтветитьУдалить
    Ответы
    1. Ирина, вышлите мне через форму связи ниже участок кода, куда вы вставляете.

      Удалить
  10. спасибо большое, Вика! в очередной раз не могу нарадоваться, что познакомилась с Вашим блогом! мне больше нравиться второй вариант гаджета, он более компактный. только почему-то в моем варианте активными остаются только два первых ярлыка. установила второй вариант, кажется слишком уж большим...http://topchiyirina.blogspot.com/

    ОтветитьУдалить
    Ответы
    1. Ирина, спасибо за добрые слова. Сейчас посмотрю, забегу в гости к вам. Посмотрела. У вас величина font-weight: 1020 почему-то , а в коде 900.

      Удалить
  11. Сделала, цвет шрифта, как всегда на синий поменяла. Взяла 2, он больше нравится. Хочу сделать выплывающее, т.е. закрытый блок рубрик, но пока не нашла.

    ОтветитьУдалить
    Ответы
    1. Сейчас сбегаю посмотрю. А с закрытым блоком. Нужно поодумать. Есть идея. не знаю как смотреться будет.

      Удалить

Пользовательский поиск