Как изменить дизайн гаджета постоянные читатели.


 дизайн гаджета пчДоброго времени суток, всем кто читает мои шпаргалки. Сегодня хочу предложить вам тему, как с помощью CSS можно изменить гаджет постоянные читатели. Как-то давненько я увидела эту информацию на блоге http://www.magentawave.com и она меня зацепила. Но, как бывает сразу всё не напишешь. И вот пришло время поделиться ей с вами.
Эта такая дизайнерская разработка автора этого сайта, которая заслуживает внимания. Я очень не люблю, когда боковые колонки блога заполнены всякой нужной и не нужной всячиной. Особенно на главной странице. Для тех, кто разделяет моё мнение, что места там постоянно не хватает, такой вариант гаджета, очень кстати. Итак, как сделать гаджет постоянные читатели в виде спойлера, используя CSS.

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

Копируем к себе в черновик этот код

#Followers1 {
  background: #F0F0FF; 
  overflow: hidden;
  border: 1px solid #C04D00 ;
  border-radius: 5px;
  box-shadow: none; /

  -webkit-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -moz-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -o-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  height: 80px;
  width: auto;
}

#Followers1:hover {
  background: #FAF5FF;
  border: 1px solid #A08BED;

  -webkit-box-shadow: 0 1em 1em .3em rgba(0,0,6,0.5); /*Chrome*/
  -moz-box-shadow: 0 1em 1em .3em rgba(0,0,6,0.5); /*FF*/
  box-shadow: 0 1em 1em .3em rgba(0,0,6,0.5);
 height: 300px;
}
#Followers1 > h2 {
 display: none; 
}

#Followers1-wrapper {
  box-shadow: none;
  -webkit-transition: box-shadow 1s ease;
  -moz-transition: box-shadow 1s ease;
  -o-transition: box-shadow 1s ease;
  transition: box-shadow 1s ease;
}
#Followers1-wrapper:hover {
  -webkit-box-shadow: inset 0 0 1em .3em #c9f;
  -moz-box-shadow: inset 0 0 1em .3em #c9f;
  box-shadow: inset 0 0 1em .3em #c9f;
  height: 300px;
}

Давайте сейчас разберёмся в настройках. Тут, конечно, можно много чего поменять, но остановимся, на мой взгляд, на основных. Они выделены синим цветом. Рассмотрим сверху вниз по порядку.

background: #F0F0FF; -цвет основного фона
#C04D00 -цвет рамки
height: 80px;-это высота гаджета в состоянии покоя
height: 300px;-эта высота всего гаджета. Её нужно будет редактировать на свой вкус. В двух местах.
Обратите внимание на 2 строки в коде #Followers1 > h2 {
 display: none; этот участок отвечает за название гаджета. Если оставить в таком виде, то он будет без названия. У себя я его убрала. И, как видите, название осталось. Ну вот вроде и все настройки.

Когда код готов, заходим в шаблон-изменить HTML. Находим строку ]]></b:skin>и прямо над ней вставляем его. Сохраняем.

Хочу обратить внимание ещё на один момент. Так как, шаблоны могут быть разные нужно проверить вот такой идентификатор гаджета постоянные читатели- #Followers1. У вас он может быть несколько другой #Followers2 или 3. В этом случае эти цифры нужно поменять на свои. И давайте посмотрим, как это узнать.

Зайдите во вкладку дизайн. Видим гаджет постоянные читатели( может у вас другое название) и нажимаем изменить. Дальше подведите курсор к самому верху где указан адрес. Нажмите левую кнопку мыши и тяните бегунок  вправо. В самом конце будет искомый Followers.
Посмотрите на скриншот ниже.


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

На сегодня у меня всё. Тёплых вам осенних денёчков. Увидимся.
Удачи всем нам.


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

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

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

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

  1. Необычно, понравилось, жаль некоторое время назад, читатели с блогер почти перестали подписываться, в основном подписки идут через Гугл+

    ОтветитьУдалить
  2. Вика, ты прямо исполняешь мои желания. Только вчера подумала, как бы уменьшить этот виджет, и здесь твой пост. Вставила код, немного изменила размеры высоты, все чудесно. Спасибки!.

    ОтветитьУдалить
  3. Александр, Я в своё время тоже думала отказаться. Но решила пусть останется. И там и тут подписчики. Ну нравится он мне.

    ОтветитьУдалить
  4. Ольга, ну я же говорила-мы на одной волне. Прямо телепатия какая-то. А я сейчас всё думаю над твоим последним вопросом. Я ведь пока в Яндексе ничего так и не поменяла.

    ОтветитьУдалить
  5. Вика, а почему не добавляешь в Яндекс? В Яше как в Гугле не пройдет, перенаправления не будет. Я сейчас в индексе Google-статус индексирования посмотрела, уже забил 60 страниц блога с новым адресом.

    Ты знаешь, когда читала информацию по твоей ссылке, аж мозги закипели. Столько всего нового. Меня Сергей З. вчера ночью еще на форум отправил, там тоже всякого начиталась. Как начнешь докапываться до всего, работать некогда. Но мой вопрос пока открыт.

    ОтветитьУдалить
  6. Вот уж точно как начнёшь копать. Надо иногда мозги в другое русло направлять. Я так же, как забью в башку что-нибудь. Караул. А в Яндекс уже дабавляю сижу .Гугл тоже индексирует уже.
    P.S. А ночью на месте Сергея я бы тебя ещё дальше отправила.(шучу)

    ОтветитьУдалить
  7. Вика, а где лица любимых постоянных читателей? Вижу надпись "Присоединиться к сайту"

    ОтветитьУдалить
  8. Ирина, а ты курсор к гаджету подведи. На письмо чуть позже отвечу.

    ОтветитьУдалить
  9. Здорово придумано и сделано. Хочу тоже такое(((

    ОтветитьУдалить
  10. Ирина. Попробуй другой вариант установки кода. Зайди-шаблон-настроить- дополнительно. И в самом низу есть добавить CSS. В то поле можно вставить этот код. Он автоматом появиться в шаблоне. Но поскольку у тебя не родной шаблон, может этой функции и не быть.

    ОтветитьУдалить
  11. Спасибо, Вика. Попытаю счастья)))

    ОтветитьУдалить
  12. Вика, а если мне не нужен фон. Впринципе, меня он устраивает в том виде, в котором он есть, мне бы только функцию спойлера.

    ОтветитьУдалить
    Ответы
    1. Спойлер здесь не сделать. А насчёт фона в сообщении написано.background: #F0F0FF; -цвет основного фона
      #C04D00 -цвет рамки.
      Вообще он очень интересно смотрится и место экономит.

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

      Удалить
    3. И для подписок G+ сделала такой же стиль!

      Удалить
    4. Вот цвет при наведении #Followers1:hover {
      background: #FAF5FF; Пожалуйста.

      Удалить
    5. Посмотрела, всё хорошо. Я бы немного поменяла параметр height: 80px; на 100 что ли. Чтобы в состоянии покоя хоть несколько фото было видно.

      Удалить
  13. Вика, а еще у тебя уже в блоге не используется этот стиль, поэтому хорошо бы читателям показать, как он работает в тестовом блоге, я, например, увидела, как он работает в одном из блогов у Ольги Протасовой, она мне подсказала, что это твоя идея!

    ОтветитьУдалить
    Ответы
    1. Да, стоял он у меня. Убрала когда меняла дизайн. Ольга, да по-моему уже тоже поменяла. Может и сделаю на тестовом когда время будет. Или к тебе отправлю. Много старых сообщений надо корректировать. Столько воды утекло.

      Удалить
  14. В последнее время гаджет сам по себе стал другим, и по функциональности тоже. G+ все ближе.. Иногда хочется убрать с глаз долой этот гаджет, оставив какую-нибудь кнопку на него. А потом думаю, но ведь люди могут не заметить эту самую кнопку.. Такие дела.

    ОтветитьУдалить
    Ответы
    1. Да, Наташа. Его вообще уже давно говорят, гугл убрать хочет. У меня на одном блоге работает по паровозным гудкам. А ведь многим, даже на других платформах именно он в Блоггере очень нравится.

      Удалить
    2. Не люблю неконтролируемых изменений. Но что поделать, сервис бесплатный, так что надо принимать с благодарностью )

      Удалить
  15. Наталья, наверное многие с тобой солидарна в плане изменений. Что-то в этом году их вообще через чур много было.

    ОтветитьУдалить
  16. Пожалуйста, а как изменить ширину виджета? Она выходит за рамки шаблона. Спосибо.

    ОтветитьУдалить
    Ответы
    1. Пепа Табакова, посмотреть бы конечно лучше как это у вас выглядит. Ширина родного гаджета здесь сохранена за неё отвечает элемент width: auto; Попробуйте его отобразить в пикселях. Но я не уверена, что все другие значения будут корректно при этом отображены. Ссылку дайте, чтобы посмотреть вашу проблему воочию.

      Удалить
  17. Спосибо, Виктория.Изменила width: auto; на width: 330 px; и все встало на свои места. Извините за плохой русский язык, но я из Болгарии. Благодаря еще один раз. Все самое лучшее. Вскоре я стала вашим постоянным читателем и очень рад этому.
    Вот http://testf-blog.blogspot.bg/.

    ОтветитьУдалить
    Ответы
    1. Пепа, очень рада за Вас, что всё получилось. Я погуляла по вашим блогам и поняла откуда Вы. Не беда, поймём друг-друга. Спасибо за внимание к моему блогу.

      Удалить

Пользовательский поиск
Foto Saya
My Photo