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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Способ 1: Slide-Life

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

  • Перейдя по вышеуказанной ссылке, нажмите «Попробовать бесплатно» на главной странице сайта.
  • Далее выберите один из доступных шаблонов.

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

  • Определившись с выбором и кликнув по шаблону, нажмите на кнопку «Далее» для перехода к следующему этапу.
  • Теперь нужно загрузить на сайт фотографии, из которых вы хотите создать слайд-шоу. Для этого кликните по кнопке с соответствующей надписью,

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

    Сейчас самое время вспомнить об ограничениях, накладываемых бесплатной версией Slide-Life: экспортировать можно «урезанный» видеоролик, то есть с меньшим количеством слайдов, чем вы добавляли. Для того чтобы «обмануть систему», просто загрузите на онлайн-сервис больше файлов, чем планируете добавить в проект. Оптимальный вариант – создать копии тех снимков, которые будут в конце слайд-шоу, и добавить их вместе с основными. В крайнем случае лишнюю часть готового ролика можно будет обрезать.

  • В окне с добавленными фотографиями можно изменить их порядок. Рекомендуем сделать это сейчас, так как в дальнейшем такой возможности не будет. Определившись с порядком слайдов в будущем слайд-шоу, нажмите «Далее» .
  • Теперь можно добавить музыку, которая будет звучать в создаваемом видеоролике. Рассматриваемый веб-сервис предлагает два варианта – выбор композиции из встроенной библиотеки или загрузку файла с компьютера. Рассмотрим второй.
  • Кликните по кнопке «Загрузить мелодию» , в открывшемся окне «Проводника» перейдите в папку с нужным аудиофайлом, выделите его нажатием левой кнопки мышки и кликните «Открыть» .
  • Спустя несколько секунд композиция будет загружена на сайт Slide-Life, где при желании ее можно прослушать. Нажмите «Далее» для перехода к непосредственному созданию слайд-шоу.
  • Автоматически начнется рендеринг проекта, продолжительность этого процесса будет зависеть от количества выбранных файлов и длительности музыкальной композиции.

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

  • На этом все – онлайн-сервис Slide-Life поприветствует вас с успешным выполнением процедуры,

    после чего останется лишь дождаться письма со ссылкой на скачивание готового слайд-шоу.

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

    Способ 2: Kizoa

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

  • Переход по вышеприведенной ссылке направит вас на главную страницу веб-сервиса, где нужно нажать кнопку «Попробовать» .
  • На следующей странице потребуется предоставить разрешение на использование Flash Player . Кликните для этого по выделенной на изображении ниже области, а затем во всплывающем окне нажмите кнопку «Разрешить» .

  • Следующий этап – определение режима работы с онлайн-сервисом Kizoa. Выберите «Модели Kizoa» , если планируете использовать для создания своего слайд-шоу один из имеющихся на сайте шаблонов, или «Создать самостоятельно» , если хотите разработать свой проект с нуля и контролировать каждый этап. В нашем примере будет выбран второй вариант.
  • Теперь необходимо определиться с форматом будущего слайд-шоу. Выберите тип ориентации («Портрет» или «Пейзаж» ) и соотношение сторон, а затем нажмите «Утвердить» .
  • На следующей странице кликните по кнопке «Добавить» , чтобы загрузить фотографии и/или видео для своего слайд-шоу,

    а затем выберите вариант добавления файлов – «Мой компьютер» (помимо этого, фотографии можно загрузить и с Facebook).

  • В открывшемся окне «Проводника» перейдите в папку со снимками и/или роликами, из которых хотите создать слайд-шоу. Выделите их и нажмите «Открыть» .

    Отметим, что Kizoa позволяет загружать в том числе и файлы в формате GIF. При их использовании веб-сервис предложит выбрать, как с ними поступить – создать видеоклип или оставить в качестве анимации. Для каждого из вариантов предусмотрена своя кнопка, дополнительно требуется установить галочку напротив пункта «Примените этот выбор для моей GIF скачивания» (да, разработчики сайта не блещут грамотностью).

  • Фотографии будут добавлены в редактор Kizoa, откуда их по одной следует перемещать в специальную область в том порядке, который вы сочтете нужным.

    При добавлении первого снимка в будущее слайд-шоу нажмите «Да» во всплывающем окне.

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

  • Для этого перейдите во вкладку «Переходы» .

    Выберите подходящий эффект перехода из большого списка доступных и поместите его между слайдами – в область, обозначенную буквой «Т» .

  • Для обработки элементов слайд-шоу эффектами перейдите в одноименную вкладку.

    Выберите подходящий эффект и перетяните его на слайд.

    В появившемся всплывающем окне можно увидеть, как отразится выбранный вами эффект на конкретном изображении. Для его применения нажмите по небольшой кнопке «Утвердить» ,

    а затем по еще одной такой же.

  • При желании на слайды можно добавить надписи – для этого следует перейти во вкладку «Текст» .

    Выберите подходящий шаблон и поместите его на изображение.

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

    Для добавления надписи на изображение дважды нажмите «Утвердить» .

  • Если вы делаете поздравительное слайд-шоу или, например, создаете его для ребенка, на изображение можно добавить стикеры. Правда, здесь они называются «Мультфильмы» . Как и со всеми остальными средствами обработки, выберите понравившийся элемент и перетяните его на нужный слайд. При необходимости, повторите это действие для каждого слайда.
  • Как и рассмотренный в первом способе веб-сервис Slide-Life, Kizoa тоже предоставляет возможность добавления музыки к слайд-шоу.

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

    Подтвердите свои намерения, нажав «Выбрать для создания слайд-шоу» во всплывающем окне.

    Затем, как и с мелодиями из собственной базы онлайн-сервиса, выделите добавленную аудиозапись и переместите ее на слайд-шоу.

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

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

  • Если ваш проект весит меньше 1 Гб (а скорее всего так и есть), его можно скачать бесплатно, выбрав соответствующий вариант.
  • В следующем окне определите параметры экспорта и выберите подходящее качество, затем нажмите «Подтвердить» .

    Закройте следующее всплывающее окно или кликните по кнопке «Выйти» для перехода к скачиванию файла.

    Нажмите «Скачать ваш фильм» ,

    после чего в «Проводнике» укажите папку для сохранения готового слайд-шоу и нажмите «Сохранить» .

  • Онлайн-сервис Kizoa во многом превосходит Slide-Life, так как позволяет самостоятельно обрабатывать и изменять каждый элемент создаваемого слайд-шоу. К тому же, ограничения его бесплатной версии никоим образом не отразятся на обычном, небольшом проекте.

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

    Другой несомненный плюс такого слайд шоу для сайта это то, что не нужно загружать на сайт дополнительные модули, плагины, компоненты, которые создают лишнюю нагрузку на сайт. Достаточно вставить 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

    Понравилась статья? Поделиться с друзьями: