Привет, друзья. Я уже писала как можно использовать виджет канал в блоге. Который на самом деле вполне справляется с отображением последних постов, при этом не используя сторонние навороченные скрипты. Его можно настроить и для отображения последних комментариев виджеты которых в своё время просто летели один за другим.
Сам гаджет канал выглядит, мягко сказать, совсем скучно.
Но можно с помощью стилей CSS его хоть немного сделать привлекательнее. Ну вот так хотя бы.
Что изменится
Для этого сначала нужно создать гаджет канал. Заходим во вкладку дизайн и, из списка предложенных гаджетов, выбираем канал. В поле канала вводим адрес канала блога
Посмотреть его можно в админпанели НАСТРОЙКИ-ДРУГОЕ- ФИД САЙТА . У меня он выглядит так.
Далее нажимаем кнопку продолжить.
Задайте здесь соответствующие настройки - название, количество выводимых сообщений, дату публикации, открывать в новом окне. Их потом можно будет изменить, если что - то не понравится. Сохраните гаджет в нужном месте макета.
Далее скопируйте, приведённый ниже код. Все комментарии по настройкам я отметила в самом коде
Вы можете поиграться с цветом, чтобы настроить их под собственный дизайн.
Сейчас идём во вкладку Тема и находим закрывающийся тег </head>. И над ним устанавливаем этот код. Сохраняем изменения.
Можно установить 2 или 3 ленты блога и больше, добавляя новый гаджет канал. Тогда код будет такой
Тут я думаю понятно, что везде добавляем строки #Feed2, #Feed3 и так далее, если нужно. Если вы автор нескольких блогов, то так же можно отображать в текущем ленту другого блога.
Выбор за вами. Возможно, кому -то и пригодится.
Сам гаджет канал выглядит, мягко сказать, совсем скучно.

Но можно с помощью стилей CSS его хоть немного сделать привлекательнее. Ну вот так хотя бы.
Что изменится
Уберём нумерованный список
Зададим нужный фон
Изменим шрифт
Зададим разделители между ссылками
Изменим цвет самих ссылок
Сделаем верхнюю контрастную рамку.
Для этого сначала нужно создать гаджет канал. Заходим во вкладку дизайн и, из списка предложенных гаджетов, выбираем канал. В поле канала вводим адрес канала блога
Посмотреть его можно в админпанели НАСТРОЙКИ-ДРУГОЕ- ФИД САЙТА . У меня он выглядит так.
http://feeds.feedburner.com/shpargalochkiru
Далее нажимаем кнопку продолжить.

Далее скопируйте, приведённый ниже код. Все комментарии по настройкам я отметила в самом коде
<style type='text/css'>
#Feed1 .widget-content{
padding:0
}
#Feed1_feedItemListDisplay li,#Feed1_feedItemListDisplay ul{
list-style:none;
background: #EEEEEE; //общий фон//
margin:0;
padding:0
}
#Feed1_feedItemListDisplay a{
color:#1A237E; //цвет ссылки //
text-decoration:none;
font-size:16px!important //размер шрифта//
}
#Feed1_feedItemListDisplay a:hover{
color:#e8554e //цвет ссылки при наведении//
}
#Feed1_feedItemListDisplay li{
display:block;
clear:both;
overflow:hidden;
list-style:none;
border-bottom: 2px solid #1565C0; //разделитель между постами толщина и цвет//
padding:3px 0;
margin:0;
font-weight:normal
}
#Feed1_feedItemListDisplay li:first-child{
border-top:solid 8px #F4511E //размеры и цвет верхней рамки//
}
</style>
#Feed1 .widget-content{
padding:0
}
#Feed1_feedItemListDisplay li,#Feed1_feedItemListDisplay ul{
list-style:none;
background: #EEEEEE; //общий фон//
margin:0;
padding:0
}
#Feed1_feedItemListDisplay a{
color:#1A237E; //цвет ссылки //
text-decoration:none;
font-size:16px!important //размер шрифта//
}
#Feed1_feedItemListDisplay a:hover{
color:#e8554e //цвет ссылки при наведении//
}
#Feed1_feedItemListDisplay li{
display:block;
clear:both;
overflow:hidden;
list-style:none;
border-bottom: 2px solid #1565C0; //разделитель между постами толщина и цвет//
padding:3px 0;
margin:0;
font-weight:normal
}
#Feed1_feedItemListDisplay li:first-child{
border-top:solid 8px #F4511E //размеры и цвет верхней рамки//
}
</style>
Вы можете поиграться с цветом, чтобы настроить их под собственный дизайн.
Сейчас идём во вкладку Тема и находим закрывающийся тег </head>. И над ним устанавливаем этот код. Сохраняем изменения.
Можно установить 2 или 3 ленты блога и больше, добавляя новый гаджет канал. Тогда код будет такой
<style type='text/css'>
#Feed1 .widget-content,
#Feed2 .widget-content,
#Feed3 .widget-content{
padding:0
}
#Feed1_feedItemListDisplay li,#Feed1_feedItemListDisplay ul,
#Feed2_feedItemListDisplay li,#Feed2_feedItemListDisplay ul,
#Feed3_feedItemListDisplay li,#Feed3_feedItemListDisplay ul{
list-style:none;
margin:0;
padding:0
}
#Feed1_feedItemListDisplay a,
#Feed2_feedItemListDisplay a,
#Feed3_feedItemListDisplay a{
color:#444;
text-decoration:none;
font-size:16px!important
}
#Feed1_feedItemListDisplay a:hover,
#Feed2_feedItemListDisplay a:hover,
#Feed3_feedItemListDisplay a:hover{
color:#e8554e
}
#Feed1_feedItemListDisplay li,
#Feed2_feedItemListDisplay li,
#Feed3_feedItemListDisplay li{
display:block;
clear:both;
overflow:hidden;
list-style:none;
border-bottom:solid 1px #dedede;
padding:4px 0;
margin:0;
font-weight:normal
}
#Feed1_feedItemListDisplay li:first-child,
#Feed2_feedItemListDisplay li:first-child,
#Feed3_feedItemListDisplay li:first-child{
border-top:solid 1px #dedede
}
</style>
#Feed1 .widget-content,
#Feed2 .widget-content,
#Feed3 .widget-content{
padding:0
}
#Feed1_feedItemListDisplay li,#Feed1_feedItemListDisplay ul,
#Feed2_feedItemListDisplay li,#Feed2_feedItemListDisplay ul,
#Feed3_feedItemListDisplay li,#Feed3_feedItemListDisplay ul{
list-style:none;
margin:0;
padding:0
}
#Feed1_feedItemListDisplay a,
#Feed2_feedItemListDisplay a,
#Feed3_feedItemListDisplay a{
color:#444;
text-decoration:none;
font-size:16px!important
}
#Feed1_feedItemListDisplay a:hover,
#Feed2_feedItemListDisplay a:hover,
#Feed3_feedItemListDisplay a:hover{
color:#e8554e
}
#Feed1_feedItemListDisplay li,
#Feed2_feedItemListDisplay li,
#Feed3_feedItemListDisplay li{
display:block;
clear:both;
overflow:hidden;
list-style:none;
border-bottom:solid 1px #dedede;
padding:4px 0;
margin:0;
font-weight:normal
}
#Feed1_feedItemListDisplay li:first-child,
#Feed2_feedItemListDisplay li:first-child,
#Feed3_feedItemListDisplay li:first-child{
border-top:solid 1px #dedede
}
</style>
Тут я думаю понятно, что везде добавляем строки #Feed2, #Feed3 и так далее, если нужно. Если вы автор нескольких блогов, то так же можно отображать в текущем ленту другого блога.
Выбор за вами. Возможно, кому -то и пригодится.
оформите подписку на новые шпаргалки
Как всегда непонятно, но как всегда интересно. Море информации, до которой я не дорос.. Впрочем, пожалуй, уже перерос! Ну, да и пёс с этим!
ОтветитьУдалитьСемён, ну это всё нужно практиковать.
ОтветитьУдалитьПрактиковать, это значит освоить! Я, действительно, боюсь лишний раз прикасаться к кнопкам, чтобы ничего не изгадить. Хотя мой системный говорит, что сломать комп можно только кувалдою! И кстати, Викуша, если не лень, гляньте мой ответ в нынешнем посте на Ваш комментарий! Для меня это всё, как по-живому, и очень важно! Спасибо за отзыв!
ОтветитьУдалитьГлянула. Нормальный комментарий. Что смущает.
УдалитьНичего не смущает. Просто тоскую, и хочется с кем-то поговорить, поделиться. А у нас с Вами так сложно складывалось доверие. Как же мучительно тяжело мне было убеждать Вас, что тот дурацкий текст пришёл с Вашего адреса, хотя я стопроцентно верю, что его заслали не Вы! До сих пор мучаюсь, и понять не могу, что же это было за бесовство, в которое ыЫ не верите. Впрочем, ляд с ним!
ОтветитьУдалитьДа, Семён. Забейте уже на это.
ОтветитьУдалитьЗабил!
ОтветитьУдалитьОчень интересная фишка, надо будет покрутить ее. Хотя для меня пока встраиваться в коды - это сложно.
ОтветитьУдалитьвика, это я понимаю. Нужен небольшой опыт. на самом деле всё просто. Можно создать тестовый блог и пробовать на нём. Так быстро понимаешь что , где и к чему.
ОтветитьУдалитьСпасибо, Вика. Вы уже гуру этой площадки.
ОтветитьУдалитьДа куда там. Осваиваю дальше.
Удалить