Здравствуйте друзья, гости и читатели моего блога. Сегодня в информации бегущие снизу вверх кликабельные картинки, с надписью заголовков постов в наших блогах.
Пример Вы можете посмотреть в тестовом блоге в сайдбаре (гаджет Галерея изображений), прокрутите страницу вниз. И если захотите установить такой гаджет, надо будет сделать три простых шага:
Пример Вы можете посмотреть в тестовом блоге в сайдбаре (гаджет Галерея изображений), прокрутите страницу вниз. И если захотите установить такой гаджет, надо будет сделать три простых шага:
Шаг 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>
//<![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;}
.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, то будет прокрутка максимального количества отображаемых картинок;
У меня в тестовом блоге опубликован пост еще одного варианта галереи изображений, типа слайд-шоу. Можно посмотреть по этой ссылке
На этом я заканчиваю. Пишите отзывы, задавайте вопросы по установке и настройке. Делитесь со своими друзьями и знакомыми в социальных сетях. Всем пока... пока.
Рекомендуемый контент:
Оля, очень красиво смотрится. Необычно. Оживляет блог. Мне понравилось.
ОтветитьУдалитьВика спасибо, мне самой тоже нравится, особенно во втором блоге. Снесла установленный слайдер, грубовато смотрелся. Установила прокрутку изображений. У кого постов в блоге уже много, разрыв будет не так уж и заметен.
Удалить