Сам пример виджета вы можете посмотреть на странице тестового блога.
Для полноценной работы виджета требуется подключенная библиотека Jquery. Обычно, при использовании нестандартных шаблонов для Blogger в них уже размещен скрипт Jquery по умолчанию. Если скрипт отсутствует, особенно при условии использования родных шаблонов Blogger, вам придется самостоятельно добавить его в блог. Для начала проверьте наличие скрипта: проследуйте Дизай > Изменить шаблон HTML и с помощью клавиш поиска в вашем браузере CTRL+F найдите участок кода или подобный ему:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>Если же такового не наблюдается, добавьте скрипт. Для этого вставьте указанную выше строку кода сразу перед </head> в шаблоне вашего блога. Библиотека Jquery подключена.
Установка виджета простого слайд-шоу на Jquery.
Теперь остается установить сам виджет слайд-шоу. Размещается он с помощью старого доброго гаджета HTML/JavaScript в разделе "Дизайн". Если же вы хотите лицезреть его на статической странице или странице сообщения, тогда вписывайте код слайд-шоу во вкладке "Изменить HTML" в момент создания сообщения.
Основу виджета составляет:
<div class="slidshow"> <img src="images1.jpg"> <img src="images2.jpg"> <img src="images3.jpeg"> <img src="images4.jpeg"> </div>где указываются ссылки на свои изображения и размещается нужное количество картинок.
Теперь добавляем стили CSS для нашего слайд-шоу:
.slidshow {
position:relative;
}
.slidshow img {
position:absolute;
left:0;
top:0;
width:300px;
height:300px;
}в которых вы можете обозначить свои размеры изображений и, соответственно, всего виджета, меняя значения width:300px и height:300px.Подключим небольшой скрипт, отвечающий за анимацию и смену картинок в слайд-шоу:
<script>
$(function(){
$('.slidshow img:gt(0)').hide();
setInterval(function(){
$('.slidshow :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.slidshow');},2000);
});
</script>где число 2000 обозначает повторение смены изображений через каждые 2000 мс.Наконец, полный код виджета, который и нужно размещать в блоге, предварительно заменив ссылки изображений на свои:
<script>
$(function(){
$('.slidshow img:gt(0)').hide();
setInterval(function(){
$('.slidshow :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.slidshow');},2000);
});
</script>
<style>
.slidshow {
position:relative;
}
.slidshow img {
position:absolute;
left:0;
top:0;
width:400px;
height:400px;
}
</style>
<br />
<div class="slidshow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDM7SBTwCb4HW54HnweVAbUICu7Mb3wxnpx9kkRybcGc_wT13x6V4OxB1zHhv0d_Ok4dZmD8rnrxcNtoRetlAPsO0S4fzWto09ftE9vopPYY3FguuxDLBqmXv_1ozrzHXzJ_FtS9e_4S8/s320/Innuendo.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI4YT1qhjrkZNZtM-CjGZr-SjpZ_Chm8hiWlROcDtlw7UyVOyOoMLTTSSJq33Pj6BpJPcLWdztuqp5PACC45W-1PXjXaKNlP0cto8I84j1JSdOyYYBjRc09sxP5fhhm8DuARgwizY1yaw/s320/queen-crest.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBwLmiNwSeHLH-IaIeMdpsWryqBpszY86Qo2WBXkQuoFcDmr2Bzh6X-RTvwDamFIM6kB0fY5DHFS-t2qqiPwb1rzUpfrmRWftNgU_u4xrEzE0bpDFSxiDOgPqPJ3XU6oBjpj7EIZ9K4Ag/s320/Serebro+%25282%2529.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoutZ80oBYZeMCLgFVvczhuaWdmdlVMJvnEz1s4dj93sEalIx3UjLHzVz8FgL669tJ8yJjy0d5bMSuLq220l6TSWofCv1TwyrvCpDD152_4rqeQITS1KKVZgAsemk7kkt3re9p2Rcjemw/s1600/searching-for-info.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfxA0k3qcjW4e7xkzvnp7mS3JANt9D6w-i1_oQNpfSaJfFYHf123nUP4TFnzOVTF1LZKPe0-wBCePlyPINd9f89JFbmMEOD1cruj7iddmmlqw-0p6jI_HNx7_K3Hl7ZiVa91QqmOsgkNc/s320/Poisk.jpg" />
</div>Устанавливаем и любуемся, а я тихо горжусь в сторонке.