источник: https://www.mycrib.ru/2012/11/gallery-blogspot-jquery-zoom-effect.html Еще статьи автора:
1.Простой галереи blogspot(http://www.mycrib.ru/2012/09/galereya-blogspot.html) в виде слайд-шоу,
2.Подборка шаблонов галерей для blogger(http://www.mycrib.ru/2012/09/shablony-blogger-gallery.html)и 3.Создание jquery карусели (http://www.mycrib.ru/2012/09/jquery-jcarousel.html)
Загружаете в редакторе блоггер картинки или фото, настройте размер
(маленький, средний, крупный), переходите по вкладке HTML и внизу
страницы вставьте код CSS.
<style>.post img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
width: 100%;
height: 100%;
}</style>
В стиль CSS можно добавить размеры высоты и ширины картинки. Тогда устанавливаете размеры изображений уже в самом коде.
<style>.post img {
height: 50%;
width: 50%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
width: 100%;
height: 100%;
}</style>
Настройки: выделено фиолетовымразмеры картинок, зеленымразмер увеличения при наведении.
Кто захочет таким способом увеличить изображения во всех постах блога, код CSS (без тэга style) вставьте в шаблонизменитьшаблон выше строки ]]></b:skin>.
если кому
понадобится, измените в коде .post img { на .sidebar img{
Выделенное коричневым-URL адрес изображения; синим-толщина и цвет границ рамки; выделенное фиолетовым-этот код цвета подбирайте под цвет границ рамки (если цвет будет сильно отличаться будут светлые полосы). Исключение двойная рамка (dooble), здесь цвет должен быть светлее. Какие бывают формы рамок читайте в этом сообщении.
Галерея с картинок в 2 рядаДЕМО: https://demo-yablogger.blogspot.com/2017/09/blogger-galereya-izobrazhenij.html
Что бы создать галерею из картинокприменим тег html <table>. С помощью этого тега можно создать таблицу(https://yablogger.info/kak-sozdat-tablicu-v-html-teg-table.html),
разбить текст на 2 колонки(https://yablogger.info/razbit-tekst-na-kolonki-v-html.html).
Открываем HTML редактор сообщения под цифрой 2 на скриншоте и вставляем код:
Добавили, нажимаем на кнопку СОЗДАТЬ под цифрой 1, в текстовом редакторе сообщения вы не увидите код, там откроются слова: Картинка 1 Картинка 2 Картинка 3
Ставим курсор перед каждым словом Картинка и загружаем фотографии, выбираем маленький размер, по желанию добавляем подпись, все галерея готова. Удаляем слова и цифры.
Галерея изображений для blogger (https://yablogger.info/kak-sdelat-galereyu-iz-kartinok-v-blogger.html#more-95)Чтобы сделать 2 ряда, т.е 6 картинок в галерее, после загрузки 3-х
картинок, слова картинка 1, картинка 2 и картинка 3 переместятся во
второй ряд под изображениями. Делаем все так же как с первым рядом, но
если будем делать, как и в первом случае, то второй ряд будет прилипать к
первому. Что бы их разделить, ставим курсор перед словом и нажимаем
Enter.
Загружать желательно только три фотографии в ряд, четвертая в разных шаблонах может выходить за границы блока контента.
Выделенные красным урл. - адрес
ваших изображений (изображения должны иметь разный размер, вначале
маленький потом большой), вставляете по вашему усмотрению!
Слайдер изображений(http://www.shpargalochki.ru/2016/05/krasivyj-slajder-izobrazhenij.html) для блога.
Слайдер совмещает не только красивый переход каждого слайда. В нём ещё присутствует
2 вида навигации - кнопки внизу и стрелочки влево и вправо.
Рассчитано на 5 изображений.
В коде серым цветом стили, которые можно поменять на ваше усмотрение размер и шрифт текста. Ширина и высота всего слайдера в этом случае width: 500px; height: 200px;.
<script>
var slideIndex = 1;
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1;}
if (n < 1) {slideIndex = slides.length;}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
showSlides(slideIndex);
</script>
Готовый код устанавливаем в гаджет над сообщениями блога или в боковой панели.
В последнем случае необходимо будет изменить его ширину width: 500px; в соответствии с шириной колонки сайтбара. http://www.shpargalochki.ru/2018/05/slajder-s-knopkami-navigacii-BLOGGER.html
ссылка на тестовый вариант:http://blogodeltest2.blogspot.ru/
Блогспот не предусматривает возможности размещения гаджета в шапке и поэтому необходимо будет произвести небольшие изменения в шаблоне.
1) В настройках выходим в раздел "Шаблон".
2) Нажимаем "Изменить HTML".
3) Производим изменения в шаблоне.
Где то на уровне 619 строки (в зависимости от шаблона) находим строчку:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
и меняем , как указано на скриншоте на:maxwidgets='3'и maxwidgets='yes'
После замены жмем вначале на "Просмотреть шаблон" (подчеркнуто снизу красным) и если все нормально (не появилась табличка об ошибке) нажимаем "Сохранить шаблон".
Таким образом, мы дали "команду" в шаблоне разрешить наличие гадежта в шапке блога.
В разделе "Дизайн" у вас должна появиться, выделенная на скриншоте красным маркером секция.
В этой секции вы можете разместить любой код гаджета (в данном случае, я разместил код слайдера).
Вот код слайдера:
Слайдер устанавливается очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript или редактор сообщения необходимодобавить код. http://blogodel.com/2013/03/Krasivyj-slajder-slajd-shou-s-ochen-prostoj-ustanovkoj-dlja-Blogspot-Blogger.html Красный цвет кода - это ссылки и адреса картинок.
Небольшая картинка перед заголовком статьи, бесспорно является элементом эксклюзивного дизайна и создаст позитивное впечатление у читателей.
Установка как всегда очень проста: Дизайн - Добавить гаджет - HTML/JavaScript, НО придется немного "поиграться" настройками, ибо размеры заголовков у всех разные.
Новый виджет похожие сообщения для блоггера подойдет, как для обычных шаблонов так и для новых тем contempo, soho, emporio, notable.
Плюсы виджета:
Написан на чистом скрипте JS.
Понятен для поисковых ботов.
Не создает ссылки со значением Undefined, если сообщению не задан ярлык, что в свою очередь не допускает создания страниц с ошибкой 404.
Установка виджета для новых тем:
1) Откройте раздел Тема - Изменить HTML
2) Перед закрывающим тегом </head> добавьте код: <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src='[url]https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>[/url]
3) Найдите строку ]]></b:skin> перед ней добавьте CSS код:
<script id='related-posts' type='text/javascript'> /*<![CDATA[*/ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; try {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;} catch (error){ s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZbhuETZt7s0gzjyx9S-CqvBcdax86-hN9eUECtyVB87meRCq60EjWBvDfNjqoe-QXD6DA_3X6eur4LapK3qyx8OL1absGpgNAVIfCVL0hn8UGhJkZO3OjjBr4fJujVMKg4JEvlED4hMo/s1600/no_pic_available.jpg";} } if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"..."; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; } } } } function removeRelatedDuplicates_thumbs() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains_thumbs(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp3.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3[tmp3.length - 1] = thumburl[i]; } } relatedTitles = tmp2; relatedUrls = tmp; thumburl=tmp3; } function contains_thumbs(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels_thumbs(current) { for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==current)||(!relatedTitles[i])) { relatedUrls.splice(i,1); relatedTitles.splice(i,1); thumburl.splice(i,1); i--; } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; while (i < relatedTitles.length && i < 20 && i<maxresults) { tmb = thumburl[r].replace('s72-c/','s300-c/'); document.write('<div class="item-related"><a href="' + relatedUrls[r] + '" class="link"><img width="150" height="100" src="'+tmb+'"/></a><h3><a href="' + relatedUrls[r] + '">'+relatedTitles[r]+'</a></h3></div>');i++; if (r < relatedTitles.length - 1) { r++; } else { r = 0; } } relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length); } function removeHtmlTag(strx, chop) { var s = strx.split("<"); for (var i = 0; i < s.length; i++) { if (s[i].indexOf(">") != -1) { s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length) } } s = s.join(""); s = s.substring(0, chop - 1); return s } /*]]>*/ </script>
<div class='post-related'>
<div class='post-box'>
<h4 class='heading common-heading'> <i class="fa fa-th-list" aria-hidden="true"></i> Рекомендуем</h4>
</div>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var defaultnoimage="[url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcfWphyMyhfJzEb_kso2WiRCrR4p1P-5onS6ku3MP78DeqKoUXkKsVCmDq23mBha2H0GkyI5F785EMZxhO-_BVGbB3cOhMhLEse5xMNKhSaEwhjNLxZuOdeTEIoQjEVky72VuHD_O5cJQ/s400/noimage.png";[/url]
var maxresults=3; // Number Of Posts
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
5) Сохраните тему.
Установка виджета для обычных шаблонов:
Для обычных тем блоггера установка виджета похожих сообщений осуществляется таким же образом, как и для новых тем, за исключением 4 пункта. Вам нужно найти другой код, чтобы добавить после него скрипт. Какой именно нужно найти код смотрите в этой статье, после заголовка: Установка виджета для обычных шаблонов.