
Сам пример виджета вы можете посмотреть на странице тестового блога.
Для полноценной работы виджета требуется подключенная библиотека 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 подключена.
Теперь остается установить сам виджет слайд-шоу. Размещается он с помощью старого доброго гаджета 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="http://4.bp.blogspot.com/-iRntl2hWaiA/Tg3VPxy1F6I/AAAAAAAABAs/G9Wr3P_y3rM/s320/Innuendo.jpg" /> <img src="http://1.bp.blogspot.com/-dGn8wP60sdQ/Tgy4BhlkX5I/AAAAAAAAA_8/j71y4aKjMFo/s320/queen-crest.jpg" /> <img src="http://2.bp.blogspot.com/-Jt39auJ8R8E/TY6aQtDcQoI/AAAAAAAAAxk/So50kjzPllg/s320/Serebro+%25282%2529.jpg" /> <img src="http://4.bp.blogspot.com/-M9rs9zyOsM8/ThEGl03p8wI/AAAAAAAABC8/t0eZ1ed9FE4/s1600/searching-for-info.jpg" /> <img src="http://1.bp.blogspot.com/-mf0OqvJn1Kg/TXjGjASG6AI/AAAAAAAAAxk/-dtV6_Qo4sg/s320/Poisk.jpg" /> </div>Устанавливаем и любуемся, а я тихо горжусь в сторонке.