воскресенье, 28 апреля 2013 г.

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


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

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

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

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



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://lh3.googleusercontent.com/-bpA2Q6U29_E/UF8b8cJWW9I/AAAAAAAAD2M/55W78ygAJoY/h120/0_2d9ba_e62bab47_S.jpg" /><img alt="" src="https://lh4.googleusercontent.com/-k6Bsd2a-jcw/UHpPjYtEXiI/AAAAAAAAECg/Mg1X5Kha-z4/h120/2082708.jpg" /><img alt="" src="https://lh6.googleusercontent.com/-XLnBUIDlgdc/UNbDRPcbyoI/AAAAAAAAFIo/nJ6cugVjCz8/h120/2012-12-23_122653.png" /><img alt="" src="https://lh5.googleusercontent.com/-DFP1_jKDQjo/UKh-taT7G-I/AAAAAAAAEjw/qX3Kxv-Q9DU/h120/Mojte-ruki-svoi-suki.jpg" /><img alt="" src="https://lh6.googleusercontent.com/-mkgVTxoGipY/UMQyl0MyqNI/AAAAAAAAE1I/dwta4thLv5Y/h120/small.jpg" />                
</div>


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

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


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

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

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




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





7 комментариев:

  1. Возьму на вооружение!Спасибо:))

    ОтветитьУдалить
  2. спасибо за полезную информацию, только вот немного не поняла про размер, у меня в маленьком оконце, только часть изображения отображается!

    ОтветитьУдалить
    Ответы
    1. Наталья, там где вы вставляли ссылки на картинки:
      "...<img border="0" height="320" src="https://..."
      height="320" - это высота картинок. Попробуйте изменить эту величину. Либо увеличивайте размер окна показа картинок - выделены красным

      Удалить
    2. спасибо))) сообразила))

      Удалить
  3. Спасибо!!! Были сложности с изменением размеров картинок для слайд-шоу, но всё получилось! Ура!

    ОтветитьУдалить
    Ответы
    1. Я рада, что все получилось. И все-таки этот скрипт у некоторых глючит. Надо будет поискать более универсальный...

      Удалить
    2. а еще в блоге в разделе Google+ нажала "Начать перенос" и у меня исчезли все комментарии..мороки было(

      Удалить