Гаджет прокрутки сообщений блога в виде изображений

---

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

Пример Вы можете посмотреть в тестовом блоге в сайдбаре (гаджет Галерея изображений), прокрутите страницу вниз. И если захотите установить такой гаджет, надо будет сделать три простых шага:

Шаг 1. Идем в шаблон-делаем резервную копию шаблона-изменить шаблон. Находим закрывающий тэг </head> и выше вставляем такой код (посмотрите выше скриншот).

<script> 
//<![CDATA[ 
function bsrpGallery(root) { 
    var entries = root.feed.entry || []; 
    var html = ['<div class="bsrp-gallery nopin" title="Get this from BloggerSentral.com">']; 
    for (var i = 0; i < entries.length; ++i) { 
        var post = entries[i]; 
        var postTitle = post.title.$t; 
        var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png'; 
        var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c'); 
        var links = post.link || []; 
        for (var j = 0; j < links.length; ++j) { 
            if (links[j].rel == 'alternate') break; 
        } 
        var postUrl = links[j].href; 
        var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>'; 
        var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : ''; 
        var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>'; 
        html.push('<div class="bs-item">', item, '</div>'); 
    } 
    html.push('</div>'); 
    document.write(html.join("")); 
} 
//]]> 
</script>

Шаг 2. Чуть выше в шаблоне нажимаем на самую первую стрелку рядом с <b:skin....</b:skin> и вставляем стиль CSS выше ]]></b:skin>

.bsrp-gallery {padding:10px; clear:both;} 
.bsrp-gallery:after {content: "";display: table;clear: both;} 
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 1px 1px 0 !important;text-decoration:none;} 
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;} 
.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;} 
.bsrp-gallery a:hover img {background: #1C8FCE;}

Выделенное синим-отступы изображения сверху, справа, снизу и слева; бардовым-цвет фона надписей на изображении; голубым-выравнивание и цвет текста; коричневым-размер шрифта надписи на картинке; сиреневым-внешний цвет фона картинки при наведении мыши; Нажимаем-просмотр, затем сохранить шаблон.

Шаг 3. Идем в дизайн-добавить гаджет-Html/JavaScript и вставляем скрипт в поле гаджета, настраиваем и сохраняем в удобном месте макета блога.

<marquee behavior="scroll"width="" height="300" direction="up" onmouseout="this.scrollAmount=3" onmouseover="this.scrollAmount=0" scrollamount="3">

<script> 

  var bsrpg_thumbSize = 250; 

  var bsrpg_showTitle = true; 

</script> 

<script src="http://application-2.blogspot.com/feeds/posts/summary?max-results=9&alt=json-in-script&callback=bsrpGallery"></script></marquee>

Выделенное синим-высота гаджета; коричневым 3-скорость прокрутки; голубым-размеры изображения; сиреневым-адрес блога; оранжевым-количество изображений. Если выставите числовое значение 999, то будет прокрутка максимального количества отображаемых картинок;

У меня в тестовом блоге опубликован пост еще одного варианта галереи изображений, типа слайд-шоу.  Можно посмотреть по этой ссылке

На этом я заканчиваю. Пишите отзывы, задавайте вопросы по установке и настройке. Делитесь со своими друзьями и знакомыми в социальных сетях. Всем пока... пока.

Почитайте:   Как изменить фон сообщения без изменений в теле шаблона; 

Рекомендуемый контент: