2014-02-02

Галерея изображений на blogspot

Галерея изображений на blogspot
Галерея для blogspot, с помощью которой можно вывести последние записи, составить карту сайта, а также создать страницы, на которых разбить записи по категориям. В этом уроке я расскажу подробнее, как это сделать.
Как выглядит галерея:

Вам может быть также интересно:
Галерея blogspot на jQuery с zoom эффектом
Шаблоны blogger галерея
Создание простой галереи blogspot

Как сделать такую галерею на blogger

В шаблоне blogger найдите тег </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 : 'http://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>
Теперь в шаблоне блога найдите тег 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: #DACDA7;}
Вы можете внести некоторые изменения в стили галереи.
  • margin; 0 1px 1px 0 – отступы вокруг каждой картинки – значения сверху, справа, снизу и слева соответственно.
  • .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9;  - цвет фона надписей на изображениях.
  • text-align: left; bottom: 10%; color:#fff; padding:2px 5px; – выравнивание и цвет текста,
  • a:hover img {background: #DACDA7; – цвет фона картинки при наведении
Теперь создайте страницу, на которой будет располагаться ваша галерея и добавьте код в режиме html. Если вы хотите видеть вашу галерею на главной странице блога в сайдбаре или футере, то вставьте ниже предложенный код в виджет HTML/JavaScriptЖ
<script>
  var bsrpg_thumbSize = 150;
  var bsrpg_showTitle = true;
</script>
<script src="ваш домен/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>
Здесь тоже вы можете настроить его “под себя”:
var bsrpg_thumbSize = 150 – размер ширины и высоты изображений (картинки в галерее квадратные),
var bsrpg_showTitle = true – значение “true” – показать надписи (заголовки сообщений) на изображениях в галерее, если поменять на “false”, то подписей не будет.
Если вы хотите, чтобы выводились картинки из последних сообщений с определенным ярлыком, то укажите ссылку с названием ярлыка. Пример:
http://www.graffiks.ru/feeds/posts/summary/-/фоны?max-results=9998&alt=json-in-script&callback=bsrpGallery
Изменяем количество картинок в галерее – указываем число после max-results= :
имя.blogspot.ru/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery – 8 картинок,
имя.blogspot.ru/feeds/posts/summary?max-results=999&alt=json-in-script&callback=bsrpGallery – 999 (или максимум картинок).

4 комментария :

Kairatbek Ramazanov комментирует...

Все замечательно,но у меня есть один злободневный вопрос,даже могу сказать это волнует не только меня -как залить sitemap.xml в корень блога на Blogger? Ведь этот сервис от Гугла и нет доступа к нему,а карта очень нужна! Спасибо!

Иванова Наталья комментирует...

Создавать карту в xml для blogspot не нужно. Она есть по умолчанию. Расположена по адресу http://ваш_блог.blogspot.ru/sitemap.xml

Kairatbek Ramazanov комментирует...

Так ведь это я уже неоднократно прописовывал на вебмастер Google увы,он не принимает. Я вынужден закачывать туда Атом ? и так работаю .

Иванова Наталья комментирует...

Kairatbek, для того, чтобы добавить sitemap в гугл, нужно прописать atom.xml?redirect=false&start-index=1&max-results=500 к вашему домену и отправить.

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности