Слайд-шоу в блоге

Частенько случается, что в блог заходят случайные посетители. Как из случайных их превратить в возможных читателей? Ответ очевиден: надо не дать им закрыть страницу в первые секунды. Другими словами, надо дополнительно задержать на пару-тройку секунд, чтобы человек смог просмотреть чуточку больше информации, а вдруг заинтересует?

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

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

Сегодня я покажу простой способ установки такой "мелькашки".



1. Традиционно заходим в Панель управления блогом. Если слайд-шоу хотим добавить в сообщение (например, в вечнозеленое), то открываем вкладку HTML-сообщения.
Можно добавить с помощью гаджета, тогда выбираем "HTML/JavaScript"

2. Вставляем HTML-код, название я не указывала

А теперь собственно и сам HTML-код:


<style type="text/css">
#mcis {
 display: none;
}
#sliderFrame {
 position: relative;
 width: 160px; margin: 0 auto;
        border:5px solid #ffffff;
}
#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: no-repeat;
 z-index: 7;
}
#slider {
 width: 160px; height: 120px; background: #fff  no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position: absolute;
 border: none;
 display: none;
}
#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color: black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}
div.mc-caption a {
 color: #FB0;
}
div.mc-caption a:hover {
 color: #DA0;
}

}
#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style> <script src="https://www.opendrive.com/files/MV8zMTIyMDE4X2FmeHVy/lordhtml-javascriptslider.js" type="text/javascript"></script> <br />
<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Ex9uwk0lACWNPYJOC3g_kAfdzdjalnbA69GnksFqBKSQrWB8c-81eXQgKUhkwTvHMmCdn8wbs-zdkCkR6jNw_CJJieQWAJLkDrL0UyojVlFlYuMci4yGcDrVfH09b0kRKWoUxhPxTRqA/h120/0_2d9ba_e62bab47_S.jpg" /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh5TtuOqmGvVkk0OJiZ6Rr2-G3U4PTsR2EnOHs1b0D6kljpW2onpuAlAgau2DO3ZaZTsp-OlbwzzRhQPOOs-iz9BSX2GfTyskdv9KHBSDHEH8dJHA0QxTBTVvozE2bIfNS1MIAXn2ruVVv/h120/2082708.jpg" /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKIKRwEz_TA1D8QthxMTb0qXarxBCxTQ658-KE8AOpK6OFgEqkeC4CKk2B5xs0hTQLDbr1eoxwfCeS5hQ80F_32kExskwLWRZ3kbv8WdU2rgzZRdQa8RJ2Qv0egJ-rjerfbQxC1nZxjYoV/h120/2012-12-23_122653.png" /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5JdSDNDutECV3SXccAiUnW1cqB8aW2071NeTusKNE5MRBFyzDuGCYjKWA4MYkiI11MYOUUDnqcE2MdlNH16H4XtEpjokp1xpA4sE_9wwGunw74H20zQzpXUB9g38SrjeNA59eNersIin_/h120/Mojte-ruki-svoi-suki.jpg" /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk_ZJXfvXvhWX2gmpuMvkpZrVlZCBBHDrsPnBjBe1pidv8YMtvCp0fkL7d5LDQX1jo5We9Rpm_0kpfxwv8XwjGaypbUFB4sUgUHaN6B03FoNxb4LTxH_kqc1Go8DP8GCxvwWlinwQPbC7l/h120/small.jpg" />                
</div>


А теперь обращаем внимание на выделенные места:

- сиреневым выделены url-адреса картинок. Так как скорее всего фото мы будем брать из своего же блога, то просто на нужной картинке щелкнем правой кнопкой мыши, чтобы скопировать этот адрес (или ярлык) картинки

Заменяем все адреса картинок на свои.

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

- зеленым - указаны ширина и цвет рамочки. У меня рамка белая - код ffffff, хотите черную - ставим 000000,  другой цвет поможет определить любой поисковик:

3. Не забываем все сохранить. И любуемся результатом