
Эта такая дизайнерская разработка автора этого сайта, которая заслуживает внимания. Я очень не люблю, когда боковые колонки блога заполнены всякой нужной и не нужной всячиной. Особенно на главной странице. Для тех, кто разделяет моё мнение, что места там постоянно не хватает, такой вариант гаджета, очень кстати. Итак, как сделать гаджет постоянные читатели в виде спойлера, используя 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;
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.
Посмотрите на скриншот ниже.
На сегодня у меня всё. Тёплых вам осенних денёчков. Увидимся.
background: #F0F0FF; -цвет основного фона
#C04D00 -цвет рамки
height: 80px;-это высота гаджета в состоянии покоя
height: 300px;-эта высота всего гаджета. Её нужно будет редактировать на свой вкус. В двух местах.
Обратите внимание на 2 строки в коде #Followers1 > h2 {
display: none; этот участок отвечает за название гаджета. Если оставить в таком виде, то он будет без названия. У себя я его убрала. И, как видите, название осталось. Ну вот вроде и все настройки.
Когда код готов, заходим в шаблон-изменить HTML. Находим строку ]]></b:skin>и прямо над ней вставляем его. Сохраняем.
Хочу обратить внимание ещё на один момент. Так как, шаблоны могут быть разные нужно проверить вот такой идентификатор гаджета постоянные читатели- #Followers1. У вас он может быть несколько другой #Followers2 или 3. В этом случае эти цифры нужно поменять на свои. И давайте посмотрим, как это узнать.
Зайдите во вкладку дизайн. Видим гаджет постоянные читатели( может у вас другое название) и нажимаем изменить. Дальше подведите курсор к самому верху где указан адрес. Нажмите левую кнопку мыши и тяните бегунок вправо. В самом конце будет искомый Followers.
Посмотрите на скриншот ниже.

В результате, мы получаем новый дизайн гаджета постоянные читатели. И добавим места в боковой колонке. Посоветую также прочитать статью как закрыть ссылку гаджета постоянные читатели.
На сегодня у меня всё. Тёплых вам осенних денёчков. Увидимся.
оформите подписку на новые шпаргалки
Необычно, понравилось, жаль некоторое время назад, читатели с блогер почти перестали подписываться, в основном подписки идут через Гугл+
ОтветитьУдалитьВика, ты прямо исполняешь мои желания. Только вчера подумала, как бы уменьшить этот виджет, и здесь твой пост. Вставила код, немного изменила размеры высоты, все чудесно. Спасибки!.
ОтветитьУдалитьАлександр, Я в своё время тоже думала отказаться. Но решила пусть останется. И там и тут подписчики. Ну нравится он мне.
ОтветитьУдалитьОльга, ну я же говорила-мы на одной волне. Прямо телепатия какая-то. А я сейчас всё думаю над твоим последним вопросом. Я ведь пока в Яндексе ничего так и не поменяла.
ОтветитьУдалитьВика, а почему не добавляешь в Яндекс? В Яше как в Гугле не пройдет, перенаправления не будет. Я сейчас в индексе Google-статус индексирования посмотрела, уже забил 60 страниц блога с новым адресом.
ОтветитьУдалитьТы знаешь, когда читала информацию по твоей ссылке, аж мозги закипели. Столько всего нового. Меня Сергей З. вчера ночью еще на форум отправил, там тоже всякого начиталась. Как начнешь докапываться до всего, работать некогда. Но мой вопрос пока открыт.
Вот уж точно как начнёшь копать. Надо иногда мозги в другое русло направлять. Я так же, как забью в башку что-нибудь. Караул. А в Яндекс уже дабавляю сижу .Гугл тоже индексирует уже.
ОтветитьУдалитьP.S. А ночью на месте Сергея я бы тебя ещё дальше отправила.(шучу)
Вика, а где лица любимых постоянных читателей? Вижу надпись "Присоединиться к сайту"
ОтветитьУдалитьИрина, а ты курсор к гаджету подведи. На письмо чуть позже отвечу.
ОтветитьУдалитьЗдорово придумано и сделано. Хочу тоже такое(((
ОтветитьУдалитьИрина. Попробуй другой вариант установки кода. Зайди-шаблон-настроить- дополнительно. И в самом низу есть добавить CSS. В то поле можно вставить этот код. Он автоматом появиться в шаблоне. Но поскольку у тебя не родной шаблон, может этой функции и не быть.
ОтветитьУдалитьСпасибо, Вика. Попытаю счастья)))
ОтветитьУдалитьВика, а если мне не нужен фон. Впринципе, меня он устраивает в том виде, в котором он есть, мне бы только функцию спойлера.
ОтветитьУдалитьСпойлер здесь не сделать. А насчёт фона в сообщении написано.background: #F0F0FF; -цвет основного фона
Удалить#C04D00 -цвет рамки.
Вообще он очень интересно смотрится и место экономит.
Спасибо, Вика. Все работает. Немного поменяла размеры и цвета. Еще бы изменила цвет свечения при наведении возле рамки - сейчас он фиолетовый, но не могу сообразить где это в коде.
УдалитьИ для подписок G+ сделала такой же стиль!
УдалитьВот цвет при наведении #Followers1:hover {
Удалитьbackground: #FAF5FF; Пожалуйста.
Посмотрела, всё хорошо. Я бы немного поменяла параметр height: 80px; на 100 что ли. Чтобы в состоянии покоя хоть несколько фото было видно.
УдалитьВика, а еще у тебя уже в блоге не используется этот стиль, поэтому хорошо бы читателям показать, как он работает в тестовом блоге, я, например, увидела, как он работает в одном из блогов у Ольги Протасовой, она мне подсказала, что это твоя идея!
ОтветитьУдалитьДа, стоял он у меня. Убрала когда меняла дизайн. Ольга, да по-моему уже тоже поменяла. Может и сделаю на тестовом когда время будет. Или к тебе отправлю. Много старых сообщений надо корректировать. Столько воды утекло.
УдалитьВ последнее время гаджет сам по себе стал другим, и по функциональности тоже. G+ все ближе.. Иногда хочется убрать с глаз долой этот гаджет, оставив какую-нибудь кнопку на него. А потом думаю, но ведь люди могут не заметить эту самую кнопку.. Такие дела.
ОтветитьУдалитьДа, Наташа. Его вообще уже давно говорят, гугл убрать хочет. У меня на одном блоге работает по паровозным гудкам. А ведь многим, даже на других платформах именно он в Блоггере очень нравится.
УдалитьНе люблю неконтролируемых изменений. Но что поделать, сервис бесплатный, так что надо принимать с благодарностью )
УдалитьНаталья, наверное многие с тобой солидарна в плане изменений. Что-то в этом году их вообще через чур много было.
ОтветитьУдалитьПожалуйста, а как изменить ширину виджета? Она выходит за рамки шаблона. Спосибо.
ОтветитьУдалитьПепа Табакова, посмотреть бы конечно лучше как это у вас выглядит. Ширина родного гаджета здесь сохранена за неё отвечает элемент width: auto; Попробуйте его отобразить в пикселях. Но я не уверена, что все другие значения будут корректно при этом отображены. Ссылку дайте, чтобы посмотреть вашу проблему воочию.
УдалитьСпосибо, Виктория.Изменила width: auto; на width: 330 px; и все встало на свои места. Извините за плохой русский язык, но я из Болгарии. Благодаря еще один раз. Все самое лучшее. Вскоре я стала вашим постоянным читателем и очень рад этому.
ОтветитьУдалитьВот http://testf-blog.blogspot.bg/.
Пепа, очень рада за Вас, что всё получилось. Я погуляла по вашим блогам и поняла откуда Вы. Не беда, поймём друг-друга. Спасибо за внимание к моему блогу.
Удалить