Яндекс слайд шоу из фотографий. Слайд-шоу из яндекс фоток. Небольшая предыстория о победе Яндекса над Гуглом

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

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

Создать слайд шоу для сайта используя приложение Яндекс Для этого у вас должен быть зарегистрирован почтовый ящик на Яндекс.
Заходим в свой почтовый ящик и там выбираем "Фотки" - "Загрузить фотки" и соглашаемся с соглашением пользователя.

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

Добавляем фото, выделяем те, что хотим видеть в слайд шоу.

Вводим название фотоальбома и метки.

Пункт "Настройки" можно пропустить.

И переходим к четвертому шагу "Загрузить в альбом".

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

Чтобы сделать слайд шоу для сайта при помощи приложения Яндекс нажимаем на ссылку "Слайд шоу".

У нас с внучкой общими усилиями получилось вот такое слайд шоу для ее

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

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

Почему этот способ самый простой? Потому что для блогов на платформе Блоггер редактор Пикасса является "родным". Вставляя фотографии в блог, мы по умолчанию используем его. У каждого из пользователей Блоггер есть в Пикасса бесплатный аккунт, 15360 МБ для хранения фотографий и возможность пользоваться всеми услугами этого сервиса, включая и создание слайдшоу.
Допустим, вы хотите показать в блоге все фото ваших с детьми новогодних поделок (как это понадобилось мне для поста в моем основном блоге " "). Для этого вам необходимо создать новый вебальбом Пикаса и за грузить в него все нужные фотографии. Не забудьте поставить опцию доступа "Видимый для всех в интернете", чтобы изображения были доступны для просмотра. А после останется всего лишь в правом сайдбаре (колонке) нажать "Ссылка на этот альбом".
Под ней появится строчка "Встроить слайд-шоу".

После того, как на нее нажмешь, откроется окошко, в котором можно настроить параметры слайд-шоу - время задержки кадра, его размер и т.д. А внизу будет код для вставки в блог, который надо будет просто скопировать, а потом в ставить в свой блог. Если вы хотите, чтобы слайдшоу отображалось в сообщении, то вставьте код в режиме HTML в окошке редактора. Если же вы хотите, чтобы слайдшоу показывалось у вас на боковой панельке блога, то полученный код надо вставить в гаджет "HTML/Java script".

Все, слайдшоу сразу же появится в вашем блоге.
P.S. В режиме редактирования сообщения у меня вместо экрана появляется надпись от Оперы (моего браузера) "Нет плагина. Ознакомиться". Но это ничего страшного - после публикации сообщения все появится в нужном месте.

2. Встраивание слайдшоу от Яндекса.

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

И под окошком с примером слайд-шоу выбираете "Код для вставки на сайт или в блог".

Копируете предложенный код так же как и в предыдущем способе: если надо вставить в сообщение, то в режиме HTML, если надо на сайдбар, то с помощью гаджета "HTML/Java script".

Все параметры можно будет настроить уже в самом слайд-шоу. Вот как это будет выглядеть:
3. Встраивание слайдшоу с помощью скрипта.

Этот способ пригодится вам, если вы не только хотите показать фотографии, но и сделать так, чтобы каждое фото было ссылкой на соответствующее сообщение в блоге. В этом случае вам придется вставлять адреса изображений и связанные с ними ссылки вручную. Но, зато, так гораздо удобнее вашим читателям: кого-то заинтересовала фотография, он щелкнет по ней - и окажется в нужной статье.
Минус этого способа: когда у вас фотографий под сотню (как у нас в случае с поделками), то вручную их вставлять не очень-то интересно.
Самих скриптов можно найти по поиску множество. Например, такой (взято отсюда). Он очень простенький, но те, кто понимают HTML, могут без труда модифцировать его. А для каких-то простых целей и этого будет достаточно.

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

Раньше можно было получить линк лишь на отдельный файл. Или же все файлы нужно было собирать в архив и раздавать ссылку на него.

Однако всё это не очень удобно, т.к. требуются дополнительные действия со стороны пользователя. И особенно неудобно для любителей делиться фотографиями — ведь при желании показать свои фото/картинки кому-либо, нужно было получать ссылки на каждую картинку по-отдельности.

Как можно получить ссылку на папку в Яндекс Диске?

Через сделать это не получится (на данный момент). Так что надо перейти в веб-интерфейс сервиса и там просто выбрать любую папку (один раз нажать на неё л.к.м) , на которую следует получить ссылку. А затем, в правом нижнем углу поставить переключатель «Публичная ссылка» в положение «вкл.»:

Теперь этот линк уже можно раздавать кому угодно. Для получателя загрузится специальный веб-интерфейс, где он сможет просмотреть содержимое папки + затем его содержимое:

Просмотр каталога

Естественно, всё это дело можно скачать сразу — одним.zip-архивом, или же «поштучно», наведя курсор на отдельный файл.

Если в каталоге имеются картинки, то при клике на любой из них запустится удобное слайд-шоу:

Слайд-шоу в Яндекс Диске (кликабельно)

С появлением возможности получить ссылку на папку в Яндекс.Диск, этот сервис по своему функционалу очень приблизился к самому — Dropbox.com. Правда, у последнего есть возможность просматривать видеоролики онлайн, но нельзя запустить онлайн mp3-аудио. У Я.Диска — всё наоборот.

Также заслуживают внимания и эти облачные сервисы:

В общем, Яндекс.Диск очень активно развивается. Кроме получения прямой ссылки на папку, в нём теперь можно прямо онлайн читать текстовые документы разных форматов (.txt, .doc, .rtf, .pdf …) и даже разархивировать архивы —

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

Код абсолютно не сложный, без всяких библиотек и тяжёлых скриптов. И устанавливается элементарно в гаджет 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