Прокрутка последних сообщений (Widget для Blogger)

Лучший виджет, для показа последних сообщений с вашего блога, работает на JQuery с эффектом прокрутки, который привлекает внимание посетителей. Этот виджет содержит название поста, фрагмент сообщения, дату, когда этот пост был опубликован. Все выше перечисленные значения, настраиваются, так что вы можете легко настроить этот виджет как вы хотите.

Превью▼

Как добавить Виджет прокрутки последних сообщений в Blogger?

Шаг-1:

Этот Виджет работает на JQuery, поэтому вы должны добавить JQuery библиотеки на ваш блог 

Примечание:
Пропустите этот шаг, если вы уже добавили JQuery библиотеку в свой блог.

1. Перейдите на панель инструментов Blogger-Шаблон
2. Нажмите на ИзменитьHTML
3. Ставим галочку "Расширить шаблоны Виджета"
4. Найдите с помощью поиска (Сtrl+F) строчку:

</head>

нижний код, добавляем перед этой строчкой

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Вы подключили библиотеку jQuery, в вашем блоге.

Теперь устанавливаем сам Виджет.

Шаг-2:

1. Переходим Blogger-Дизайн
2. Нажимаем Добавить гаджет
3. Выбераем HTML / JavaScript

Вставляем нижний код в Виджет,

<style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

#helperblogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#helperblogger-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#helperblogger-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwu4c3zgrUaVS4-PO6u7w9LQX0EuIfa97rmisWt9yFkU0qJtXpiPdZnqgVDX1cJsovEWqCfLCdz-IIINmyTRl3CGbWfKN8ttFHz_rEe40IMaruXfa8YDaFd0Zz7fVNArwz9QMdN2Qx1Yc/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#helperblogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#helperblogger-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#helperblogger-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#helperblogger-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

-->
</style>

<script language='JavaScript'> 
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgGLJjVFdsU7ao-m6-C3uGpngUJ27QoezOQq_vJI_9348NN8ajJjtr2FhvkZKeGRgYf2rQ8jHItXKGR3GBplGl8Fk7-iO5Y_aq7MlTN8zysMUHQvQeVM9XFdA5QayifZN77EKCwoOd9g8/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgGLJjVFdsU7ao-m6-C3uGpngUJ27QoezOQq_vJI_9348NN8ajJjtr2FhvkZKeGRgYf2rQ8jHItXKGR3GBplGl8Fk7-iO5Y_aq7MlTN8zysMUHQvQeVM9XFdA5QayifZN77EKCwoOd9g8/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgGLJjVFdsU7ao-m6-C3uGpngUJ27QoezOQq_vJI_9348NN8ajJjtr2FhvkZKeGRgYf2rQ8jHItXKGR3GBplGl8Fk7-iO5Y_aq7MlTN8zysMUHQvQeVM9XFdA5QayifZN77EKCwoOd9g8/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgGLJjVFdsU7ao-m6-C3uGpngUJ27QoezOQq_vJI_9348NN8ajJjtr2FhvkZKeGRgYf2rQ8jHItXKGR3GBplGl8Fk7-iO5Y_aq7MlTN8zysMUHQvQeVM9XFdA5QayifZN77EKCwoOd9g8/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgGLJjVFdsU7ao-m6-C3uGpngUJ27QoezOQq_vJI_9348NN8ajJjtr2FhvkZKeGRgYf2rQ8jHItXKGR3GBplGl8Fk7-iO5Y_aq7MlTN8zysMUHQvQeVM9XFdA5QayifZN77EKCwoOd9g8/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.helperblogger.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>

Теперь замените http://www.helperblogger.com/ на свой адрес блога URL.

Настройки Виджета под себя.

Значения которые можно изменить, выделены определённым цветом.

numposts = 10; Количество постов, которые будут прокручиваться,

limitspy=4; Количество сообщений которые будут видимы,одновременно на виджете,

intervalspy=4000; Скорость прокрутки виджета, при уменьшении значения скорости виджет увеличивается.

Сохраните все изменения и просмотрите ваш блог, чтобы увидеть ваше творение!

Мира и счастья Вам!