
Я уже как-то писала, что многие считают нет необходимости устанавливать гаджет последних сообщений блога. Ведь на главной странице и так отображаются последние посты. Не всегда читатель переходит на главную и почему бы не показать пользователю, что может его ещё что-то заинтересовать.
Ещё статьи по теме.
Очень оригинальный гаджет последних сообщений.
Виджет последние сообщения по ярлыкам.
2 красивых виджета последние сообщения.
Предложенный ниже код устанавливается в гаджет HTML/JavaScript. Скопируйте его в блокнот и ниже разберём настройки.Виджет последние сообщения по ярлыкам.
2 красивых виджета последние сообщения.
<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 1px solid #DBDBDB;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #6B6B6B;
background:#F3F3F3;
background-repeat: repeat;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
text-shadow: 0px 2px #fff;
}
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
text-transform: capitalize;
color: #0000ff;
font-size: 14px;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-even {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-odd a{
color: #595959;
padding: 0 0px 0 10px;
}
.gfg-listentry-even a{
color: #242424;
padding: 0 0px 0 10px;
}
.gfg-listentry-highlight {
background: #FFFFFF;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #DBDBDB;
}
.gfg-listentry-highlight a {
color: #242424;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color: #ffffff;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
margin-top: 5px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;}</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:' http://www.shpargalochki.ru/feeds/posts/default?redirect=false&start-index=1&max-results=8'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'последние сообщения', numResults : 6, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 1px solid #DBDBDB;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #6B6B6B;
background:#F3F3F3;
background-repeat: repeat;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
text-shadow: 0px 2px #fff;
}
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
text-transform: capitalize;
color: #0000ff;
font-size: 14px;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-even {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-odd a{
color: #595959;
padding: 0 0px 0 10px;
}
.gfg-listentry-even a{
color: #242424;
padding: 0 0px 0 10px;
}
.gfg-listentry-highlight {
background: #FFFFFF;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #DBDBDB;
}
.gfg-listentry-highlight a {
color: #242424;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color: #ffffff;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
margin-top: 5px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;}</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:' http://www.shpargalochki.ru/feeds/posts/default?redirect=false&start-index=1&max-results=8'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'последние сообщения', numResults : 6, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>
В первой части кода ( я выделила её серым цветом) все стили CSS можно поменять и подогнать под ваш дизайн. Высоту, ширину, цвет всего блока, границы, шрифт и прочее. Во второй части в строке отмеченной синим цветом впишите соответственно адрес вашего блога.
Розовым обозначено -
6 - это количество отображаемых постов.
5000 - скорость ротации отображаемых сверху сообщений.
500 - скорость hover эффекта.
Все эти значения тоже меняйте по вашему желанию.
Все вопросы оставляйте в комментариях. Я желаю вам удачи и благодарю за ваш визит.
здесь можно оформить подписку на новые шпаргалки
Доброго времени суток Вика! Благодарю за оперативность, отзывчивость и внимание к таким как я чайникам!!! Большое вам спасибо за классный виджет! Я его уже установила к себе, но не могу увеличить ширину (width: 100%; меняла на px по ширине сайтбара (260px) и отступы справа и слева остаются!) вот скрин https://4.bp.blogspot.com/-Phqj8rdIKPI/V-uIa01EgFI/AAAAAAAABg8/97LJW9xKyDMTljSl1N0wrwtgsrYDKNZtgCLcB/s1600/2016-09-28_160707.jpg. И еще один вопросик: все борюсь с расстояниями между блоками, в скрине я отметила между верхним баннером и блоком для сообщения зазор, которое хочется убрать, можно ли это сделать? С уважением к вам и вашей креативности! Тата
ОтветитьУдалитьОн так и написан что ширина 100% и предусматривает ширину сайдбара. А вот картинку вашу поисковик не находит.
ОтветитьУдалитьВика, может по этому адресу, проверила вроде открывается https://1.bp.blogspot.com/-Phqj8rdIKPI/V-uIa01EgFI/AAAAAAAABhA/P637Rv0NqS4q-8AS4HhtxnL9rWKnNzQ8QCPcB/s1600/2016-09-28_160707.jpg.
ОтветитьУдалитьПосмотрела. поняла о чём речь. Эти отступы не убрать. есть конечно лазейки, но тут нужно в шаблоне в стилях CSS кардинальные изменения делать. Можно попробовать , чтобы не особо бросалось в глаза если вам не нравиться. убрать рамки или вокруг сообщений, или в сайдбаре или там и там. Примерно так как у меня здесь
ОтветитьУдалитьhttp://www.dela-domashnie.ru/
Вика, спасибо, попробую убрать рамку сообщений. А расстояние между баннером и блоком сообщений можно зазор убрать (в скрине я указала стрелкой)? С уважением Тата.
ОтветитьУдалитьПопробуйте уменьшить расстояние как описано здесь http://www.shpargalochki.ru/2014/11/umenshit-rasstojanie-mezhdu-gadzhetami.html
ОтветитьУдалитьТата, столько копаться вшаблоне, не проще ли скачать сторонний готовый шаблон. Их так много сейчас.
Вика, спасибо, УРА! все получилось! Это мой первый блог, поэтому "копаюсь" вникаю во все! И ваш блог для меня, как руководство к действию! Спасибо вам, с уважением Тата. P.S. А на счет готовых шаблонов надо подумать!
ОтветитьУдалитьTata, ну я рада за вас и приветствую ваше упорство.
ОтветитьУдалитьВиктория, ты, наверное, читала об изменениях с 29 сентября в гаджете "Окно поиска". Сегодня прочитала в некоторых блогах, что информация в нем отображается по-другому (у себя я никаких изменений не заметила). Но самое главное, что в новом блоге уже не поставишь этот гаджет. Он исчез. Моя подруга собирается создавать блог и меня эта проблема волнует. У вас есть пользовательский поиск. Вы как-то писали о нем. А чем он отличается просто от Окна поиска в Блоггере?
ОтветитьУдалитьИрина, Я сегодня в сообществе своём Блоггер на русском уже писала об этом. Дала 3 ссылки. Вот ссылка на тот что у меня http://www.shpargalochki.ru/2015/07/polzovatelskij-poisk-Google-Adsense-dlja-bloga.html
ОтветитьУдалитьи вот этот можно попробовать
http://www.shpargalochki.ru/2014/10/fiksirovannoe-okno-poiska-v-bloge.html
Виктория, обязательно посмотрю. Спасибо за ссылки. Меня мои подруги-блогеры напугали. А у меня все работает! Только на тестовом блоге БиблиоИрина Окно поиска не работает и исчез гаджет "Мои блоги" (список ссылок на мои 2 блога и на гугл-сайты). Но этот блог экспериментальный, он не индексируется поисковыми системами. Наверное, поэтому, все и пропало. Главное, все нормально в Волшебном Фонарике и Блоге Кота Васьки.
ОтветитьУдалить