Слайд шоу в яндексе. Создание слайд-шоу из фотографий онлайн

Создав новый блог на blogspot, я задумалась, как бы мне сделать там удобное слайд-шоу в статьях. Ведь я хочу, чтобы читатель «залипал» на страницах, рассматривая множество картинок. Это, собственно, основная идея моего нового сайта - я сама долго «залипала», пока не решила извлечь из этого пользу. Но размещать все изображения в качестве иллюстраций - значит, сделать пост, длиной в километр, который человек замучается скроллить туда-сюда.

Зачем нужно слайд-шоу

Перед тем, как написать подробную инструкцию, хочу еще пару слов сказать о том, почему я вообще озадачилась этим вопросом.

В прошлой статье я объяснила, зачем сделала новый блог на Blogspot. Основной трафик на него будет из поиска. А для этого нужна хорошая индексация и удачное ранжирование статей (интересно, кому они не нужны?! ) А для этого очень важны, в том числе, хорошие поведенческие факторы (ПФ). И немаловажной частью этих ПФ является время, проведенное посетителем на страницах блога.

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

И об этом уже переговорено немало. Появились избитые стандартные рекомендации, вроде: «разместите под статьей виджет с интересными/популярными/похожими постами - посетитель заинтересуется и останется на блоге, чтобы почитать еще» или «разместите в статье видео - посетитель заинтересуется и будет его смотреть, оставаясь на блоге»…

Чувствуете безжизненный холод стандартных рекомендаций?! Не хватает только моей излюбленной фразы («делайте контент для людей!»). Вот и размещают многие в своих статьях о соленых огурцах видео… про котов или китов! Вот и втискивают огромные списки похожих статей. А если посмотреть, сколько переходов было по этим спискам и окажется, что 1 на 100 000 посетителей?

Нет. Смысл юзабилити - попытаться смоделировать человеческое поведение. И вот я думаю (не факт, что я права), сужу по себе, что в таких постах, как у меня на Домофоре (блогспотовский блог), уместнее всего будет слайд-шоу, которое человек может сам крутить во все стороны, рассматривать подробно, увеличить до полноэкранного масштаба и т.д.

И вы также подумайте. А если решите, что вам тоже такое надо, то вот вам подробный рассказ о возможностях.

Небольшая предыстория о победе Яндекса над Гуглом

Вообще-то, это удивительная история о том, как Яндекс переиграл Google на его собственном (гугла) поле. Понятно, что первым делом я направилась в альбомы Picasa, где Blogspot и размещает все картинки, которые мы грузим на страницы блога. И там, не без труда, нашла функцию создания слайд-шоу и публикации его на стороннем ресурсе. Но выглядела эта презентация ужасно убого!

Странно, что Гугл не сделал удобного и презентабельного инструмента для создания слайд-шоу на своих же блогах. Поэтому я развернулась на 180° и двинулась в Яндекс Фотки. Где моментально обнаружила возможность сделать слайд-шоу из альбома и получить вполне пристойную картинку в блоге.

Инструкция по созданию слайд-шоу в Яндекс Фотках

Итак, приходим на Яндекс Фотки. Конечно, у вас должен быть аккаунт в Яндексе (думаю, что в среде блоггеров человека БЕЗ аккаунта в Яндексе не встретишь ). Если вы собираетесь сделать слайд-шоу из уже существующего альбома - то можно сразу пролистать эту инструкцию на пару пунктов вниз. А мы быстренько рассмотрим, как сделать совершенно новый альбом и анимировать его содержимое.

Назовите альбом адекватно - не алб№1 или 463524. Его название будет выводится в начале слайд-шоу. Сделайте нормальное описание. Может быть, это уже просто привычка - везде, где можно, добавлять описания. Но все-таки есть надежда, что Яндекс обратит больше внимания на наш блог… Ну, может, через поиск по картинкам дело пойдет быстрее.

Помните, что это еще не загрузка. Для того, чтобы наш альбом появился на сервисе Яндекс фотки - жмите голубую кнопку в нижнем правом углу:

Теперь нужно зайти в свеженький альбом и выбрать ссылку «слайд-шоу» - справа от заголовка альбома:

Собственно, это все. Вот такую красивую картинку мы увидим:

Чтобы настроить эффекты смены фотографий - нажимаем на желтую стрелку в центре. Пока вы водите курсором по экрану слайд-шоу, внизу отображается меню с функциями перемотки, бегунком и кнопкой «эффекты». Нажимаем на нее и выбираем, как будут сменяться изображения. Мне особенно нравится эффект с небольшим приближением и удалением картинки. Но все очень интеллигентно - без звездочек и неожиданных рассыпаний фотки на мелкие пиксели)))

Ну и все - ниже расположен код для вставки на любые сайты или блоги. Blogspot его нормально переваривает. Правда при просмотре через мобильную версию Оперы - не грузит… Но это уже дело в браузере, а не в инструменте. В отдельном окошечке дают код для блогов на платформе LiveInternet. Еще можно просто получить ссылку на слайд-шоу - если вы заинтересованы в том, чтобы посетители пришли к вам на Я.ру.

После окончания просмотра в поле слайд-шоу появляется вот такая информация. Не очень красиво, но вполне функционально.

Демо слайд-шоу, созданного на ваших глазах, можете посмотреть в конце этой статьи http://www.domofor.com/2014/01/dvery-v-dome.html

Доброго времени суток, друзья. Интересное решение для при клике на иконку, которая не будет раздражать посетителей. В нём вы сможете разместить или важные объявления, или другую нужную информацию. Оно появиться только тогда, когда пользователь нажмёт на иконку (в моём случае иконка андроид).

Код абсолютно не сложный, без всяких библиотек и тяжёлых скриптов. И устанавливается элементарно в гаджет HTML/JavaScript. Сама картинка и кнопка "закрыть" в svg формате. Наглядно посмотреть эту "конструкцию" можно на тестовом блоге в правом верхнем углу.

Демонстрация
Весь код

Приветствую, Вас

блог шпаргалки блогерши о создании, настройках, оформлении и ведении блога на платформе BLOGGER Надеюсь, что Вы найдёте здесь много полезной и интересной информации. Очень буду рада вашим отзывам

.app-android-outer {
width: 50px;
position: fixed;
top: 0;
right: 50px;
z-index: 9999
}
.app-android {
width: 50px;
height: 55px;
line-height: 55px;
margin: 0;
text-align: center;
position: relative;
float: right;
cursor: pointer
}
.app-android svg {
vertical-align: middle;
opacity: .7
}
.app-android:hover svg,
.app-android:focus svg,
.app-android:active svg {
opacity: 1
}
.app-android:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.app-content {
background: #fff url(https://2.bp.blogspot.com/-sSuAXU_yhVM/XPD3sxcQ8DI/AAAAAAABK4s/CusSSD-sJf8k_B6AuUkF4g5nkmivM6MEACLcBGAs/s300-rw/android-4.png ) no-repeat bottom left;
width: 300px;
padding: 0;
border: 1px solid #ccc;
border-color: rgba(0, 0, 0, .2);
line-height: 1.3;
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
outline: 0;
position: absolute;
right: 50%;
top: 50px;
margin-right: -40px;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-user-select: text;
z-index: 2;
display: none;
}
.app-content h3 {
margin: 0;
padding: 5px 20px;
color: #333;
font-size: 18px;
font-weight: 700;
border-bottom: 1px solid #ccc;
border-color: rgba(0, 0, 0, .2)
}
.app-content-on {
padding: 10px 20px 16px;
color: #333;
font-size: 16px;
font-weight: 400
}
.app-content-on svg {
vertical-align: -7px;
}
.app-content:before {
content: "";
border-color: transparent;


position: absolute;
right: 0;
margin-right: 30px;
z-index: 1;
height: 0;
width: 0;
border-bottom-color: #ccc;
border-bottom-color: rgba(0, 0, 0, .2);
top: -9.5px
}
.app-content:after {
content: "";
border-color: transparent;
border-bottom-color: #fff;
border-style: dashed dashed solid;
border-width: 0 8.5px 8.5px;
position: absolute;
right: 0;
margin-right: 30px;
top: -8.5px;
z-index: 1;
height: 0;
width: 0
}
.app-close-button {
position: absolute;
width: 18px;
height: 18px;
line-height: 28px;
text-align: center;
top: 7px;
right: 5px;
background: 0 0;
border: none;
cursor: pointer;
padding: 0
}
.app-close-button:before {
content: "";
position: absolute;
top: -15px;
right: -15px;
bottom: -15px;
left: -15px;
cursor: pointer
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes slideInUp {
0% {


visibility: visible
}
100% {

transform: translateY(0)
}
}
@keyframes slideInUp {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
visibility: visible
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@media screen and (max-width:960px) {
.app-android-outer {
right: 80px
}
}
@media screen and (max-width:375px) {
.app-content {
margin-right: -75px
}
.app-content:after,
.app-content:before {
margin-right: 65px
}
}
@media screen and (max-width:320px) {
.app-content {
margin-right: -95px
}
.app-content:after,
.app-content:before {
margin-right: 85px
}
}

Копируйте готовый код целиком, устанавливайте его в гаджет HTML/JavaScript в любое место макета блога. Иконка будет расположена именно в том месте, как задумано. В строке, отмеченной серым цветом, полупрозрачная фоновая картинка самого всплывающего окна. За ненадобностью можно убрать из кода и задать предпочтительный основной фон на свой вкус, изменив значение background: #fff на желаемое.

Спасибо всем за внимание. Увидимся.

оформите подписку на новые шпаргалки

Привет, друзья. Хочу показать как очень просто изменить общий фон всего блога. Хотя сам фон можно легко настроить в разделе Тема . Там можно подобрать готовые фоны или залить свою картинку и сделать соответствующие настройки. Однако, решила вам предложить более лёгкий вариант, на мой взгляд. Здесь мы сами сможем регулировать размер фоновой картинки. Вернее её ширину.

Перейдём к делу. Изначально мой тестовый блог выглядел так. Я отметила пространство (или задний фон всего полотна), который задан был в настройках темы.

Сейчас мы его поменяем на такую картинку

Чтобы получилось примерно вот так

Здесь я хочу обратить ваше внимание. Ширина блога в моём случае 1200 px. Размеры фоновой картинки 1450 на 950 px. Картинка заполнила полностью всё пространство.

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

Оно, вроде как, тоже вполне приемлемо. Некоторые таким образом украшают сайты к праздникам. В любом случае рассмотрим оба варианта. При правильно подобранном или созданном в любом редакторе фоне и тот и другой вариант можно подогнать.

Особых навыков не нужно.

1. Подберите нужную картинку и скопируйте её адрес.
2.Копируйте приведённый ниже код и устанавливаете адрес своей картинки

3. Идём во вкладку Тема - Изменить HTML находим ]]> и устанавливаем над этой строкой готовый код.

Результат будет виден при просмотре темы. Если вы остались им довольны смело нажимайте сохранить и любуйтесь новым шаблоном.

Опять же повторюсь. На тот случай если картинка оказалась меньше размеров ширины блога или вообще спряталась с глаз долой, нужно в коде задать значение ширины. Добавим всего одну строчку и он выглядел так

body {
background: url(http://www.clipartbest.com/cliparts/9iz/EnR/9izEnR56T.png)
no-repeat top fixed ;
background-size: 100%;
}

Со значением background-size: 100%; можно поиграться, меняя его на меньшее, пока не добьётесь желаемого.

Такими простыми манипуляциями можно создавать разные фоны под разные праздники, времена года или ваше настроение.

Возможно Вы пропустили

Всем добра и до встречи.

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

Живую демонстрацию вы можете увидеть сразу ниже. Ссылки я дала на некоторые страницы своего блога для наглядности. Вы, конечно, поменяете их на адреса своих страниц. Картинки и текст - соответственно.

Вот сам код.

Дорогие читатели "текст ссылки", Поздравляю вас с наступающим 2020 годомтекст ссылки. Пусть начнется новым взлетом К лучшим жизненным высотам И хорошим в банке счетом текст ссылки Принесет в делах согласье, В личной жизни — много счастья!."

.stage {
display: table-cell;
vertical-align: middle;
}
.tabled, .middled {
text-align: center;
margin: 0 auto;
}
.jumbo {
font-size: 150%;
vertical-align: -25px;
transform: rotate(8deg);
}
.jumbo:first-child {
-webkit-animation: wave 10s infinite ease;
animation: wave 10s infinite ease;
}
.jumbo:last-child {
-webkit-animation: wave 15s infinite ease;
animation: wave 15s infinite ease;
}
@keyframes wave {
0% { transform: rotate(8deg); }
25% { transform: rotate(15deg); }
75% { transform: rotate(-10deg); }
100% { transform: rotate(8deg); }
} @-webkit-keyframes wave {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(10deg); }
100% { -webkit-transform: rotate(0deg); }
}
p {
font-size: 110%;
font-family: Helvetica, sans;
max-width: 24em;
margin: 0 auto;
text-align: justify;
color: #00695C;
font-weight: lighter;
line-height: 1.5em;
}
a {
color: #ccc;
text-decoration: none;
border-bottom: solid thin #f7901d;
}
a:hover {
color: #f7901d;
}
.boo {
position: relative;
}
.boo:before, .boo:after {
position: absolute;
transition: all 0.15s ease;
}
.boo:before {
top: -75px;
left: -70px;
-webkit-transform:rotate(0deg) scale(0);
-moz-transform:rotate(0deg) scale(0);
-o-transform:rotate(0deg) scale(0);
-ms-transform:rotate(0deg) scale(0);
transform:rotate(0deg) scale(0);
}
.boo:after {
top: -115px;
right: -70px;
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transform:rotateY(180deg) scale(0);
-moz-transform:rotateY(180deg) scale(0);
-o-transform:rotateY(180deg) scale(0);
-ms-transform:rotateY(180deg) scale(0);
transform:rotateY(180deg) scale(0);
}
.boo:hover:before {
top: -140px;
-webkit-transform:rotate(15deg) scale(1);
-moz-transform:rotate(15deg) scale(1);
-o-transform:rotate(15deg) scale(1);
-ms-transform:rotate(15deg) scale(1);
transform:rotate(15deg) scale(1);
}
.boo:hover:after {
-webkit-transform:rotateY(180deg) scale(0.7);
-moz-transform:rotateY(180deg) scale(0.7);
-o-transform:rotateY(180deg) scale(0.7);
-ms-transform:rotateY(180deg) scale(0.7);
transform:rotateY(180deg) scale(0.7);
}
.boo:before, .boo:after {
content: url("ссылка на картинку. png");
}

Скопируйте код целиком, сделайте нужные настройки и установите его в редакторе сообщения в режиме HTML в нужном месте. В примере указаны 3 ссылки. В любом случае можно убирать или добавлять строку такого вида

"текст ссылки")

А мне от всего сердца хочется вам всем пожелать самого счастливого Нового года. Улыбок, радости, здоровья, благополучия родным и близким. Добра и мира Вашему дому!!!

С НАСТУПАЮЩИМ, ВСЕХ, НОВЫМ 2020 ГОДОМ!!!

Всем, привет. Навигация в стандартных шаблонах Блоггер вообще не привлекает к себе никакого внимания. Еле заметная панелька в конце страницы не каждый и заметит. Поэтому любой новый посетитель может не увидеть ссылку на предыдущие или следующие статьи блога.
Стилей навигации достаточно много. Но уже не первый раз обращаются, что многие из них "приказали долго жить". А навигация сайта, пожалуй самый основной элемент. Поэтому дам ссылки на статьи, где публиковала уже варианты оформления навигации и предложу ещё один рабочий код. Вот так она будет выглядеть под сообщениями блога.

Сегодняшний вариант смотрится достаточно элегантно. Отображает на панели нумерованный список страниц и правильно отображает предыдущие и следующие.

Для установки сначала нужно скопировать этот код

//1J "+i+\" 1H \"+g+"";7 1f=L(i)-1;5(i>1){5(i==2){5(l=="s"){6+=\"\"+Q+\"\"}e{6+=\"\"+Q+\"\"}}e{5(l=="s"){6+=\"\"+Q+\"\"}e{6+=\"\"+Q+\"\"}}}5(E>1){5(l=="s"){6+=\"1\"}e{6+=\"1\"}}5(E>2){6+=\"...\"}1m(7 m=E;m