Google+ Blogger WordPress Facebook Like Vkontakte Odnoklassniki LiveJournal vKruguDruzei Facebook Email Gmail
Показаны сообщения с ярлыком виджет. Показать все сообщения
Показаны сообщения с ярлыком виджет. Показать все сообщения
пятница, 24 августа 2018 г.

Меню игральные карты на CSS3

источник
Меню работает без применения картинок,все визуальные рисунки и движения являются работой свойств CSS3.Цвет короны и описания ссылок можно изменить на подходящие,они выделены комментарием в коде.Расположение от верхней части страницы отрегулировано с расчётом чтобы осталось место для админ панели,если Вам нужно сместить его ниже или выше,отредактируйте значение для свойства
 Information
Свойство margin это сокращённый способ установить параметры отступов для всех четырёх сторон элемента относительно родительского элемента.Не путать со свойством padding устанавливающим отступ внутри элемента.Для более объективного сценария указывайте расширенные свойства margin.Если вы хотите применить несколько значений расширенных свойств для margin,прописывайте их через пробел,можно указать от одного до четырёх значений.Дополнительно,существует порядок установки расширенных свойств,свойства устанавливаются по часовой стрелке начиная с верхней части.
margin:220px auto;
.
Эта регулировка находится в первом классе,в начале кода здесь ▼..cards 
{
padding:0;
margin:220px auto;
list-style:none;
position:relative;
height:270px;
width:200px;
}
Можно установить весь код по месту установки или вынести код стилей в основной файл CSS,но по возможности старайтесь не перегружать основные стили сайта uCoz.В остальном Вам потребуется только вставить ссылки и добавить к ним описание.Воспользуйтесь редактором HTML который находится ниже для проверки кода на работоспособность.Если что-то не удалось понять,воспользуйтесь формой задачи вопросов по теме находящейся в нижней части материала,опишите подробнее что именно не понятно.

Пример кода меню




среда, 6 июня 2018 г.

Горизонтальные меню навигации в блог ,8 примеров

Устанавливаются горизонтальные меню в блог довольно просто. В окне "Дизайн" надо выбрать место для добавления гаджета (виджета). Затем на это место вставить гаджет "HTML-javascript", со скопированным в него кодом выбранного горизонтального меню. После этого можно вносить свои правки отступов, рамки, цвета меню, адресов и ссылок, выделенных красным цветом, визуально контролируя изменения. Вообще, редактировать коды на горизонтальные меню можно как в блокноте, так и непосредственно в окне гаджета.
1).3040753_01Snimok (485x42, 1Kb)
Код для меню, что выше:
<style>
#navcontainer { /* none needed */ }
ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; }
ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0px 4px 0px; background-color: #666666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; }
#navlist a,
#navlist a:link { margin: 0px; padding: 5px 9px 4px 9px; color: #FFFFFF; border-right: 1px solid #d1e3db; text-decoration: none; }
ul#navlist
li#active { color: #95bbae; background-color: #d1e3db; }
#navlist a:hover { color: #FFFFFF; background-color: #FE9C54; }
</style>
<br />
<div id="navcontainer">
<ul id="navlist">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
<li><a href="Адрес страницы">Ссылка 7</a></li>
</ul>
</div>
2).3040753_02Snimok (548x46, 1Kb)
<style>
#navcontainer { float:left; width:100%; background:#FFFFFF; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; }
ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; }
ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; }
 #navlist a,
#navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #FFFFFF; border-right: 1px solid #d1e3db; text-decoration: none; }
ul#navlist
li#active { color: #95bbae; background-color: #d1e3db; }
#navlist a:hover { color: #666; background-color: #FFFFFF; }
</style>
<br />
<div id="navcontainer">
<ul id="navlist">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
<li><a href="Адрес страницы">Ссылка 7</a></li>
</ul>
</div>
3).3040753_03Snimok (548x61, 1Kb)
<style>
#tabs { font: bold 7.5pt Verdana; }
#navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; }
ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; }
ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a,
#navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; }
 #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <br />
<div id="navcontainer">
<ul id="navlist">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
</ul>
</div>

4)3040753_04Snimok (460x40, 1Kb)
<style>
#tabs1 { font: bold 7.5pt Verdana; }
#tabs9 img { border: none; }
#navcontainer { margin: 10px 0 0 0px; padding: 0; height: 20px; }
#navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; }
#navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; }
#navcontainer ul li a { background: #fff; width: 60px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; }
#navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; }
#navcontainer a:active { background: #c60; color: #fff; }
#navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; }
</style> <br />
<div id="navcontainer">
<ul id="navlist">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
<li><a href="Адрес страницы">Ссылка 7</a></li>
</ul>
</div>
5)3040753_05Snimok (537x60, 1Kb)
<style>
.container { width: 520px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; }
#nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; }
#nav li { margin: 0; padding: 0; display: inline; list-style-type: none; }
#nav a:link,
#nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; }
#nav a:link.active,
#nav a:visited.active,
#nav a:hover { color: #666; background: url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKF2gMzhH9P5kl3t66v-M5Qdf3cs2UwP3c2YJo7Bm76YNCDfBvnFplP1y4_CXVoyRPTP4SbIqEIFKmjKSvt1y7WiA5faqLYgu0_I1WjSJZ2dswFXt470U7ycXbhgwcodrMI3warbwQnF4/s1600/Inverted.png[/url]) no-repeat top center; border-top: 4px solid #5F6A71; }
</style>
<br />
<div class="container">
<ul id="nav">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
<li><a href="Адрес страницы">Ссылка 7</a></li>
</ul>
</div>
6)3040753_06Snimok (545x64, 1Kb)
<style>
#navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; }
#navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } }
#navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body
#navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; }
#navlist a,
#navlist a:link,
#navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; }
#navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; }
#navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; }
#navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body
#navlist li#active { background: #000; margin: 0 4px 0 4px; }
#navlist #active a,
#navlist09 #active a:link,
#navlist09 #active a:visited,
#navlist09 #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <br />
<div id="navcontainer">
<ul id="navlist">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
<li><a href="Адрес страницы">Ссылка 7</a></li>
</ul>
</div>
7)3040753_07Snimok (548x93, 1Kb)
<style>
.container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */
#navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; }
#navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; }
#navSquare a:link,
#navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; }
#navSquare a:link.active,
#navSquare a:visited.active,
#navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <br />
<div class="container">
<ul id="navSquare">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
</ul>
</div>
8)3040753_08Snimok (547x71, 2Kb)
<style>
#navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif;  font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; }
ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; }
ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; }
ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; }
#navcontainer>
ul#navlist li a { width: auto; }
ul#navlist li#active a { background: #f0e7d7; color: #800000; }
ul#navlist li a:hover,
ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }
</style>
<br />
<div id="navcontainer">
<ul id="navlist">
<li><a href="Адрес страницы">Ссылка 1</a></li>
<li><a href="Адрес страницы">Ссылка 2</a></li>
<li><a href="Адрес страницы">Ссылка 3</a></li>
<li><a href="Адрес страницы">Ссылка 4</a></li>
<li><a href="Адрес страницы">Ссылка 5</a></li>
<li><a href="Адрес страницы">Ссылка 6</a></li>
</ul>
</div>
источник:   http://ob-bl.blogspot.com/2014/01/horizont-menu01.html



вторник, 5 июня 2018 г.

Гаджеты для Blogger.

 информация с сайта http://shpargalkablog.ru/2010/11/gadzhety-dlya-blogger.html#razmeshchenie

1. Сделать гаджет Blogger над/под заголовком.

2.Увеличить ширину всего блога.

3.Убрать гаджет Blogger с определённой страницы.

4.Не показывать боковую панель на определённой странице.

5.Разделить одно поле гаджета на два под заголовком.




Галерея blogspot на jQuery с zoom эффектом

источник: https://www.mycrib.ru/2012/11/gallery-blogspot-jquery-zoom-effect.html
Еще статьи автора:
1.Простой галереи blogspot(http://www.mycrib.ru/2012/09/galereya-blogspot.html) в виде слайд-шоу,
2.Подборка шаблонов галерей для blogger(http://www.mycrib.ru/2012/09/shablony-blogger-gallery.html)и 3.Создание jquery карусели (http://www.mycrib.ru/2012/09/jquery-jcarousel.html)



пятница, 1 июня 2018 г.

Отображение виджета на конкретной странице блога

источник: http://blogohelp.blogspot.com/2012/06/blog-post_16.html
1. Заходим в раздел "Дизайн", где добавляем виджет. Можете расположить его где угодно - под постами блога, в боковой панели и т.п. У нас виджет "ПРИВЕТ".



среда, 30 мая 2018 г.

Фишки для дизайна с использованием CSS

Источник :https://www.bdblogov.ru/2016/03/chips-for-design-with-using-CSS-for-blogger.html
Изображение слева для заголовка сообщения
Изображение для заголовка сообщения слева
.post-title {
    background: url(адрес картинки) no-repeat left transparent;
    padding-left: 35px;
    }
Изображения слева и справа для заголовка поста
Изображения для заголовка постов справа и слева
.post-title:before,
.post-title:after {
content: url(адрес изображения);
}
Иконка сверху слева для заголовка поста
Картинка сверху слева для заголовка поста
.post-outer:before {content: url(адрес изображения);}
Иконка сверху по центру для заголовка сообщения
Картинка сверху по центру для заголовка сообщения
.post-outer:before {
content: url(адрес картинки);
display: block;
width: auto;
margin: 0 150px;
}
Меняйте значение margin: 0 150px; и настраивайте положение картинки по центру или справа
Изображение слева для шапки блога
Изображение слева для шапки блога
.header {
    background: url(адрес картинки) no-repeat left transparent;
    padding-left:75px;top:3px; //*отступ от названия заголовка;
    }
Изображение справа в шапке блога
Изображение справа в шапке блога
.header {
    background: url(адрес картинки) no-repeat right transparent;
    padding-right:75px;top:3px;
    }
Изменить расположение заголовка (названия) блога (по центру или правее)
Изменить расположение заголовка (названия) блога
.header{ padding-left:275px;top:3px;}
Автоматическая подпись под всеми сообщениями в блоге
Автоматическая подпись под всеми постами в блоггер
.entry-content:after {
content: url(адрес подписи);
margin-left: 50px;
}
Почитайте пост  Как создать красивую подпись для своих веб сайтов/блогов

(https://www.bdblogov.ru/2014/01/as-create-a-beautiful-signature.html)
Убрать иконку карандаша в комментариях
Иконка карандаша в комментариях
Убираем иконку карандаша на чистом CSS
.comments .comments-content .icon.blog-author {display:none;}
Гаджет Архив блога в прокрутке
#BlogArchive1 .widget-content{height:300px; width:auto;overflow:auto;}
Гаджет Ярлыки в прокрутке
#Label1 .widget-content{height:100px; width:auto;overflow:auto;}

Изменить на странице цвет выделяемого текста при копировании
::selection {
background: #ff6200;
color: #fff;
 }
::-moz-selection {
background: #ff6200;
color: #fff;
}
Скрыть подчеркивание ссылок
a:link {text-decoration:none;}

Коды CSS вставляем в шаблон изменить шаблон выше строки ]]></b:skin>.
Можно вставить дизайн добавить гаджет внизу макета блога: <style>код CSS</style>. Или в таком же варианте в редакторе сообщений по вкладке HTML оформить для отдельной страницы.
У кого на главной больше одного поста, при вставке кода в один из них, картинки в заголовке появятся во всех сообщениях. Коды картинок для заголовка поста устанавливайте на страницы, не отображающиеся на главной. 
И в заключение два скрипта, для автоматического изменения основного фона при переходе на другие страницы. Скрипт вставить шаблон изменить шаблон выше закрывающего тэга </head>.
Автоматически меняющийся основной фон блога при переходе
<script type='text/javascript'>//<![CDATA[
function get_random_color(){var e="0123456789ABCDEF".split("");var t="#";for(var n=0;n<6;n++){t+=e[Math.round(Math.random()*14)]}return t}$(function(){$(".content").each(function(){$(this).css("background-color",get_random_color())})})//]]></script>
Меняющийся фон заголовка
<script type='text/javascript'>//<![CDATA[
function get_random_color(){var e="0123456789ABCDEF".split("");var t="#";for(var n=0;n<6;n++){t+=e[Math.round(Math.random()*14)]}return t}$(function(){$(".header").each(function(){$(this).css("background-color",get_random_color())})})//]]></script>



понедельник, 28 мая 2018 г.

Прокрутка заголовков сообщений блога

источник:https://www.bdblogov.ru/2013/08/blog-post_22.html
Ещё один скрипт-для прокрутки заголовков постов. Копируем код ниже.



понедельник, 14 мая 2018 г.

Переместить или удалить заблокированный гаджет в макете блога blogspot

Приветствую всех друзей и моих дорогих читателей. Сегодня поговорим о гаджетах в макете блога. Вы наверное обращали внимание, что некоторые из гаджетов мы не можем переместить и удалить, такой функции просто не существует, когда мы нажимаем изменить гаджет. На самом деле сделать это очень просто, изменив всего лишь одно значение в коде виджета. Но давайте по порядку: Вот макет во вкладке дизайн
 Заблокированные гаджеты в макете блога
Заблокированные гаджеты в макете блога
С левой стороны гаджета мы видим серую полоску, такой виджет без труда можно переместить в другое место макета блога или удалить, если нажать изменить. А вот к примеру гаджет атрибуция не имеет такой полоски, это означает, что он заблокирован, переместить и удалить его мы не имеем возможности. Нажмите изменить
Смотрим ID гаджета
Нет возможности удалить. Смотрим ID гаджета
Здесь мы можем настроить сведения об авторстве и сохранить. Сверху где стрелка, посмотрите ID гаджета и идем в шаблон делаем резервную копию изменить шаблон.
В шаблоне нажимаем список виджетов и ищем по ID гаджет
В шаблоне в списках гаджетов ищем нужный по ID
По ID находим нужный гаджет
В этом списке все установленные гаджеты в макете блога.
Нажимаем по названию и перед нами в шаблоне нужный гаджет
Снимаем блокировку гаджета
Снимаем блокировку гаджета
В строке <b:widget id='Attribution1' locked='true' title='' слово true (правда заблокировать) меняем на false (ложная блокировка): locked='false'. Сохраняем шаблон, переходим в дизайн, нажимаем правую кнопку мыши перезагрузить. У гаджета атрибуция появилась слева серая полоска. 
Вы можете переместить его в другое место макета блога или нажмите изменить
Появилась вкладка удалить гаджет
Гаджет разблокирован
Теперь мы можем удалить этот гаджет. У меня в блоге написана статья, как скрыть или Убрать надпись шаблон технологии Blogger, но многие боятся удалять код гаджета в шаблоне, прихватить что-нибудь лишнее. А этим способом, отменив блокировку, Вы сможете без труда его удалить.
В макете блога заблокированы виджеты заголовка и панели навигации. Мы можем их разблокировать и переместить. Заголовок нет необходимости удалять, а панель навигации не удастся удалить этим способом. Как отключить, спрятать и удалить читайте в статье: Как убрать панель навигации Navbar.  
Также при смене шаблона часто появляются пустые гаджеты Feed1 и Feed2. Смотрела в шаблоне, они не заблокированы, но удалить их  невозможно. Поэтому нажимайте изменить, смотрите ID гаджета. Далее в шаблоне в списке находите его и аккуратно удаляете:
 <b:widget id='HTML2'  далее код  </b:widget>
На сегодня вся информация. Комментируйте, пишите отзывы, задавайте вопросы. Всего доброго.



Меняем дизайн гаджета постоянные читатели.

С помощью CSS можно изменить гаджет постоянные читатели.
Итак, сделать гаджет постоянные читатели в виде спойлера, используя CSS.
Копируем к себе в черновик этот код
#Followers1 {
  background: #F0F0FF; 
  overflow: hidden;
  border: 1px solid #C04D00 ;
  border-radius: 5px;
  box-shadow: none; /

  -webkit-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -moz-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  -o-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
  height: 80px;
  width: auto;
}

#Followers1:hover {
  background: #FAF5FF;
  border: 1px solid #A08BED;

  -webkit-box-shadow: 0 1em 1em .3em rgba(0,0,6,0.5); /*Chrome*/
  -moz-box-shadow: 0 1em 1em .3em rgba(0,0,6,0.5); /*FF*/
  box-shadow: 0 1em 1em .3em rgba(0,0,6,0.5);
 height: 300px;
}
#Followers1 > h2 {
 display: none; 

}

#Followers1-wrapper {
  box-shadow: none;
  -webkit-transition: box-shadow 1s ease;
  -moz-transition: box-shadow 1s ease;
  -o-transition: box-shadow 1s ease;
  transition: box-shadow 1s ease;
}
#Followers1-wrapper:hover {
  -webkit-box-shadow: inset 0 0 1em .3em #c9f;
  -moz-box-shadow: inset 0 0 1em .3em #c9f;
  box-shadow: inset 0 0 1em .3em #c9f;
  height: 300px;
}
Давайте сейчас разберёмся в настройках. Тут можно много чего поменять, но остановимся, на основных. Они выделены синим цветом. Рассмотрим сверху вниз по порядку.
background: #F0F0FF; -цвет основного фона
#C04D00 -цвет рамки
height: 80px;-это высота гаджета в состоянии покоя
height: 300px;-эта высота всего гаджета. Её нужно будет редактировать на свой вкус. В двух местах.

Обратите внимание на 2 строки в коде #Followers1 > h2 {

 display: none; этот участок отвечает за название гаджета. Если оставить в таком виде, то он будет без названия. Название осталось. Вот  и все настройки.
Когда код готов, заходим в шаблон-изменить HTML. Находим строку ]]></b:skin>и прямо над ней вставляем его. Сохраняем.

Ещё на один момент. Так как, шаблоны могут быть разные нужно проверить вот такой идентификатор гаджета постоянные читатели- #Followers1. У вас он может быть несколько другой #Followers2 или 3. В этом случае эти цифры нужно поменять на свои.
И давайте посмотрим, как это узнать.

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

Закрыть ссылку гаджета постоянные читатели.
(http://www.shpargalochki.ru/2014/04/zakryt-ssylku-gadzheta-pch.html#more)
Не так давно мы уже поднимали эту тему в посте убрать всё лишнее с главной страницы блога(http://www.shpargalochki.ru/2014/01/ubrat-lishnie-ssylki.html). 
А именно , как убрать кнопки быстрого редактирования.
Однако, этот способ не прошёл с гаджетом постоянные читатели. Я сама долго ломала голову, как закрыть ссылку этого гаджета (я ведь тоже только учусь). Заходим на главную страницу нашего блога и нажимаем правую кнопку мыши. В открывшемся окне выбираем просмотр кода страницы.
В этом коде находим строку такую ​​строку Followers1-wrapper. 
Мы её видим и  через строчку ниже начинается код <script type="text/javascript">..... 
Код достаточно большой и заканчивается он примерно вот  так .
height: 260,
site: "14730854670774716477",
locale: 'ru' },
skin);
</script>
Копируем весь этот код (от и до).
ДИЗАЙН-ДОБАВИТЬ ГАДЖЕТ-HTML/JavaScript и вставляем скопированный код. Называем гаджет, как нам хочется и перетаскиваем его в любое место блога.

После всего этого остаётся только зайти в шаблон (не забывайте делать копию шаблона) , найти строку <b include name='quickedit'/> и закрыть вот таким образом <!-- <b include name='quickedit'/> -->. Просматриваем блог и сохраняем изменения.

Ну вот и ещё от лишних ссылок мы освободили свой блог. Когда всё проделали смело можно убрать старый  гаджет постоянные читатели. Узнать как изменить дизайн этого (http://www.shpargalochki.ru/2014/09/kak-izmenit-gadzhet-postojannye.html#more) гаджета .



Появление и скрытие элементов за счет прозрачности

Наверняка вы видели на многих блогах, когда при скроллинге страницы вниз, появляется блок меню или другой гаджет, например кнопки социальных сетей. При прокрутке вверх элемент опять угасает.
Для такого эффекта нам понадобится всего лишь небольшой скрипт.
Будем использовать метод fadeIn( ). С помощью этой функции можно показывать и скрывать выбранные элементы на странице, за счет плавного изменения прозрачности. И fadeOut( )- скрывает соответствующие элементы путем затухания их до прозрачного состояния.

Нам понадобится вот такой код.
<script src="[url]https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>[/url]
<script>
$("#HTML10").hide();
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$("#HTML10").fadeIn("slow");
}
else {
$("#HTML10").fadeOut("slow");
}
});</script>
Процесс установки в блоге совсем простой. Для начала нужно знать ID гаджета который будет скользить HTML10. Замените на свой и  будьте внимательны ко всем символам. Посмотрите как узнать ID любого гаджета.
В коде красным цветом скрипт библиотеки jquery. Если у вас такая установлена в блоге его нужно убрать и использовать только вторую часть кода. scrollTop() > 100) это расстояние сверху, когда будет появляться объект. Настраивайте на своё усмотрение.
Далее заходим во вкладку ТЕМА - изменить HTML. С помощью горячих клавиш находим закрывающийся тег </body>. 
Сразу перед ним вставляем готовый код и сохраняем изменения. Перейдите на страницу блога и смотрите результат.https://www.blogger.com/%3Ca%20href=



четверг, 10 мая 2018 г.

Слайдер (ротатор контента) для Blogger

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

начинается перелистывание.

Основа  easySlider, где добавили "размеры" картинки и установил регулировку паузы.
По просьбе aldous, автор замечательного блога  Blogger не для чайников (https://www.blogger.com/null) оформил заголовки страниц в слайдере ссылками и таким образом появился ротатор контента, который вы видите на моем блоге.

Размеры у всех разные и поэтому от стрелочек пришлось отказаться! Вместо стрелочек управление в ввиде слов: "предыдущее", "следующее", которые на размеры не влияют.
Зато, вся процедура существенно упростилась и вместо трех скриптов теперь один, а так же отпала необходимость "лезть" в шаблон!
Демо можно посмотреть здесь
Заходим в Дизайн и вставляем скрипт в "Добавить гаджет - HTML/JavaScript".
Параметры кода: там где маркировано красным, будет адрес вашего блога. 
<style>#slide-container {
height:165px;
position:relative;
width:530px;
}
#slider {
height:165px;
left:24px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:530px;
}
.slide-desc {


padding:10px;
position:absolute;
right:0px;
text-align:left;
top:0;
width:290px;
z-index:1;
}
.slide-desc h2{display:block;}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}

}
</style><div id="slider">


<script style="text/javascript">

   var showpostthumbnails_gal  = true;
    var showpostsummary_gal   = true;
 var random_posts         = true;
 var numchars_gal   = 210;
 var numposts_gal   = 34;
function showgalleryposts(json) {
    var numPosts = json.feed.openSearch$totalResults.$t;
    var indexPosts = new Array();
 document.write('<ul>');
    for (var i = 0; i < numPosts; ++i) {
        indexPosts[i] = i;
    }
 if (random_posts == true){
    indexPosts.sort(function() {return 0.5 - Math.random()});
 }
    if (numposts_gal > numPosts) {
        numposts_gal = numPosts;
    }
    for (i = 0; i < numposts_gal; ++i) {
        var entry_gal = json.feed.entry[indexPosts[i]];
  var posttitle_gal =  entry_gal.title.$t;
        for (var k = 0; k <  entry_gal.link.length; k++) {
            if ( entry_gal.link[k].rel == 'alternate') {
                posturl_gal =  entry_gal.link[k].href;
                break;
            }
        }
  if ("content" in entry_gal) {
            var postcontent_gal = entry_gal.content.$t
        }
        s = postcontent_gal;
        a = s.indexOf("<img");
        b = s.indexOf("src=\"", a);
        c = s.indexOf("\"", b + 5);
        d = s.substr(b + 5, c - b - 5);
        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
            var thumburl_gal = d
        } else var thumburl_gal = '[url]http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';[/url]
        document.write('<li><div id="slide-container"><span class="slide-desc"><h2><a href="' + posturl_gal + '">');
        document.write(posttitle_gal + '</a></h2>');
        var re = /<\S[^>]*>/g;
        postcontent_gal = postcontent_gal.replace(re, "");
        if (showpostsummary_gal == true) {
            if (postcontent_gal.length < numchars_gal) {
                document.write(postcontent_gal);
                document.write('</span>')
            } else {
                postcontent_gal = postcontent_gal.substring(0, numchars_gal);
                var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
                postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
                document.write(postcontent_gal + '...');
                document.write('</span>')
            }
        }
   document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="220px" height="165"/></a></div>');
        document.write('</li>');
    }
 document.write('</ul>');

}
</script>
<!-- replace with your web address (marked with red color) -->
<script src="[url]http://blogodel.com/[/url]feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
<script src='[url]http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'[/url] type='text/javascript'></script>
<script src='[url]http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js'[/url] type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({pause: 4000,
 nextId: 'next',
prevId: 'prev', nextText: ' Следующее &#9658;', prevText: '&#9668; Предыдущее ',                      
 auto: true,
 continuous: true
 });
});
//]]>
</script>

Код без скрипта jquery (для тех у кого не "идет" предыдущий код)

<style>#slide-container {
height:165px;
position:relative;
width:530px;
}
#slider {
height:165px;
left:24px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:530px;
}
.slide-desc {


padding:10px;
position:absolute;
right:0px;
text-align:left;
top:0;

width:290px;
z-index:1;
}
.slide-desc h2{display:block;}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}

}
</style><div id="slider">


<script style="text/javascript">

   var showpostthumbnails_gal  = true;
    var showpostsummary_gal   = true;
 var random_posts         = true;

 var numchars_gal   = 210;
 var numposts_gal   = 34;
function showgalleryposts(json) {
    var numPosts = json.feed.openSearch$totalResults.$t;
    var indexPosts = new Array();
 document.write('<ul>');
    for (var i = 0; i < numPosts; ++i) {
        indexPosts[i] = i;
    }
 if (random_posts == true){
    indexPosts.sort(function() {return 0.5 - Math.random()});
 }
    if (numposts_gal > numPosts) {
        numposts_gal = numPosts;
    }
    for (i = 0; i < numposts_gal; ++i) {
        var entry_gal = json.feed.entry[indexPosts[i]];
  var posttitle_gal =  entry_gal.title.$t;
        for (var k = 0; k <  entry_gal.link.length; k++) {
            if ( entry_gal.link[k].rel == 'alternate') {
                posturl_gal =  entry_gal.link[k].href;
                break;

            }
        }
  if ("content" in entry_gal) {
            var postcontent_gal = entry_gal.content.$t
        }
        s = postcontent_gal;
        a = s.indexOf("<img");
        b = s.indexOf("src=\"", a);
        c = s.indexOf("\"", b + 5);
        d = s.substr(b + 5, c - b - 5);
        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
            var thumburl_gal = d
        } else var thumburl_gal = '[url]http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';[/url]
        document.write('<li><div id="slide-container"><span class="slide-desc"><h2><a href="' + posturl_gal + '">');
        document.write(posttitle_gal + '</a></h2>');
        var re = /<\S[^>]*>/g;
        postcontent_gal = postcontent_gal.replace(re, "");
        if (showpostsummary_gal == true) {
            if (postcontent_gal.length < numchars_gal) {
                document.write(postcontent_gal);

                document.write('</span>')
            } else {
                postcontent_gal = postcontent_gal.substring(0, numchars_gal);
                var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
                postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
                document.write(postcontent_gal + '...');
                document.write('</span>')
            }
        }
   document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="220px" height="165"/></a></div>');
        document.write('</li>');
    }
 document.write('</ul>');

}
</script>
<!-- replace with your web address (marked with red color) -->
<script src="[url]http://russkiyiliteratura.blogspot.ru/[/url]feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
<script src='[url]http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js'[/url] type='text/javascript'></script>
<script type='text/javascript'>

//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({pause: 4000,
 nextId: 'next',
prevId: 'prev', nextText: ' Следующее &#9658;', prevText: '&#9668; Предыдущее ',                      
 auto: true,
 continuous: true
 });
});
//]]>
</script>
Дополнение: маркировка, это длинна анонса, маркировка - скорость смены анонса. Маркировка  и так же  такой фон - ширина элементов слайдера и картинок.
Внимание! Если у вас уже установлены динамические виджеты с jquery, со скриптом вида (указан в коде ЖЕЛТЫМ фоном):
<script src='[url]http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'[/url] type='text/javascript'></script>то слайдер может не пойти. 
http://blogodel.com/2012/11/slajder-rotator-kontenta-dlja-blogger.html



среда, 9 мая 2018 г.

Установка гаджета (слайдера) в шапку Блоггер


ссылка на тестовый вариант:http://blogodeltest2.blogspot.ru/
Блогспот не предусматривает возможности размещения гаджета в шапке и поэтому необходимо будет произвести небольшие изменения в шаблоне.
1) В настройках выходим в раздел "Шаблон".
2) Нажимаем "Изменить HTML".
3) Производим изменения в шаблоне.
Где то на уровне 619 строки (в зависимости от шаблона) находим строчку:
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
и меняем , как указано на скриншоте на:  maxwidgets='3'и maxwidgets='yes'
После замены жмем вначале на "Просмотреть шаблон" (подчеркнуто снизу красным) и если все нормально (не появилась табличка об ошибке) нажимаем "Сохранить шаблон".

Таким образом, мы дали "команду" в шаблоне разрешить наличие гадежта в шапке блога.
В разделе "Дизайн" у вас должна появиться, выделенная на скриншоте красным маркером секция.
В этой секции вы можете разместить любой код гаджета (в данном случае, я разместил код слайдера).
Вот код слайдера:

<style type="text/css"/>
/* dimpost.com - Basic Style */
body{
background: transparent;
font:15px/2 'Adobe Caslon Pro', Georgia, Serif;
margin:0;
padding:0;
}
a{outline:0 none}
#pagewrap{
margin:10px auto;
padding:0;
position:relative;
height:400px;
width: 640px;
}
#slidewrap{position:absolute;}
#slider {
    border-color: #c0c0c0;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 10px 10px 30px;
    box-shadow: 0 0 3px #2F2F2F;
    height: 280px;
    margin: 10px;
    position: relative;
    width: 600px;
}
#slider images{
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider images {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
.nivo-directionNav{display:none!important}
.nivo-html-caption {
    display:none;
}
.nivo-caption{
position:absolute;
right:20px;
text-align:center;
top:130px;
width:192px;
z-index:60;
}
.nivo-caption p{margin:0}
.nivo-caption .title{font-style:italic}
.nivo-controlNav {
    bottom: -23px;
    display: block;
    height: 15px;
    left: 204px;
    position: absolute;
    text-align: center;
    width: 192px;
    z-index: 51;
opacity: 0.6;
}
.nivo-controlNav a{
background:transparent url([url]http://project.dimpost.com/image-slider/images/button.png[/url]) no-repeat center center;
display:inline-block;
height:14px;
width:14px;
text-indent:-9999px;
cursor:pointer;
}
.nivo-controlNav .active{
background:transparent url([url]http://project.dimpost.com/image-slider/images/button_active.png[/url]);
}
</style>
<script src="[url]http://project.dimpost.com/image-slider/jquery-1.6.1.min.js"[/url] type="text/javascript"></script>
<script src="[url]http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js"[/url] type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<!--[if IE]>
<script src="modernizr-2.0.min.js"></script>
<![endif]-->

<div id="pagewrap">
<div id="slidewrap">
<div id="slider">
<a href="[url]http://dimpost.com/"[/url] target="_blank"><img alt="" title="#caption1" src="[url]http://project.dimpost.com/image-slider/images/sample0.jpg[/url]" /></a>
<a href="#" target="_blank"><img alt="" title="#caption2" src="[url]http://project.dimpost.com/image-slider/images/sample1.jpg[/url]" /></a>
<a href="#" target="_blank"><img alt="" title="#caption3" src="[url]http://project.dimpost.com/image-slider/images/sample2.jpg[/url]" /></a>
<a href="#" target="_blank"><img alt="" title="#caption4" src="[url]http://project.dimpost.com/image-slider/images/sample3.jpg[/url]" /></a>
<a href="#" target="_blank"><img alt="" title="#caption5" src="[url]http://project.dimpost.com/image-slider/images/sample4.jpg[/url]" /></a>
<a href="#" target="_blank"><img alt="" title="#caption6" src="[url]http://project.dimpost.com/image-slider/images/sample5.jpg[/url]" /></a>
</div>
 </div>  </div>
 И еще один скрипт
<script src='[url]https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'[/url] type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
function convertEntities(b){var d,a;d=function(c){if(/&[^;]+;/.test(c)){var f=document.createElement("div");f.innerHTML=c;return !f.firstChild?c:f.firstChild.nodeValue}return c};if(typeof b==="string"){return d(b)}else{if(typeof b==="object"){for(a in b){if(typeof b[a]==="string"){b[a]=d(b[a])}}}}return b};
//]]>
</script><style type="text/css"/>
 /* Slider */
.slide{
  padding-left:5px;
  height:300px;
  overflow:hidden;
}
#slider {

  position:relative;
  width:768px;
  height:300px;
  margin:0 auto;
  padding:0;
}
#slider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
}
#slider a {
  border:0;
}
.nivo-directionNav a {
  display:block;
  width:30px;
  height:30px;
  background:url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCFVBKs1x1cBfeHoJYy8v3rp8F428wQH1Rx6hATksl_lBptSv1qdr9jR0TZz9Gcy9mq2R7sQjd7ir_rqDry8GkNgSu1CcCwcmFQAlDnvAFwObMcnToY7I7UbZPiIYtWWSXgw1_7PWoF4_h/s0/arrows.png[/url]) no-repeat;
  text-indent:-9999px;
  border:0;
}
a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
}
a.nivo-prevNav {
  left:15px;
}
.nivo-caption {
  text-shadow:none;
  font-family:  Arial, Helvetica,sans-serif;
  text-align:center;
}
.nivo-caption a {
  text-decoration:underline;
}
/* The Nivo Slider styles */
.nivoSlider {
  position:relative;
  width:768px;
  margin:0 auto;
  pading:0;
  left:0;
  z-index:10;
}
.nivoSlider img {
  position:absolute;
  top:0px;
  left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  margin:0;
  z-index:6;
  display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
}
.nivo-box {
  display:block;
  position:absolute;
  z-index:5;
}
/* Caption styles */
.nivo-caption {
  position:absolute;
  left:0px;
  top:0px;

  color:#fff;
  width:100%;
  height:25px;
  z-index:10;
}
.nivo-caption p {
  padding:5px;
  margin:0;
  color:#ccc;
}
.nivo-caption a {
  display:inline !important;
}
.nivo-html-caption {
  display:none;
}
.nivo-directionNav a {
  position:absolute;
  top:50%;
  z-index:9;
  cursor:pointer;
}
.nivo-prevNav {
  left:0px;
}
.nivo-nextNav {
  right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
  position:relative;
  z-index:9;
  cursor:pointer;
}
.nivo-controlNav a.active {
  font-weight:bold;
}

 </style>
 <script type='text/javascript'>
//<![CDATA[
/*
 * jQuery Nivo Slider v2.5.1
 * [url]http://nivo.dev7studios.com[/url]
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * [url]http://www.opensource.org/licenses/mit-license.php[/url]
 *
 * March 2010
 */
(function($){var NivoSlider=function(element,options){var settings=$.extend({},$.fn.nivoSlider.defaults,options);var vars={currentSlide:0,currentImage:'',totalSlides:0,randAnim:'',running:false,paused:false,stop:false};var slider=$(element);slider.data('nivo:vars',vars);slider.css('position','relative');slider.addClass('nivoSlider');var kids=slider.children();kids.each(function(){var child=$(this);var link='';if(!child.is('img')){if(child.is('a')){child.addClass('nivo-imageLink');link=child;}
child=child.find('img:first');}
var childWidth=child.width();if(childWidth==0)childWidth=child.attr('width');var childHeight=child.height();if(childHeight==0)childHeight=child.attr('height');if(childWidth>slider.width()){slider.width(childWidth);}
if(childHeight>slider.height()){slider.height(childHeight);}
if(link!=''){link.css('display','none');}
child.css('display','none');vars.totalSlides++;});if(settings.startSlide>0){if(settings.startSlide>=vars.totalSlides)settings.startSlide=vars.totalSlides-1;vars.currentSlide=settings.startSlide;}
if($(kids[vars.currentSlide]).is('img')){vars.currentImage=$(kids[vars.currentSlide]);}else{vars.currentImage=$(kids[vars.currentSlide]).find('img:first');}
if($(kids[vars.currentSlide]).is('a')){$(kids[vars.currentSlide]).css('display','block');}
slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');slider.append($('<div class="nivo-caption"><p></p></div>').css({display:'none',opacity:settings.captionOpacity}));var processCaption=function(settings){var nivoCaption=$('.nivo-caption',slider);if(vars.currentImage.attr('title')!=''){var title=vars.currentImage.attr('title');if(title.substr(0,1)=='#')title=$(title).html();if(nivoCaption.css('display')=='block'){nivoCaption.find('p').fadeOut(settings.animSpeed,function(){$(this).html(title);$(this).fadeIn(settings.animSpeed);});}else{nivoCaption.find('p').html(title);}
nivoCaption.fadeIn(settings.animSpeed);}else{nivoCaption.fadeOut(settings.animSpeed);}}
processCaption(settings);var timer=0;if(!settings.manualAdvance&&kids.length>1){timer=setInterval(function(){nivoRun(slider,kids,settings,false);},settings.pauseTime);}
if(settings.directionNav){slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+settings.prevText+'</a><a class="nivo-nextNav">'+settings.nextText+'</a></div>');if(settings.directionNavHide){$('.nivo-directionNav',slider).hide();slider.hover(function(){$('.nivo-directionNav',slider).show();},function(){$('.nivo-directionNav',slider).hide();});}
$('a.nivo-prevNav',slider).live('click',function(){if(vars.running)return false;clearInterval(timer);timer='';vars.currentSlide-=2;nivoRun(slider,kids,settings,'prev');});$('a.nivo-nextNav',slider).live('click',function(){if(vars.running)return false;clearInterval(timer);timer='';nivoRun(slider,kids,settings,'next');});}
if(settings.controlNav){var nivoControl=$('<div class="nivo-controlNav"></div>');slider.append(nivoControl);for(var i=0;i<kids.length;i++){if(settings.controlNavThumbs){var child=kids.eq(i);if(!child.is('img')){child=child.find('img:first');}
if(settings.controlNavThumbsFromRel){nivoControl.append('<a class="nivo-control" rel="'+i+'"><img src="'+child.attr('rel')+'" alt="" /></a>');}else{nivoControl.append('<a class="nivo-control" rel="'+i+'"><img src="'+child.attr('src').replace(settings.controlNavThumbsSearch,settings.controlNavThumbsReplace)+'" alt="" /></a>');}}else{nivoControl.append('<a class="nivo-control" rel="'+i+'">'+(i+1)+'</a>');}}
$('.nivo-controlNav a:eq('+vars.currentSlide+')',slider).addClass('active');$('.nivo-controlNav a',slider).live('click',function(){if(vars.running)return false;if($(this).hasClass('active'))return false;clearInterval(timer);timer='';slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');vars.currentSlide=$(this).attr('rel')-1;nivoRun(slider,kids,settings,'control');});}
if(settings.keyboardNav){$(window).keypress(function(event){if(event.keyCode=='37'){if(vars.running)return false;clearInterval(timer);timer='';vars.currentSlide-=2;nivoRun(slider,kids,settings,'prev');}
if(event.keyCode=='39'){if(vars.running)return false;clearInterval(timer);timer='';nivoRun(slider,kids,settings,'next');}});}
if(settings.pauseOnHover){slider.hover(function(){vars.paused=true;clearInterval(timer);timer='';},function(){vars.paused=false;if(timer==''&&!settings.manualAdvance){timer=setInterval(function(){nivoRun(slider,kids,settings,false);},settings.pauseTime);}});}
slider.bind('nivo:animFinished',function(){vars.running=false;$(kids).each(function(){if($(this).is('a')){$(this).css('display','none');}});if($(kids[vars.currentSlide]).is('a')){$(kids[vars.currentSlide]).css('display','block');}
if(timer==''&&!vars.paused&&!settings.manualAdvance){timer=setInterval(function(){nivoRun(slider,kids,settings,false);},settings.pauseTime);}
settings.afterChange.call(this);});var createSlices=function(slider,settings,vars){for(var i=0;i<settings.slices;i++){var sliceWidth=Math.round(slider.width()/settings.slices);if(i==settings.slices-1){slider.append($('<div class="nivo-slice"></div>').css({left:(sliceWidth*i)+'px',width:(slider.width()-(sliceWidth*i))+'px',height:'0px',opacity:'0',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((sliceWidth+(i*sliceWidth))-sliceWidth)+'px 0%'}));}else{slider.append($('<div class="nivo-slice"></div>').css({left:(sliceWidth*i)+'px',width:sliceWidth+'px',height:'0px',opacity:'0',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((sliceWidth+(i*sliceWidth))-sliceWidth)+'px 0%'}));}}}
var createBoxes=function(slider,settings,vars){var boxWidth=Math.round(slider.width()/settings.boxCols);var boxHeight=Math.round(slider.height()/settings.boxRows);for(var rows=0;rows<settings.boxRows;rows++){for(var cols=0;cols<settings.boxCols;cols++){if(cols==settings.boxCols-1){slider.append($('<div class="nivo-box"></div>').css({opacity:0,left:(boxWidth*cols)+'px',top:(boxHeight*rows)+'px',width:(slider.width()-(boxWidth*cols))+'px',height:boxHeight+'px',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((boxWidth+(cols*boxWidth))-boxWidth)+'px -'+((boxHeight+(rows*boxHeight))-boxHeight)+'px'}));}else{slider.append($('<div class="nivo-box"></div>').css({opacity:0,left:(boxWidth*cols)+'px',top:(boxHeight*rows)+'px',width:boxWidth+'px',height:boxHeight+'px',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((boxWidth+(cols*boxWidth))-boxWidth)+'px -'+((boxHeight+(rows*boxHeight))-boxHeight)+'px'}));}}}}
var nivoRun=function(slider,kids,settings,nudge){var vars=slider.data('nivo:vars');if(vars&&(vars.currentSlide==vars.totalSlides-1)){settings.lastSlide.call(this);}
if((!vars||vars.stop)&&!nudge)return false;settings.beforeChange.call(this);if(!nudge){slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');}else{if(nudge=='prev'){slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');}
if(nudge=='next'){slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');}}
vars.currentSlide++;if(vars.currentSlide==vars.totalSlides){vars.currentSlide=0;settings.slideshowEnd.call(this);}
if(vars.currentSlide<0)vars.currentSlide=(vars.totalSlides-1);if($(kids[vars.currentSlide]).is('img')){vars.currentImage=$(kids[vars.currentSlide]);}else{vars.currentImage=$(kids[vars.currentSlide]).find('img:first');}
if(settings.controlNav){$('.nivo-controlNav a',slider).removeClass('active');$('.nivo-controlNav a:eq('+vars.currentSlide+')',slider).addClass('active');}
processCaption(settings);$('.nivo-slice',slider).remove();$('.nivo-box',slider).remove();if(settings.effect=='random'){var anims=new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade','boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');vars.randAnim=anims[Math.floor(Math.random()*(anims.length+1))];if(vars.randAnim==undefined)vars.randAnim='fade';}
if(settings.effect.indexOf(',')!=-1){var anims=settings.effect.split(',');vars.randAnim=anims[Math.floor(Math.random()*(anims.length))];if(vars.randAnim==undefined)vars.randAnim='fade';}
vars.running=true;if(settings.effect=='sliceDown'||settings.effect=='sliceDownRight'||vars.randAnim=='sliceDownRight'||settings.effect=='sliceDownLeft'||vars.randAnim=='sliceDownLeft'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;var slices=$('.nivo-slice',slider);if(settings.effect=='sliceDownLeft'||vars.randAnim=='sliceDownLeft')slices=$('.nivo-slice',slider)._reverse();slices.each(function(){var slice=$(this);slice.css({'top':'0px'});if(i==settings.slices-1){setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
timeBuff+=50;i++;});}
else if(settings.effect=='sliceUp'||settings.effect=='sliceUpRight'||vars.randAnim=='sliceUpRight'||settings.effect=='sliceUpLeft'||vars.randAnim=='sliceUpLeft'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;var slices=$('.nivo-slice',slider);if(settings.effect=='sliceUpLeft'||vars.randAnim=='sliceUpLeft')slices=$('.nivo-slice',slider)._reverse();slices.each(function(){var slice=$(this);slice.css({'bottom':'0px'});if(i==settings.slices-1){setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
timeBuff+=50;i++;});}
else if(settings.effect=='sliceUpDown'||settings.effect=='sliceUpDownRight'||vars.randAnim=='sliceUpDown'||settings.effect=='sliceUpDownLeft'||vars.randAnim=='sliceUpDownLeft'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;var v=0;var slices=$('.nivo-slice',slider);if(settings.effect=='sliceUpDownLeft'||vars.randAnim=='sliceUpDownLeft')slices=$('.nivo-slice',slider)._reverse();slices.each(function(){var slice=$(this);if(i==0){slice.css('top','0px');i++;}else{slice.css('bottom','0px');i=0;}
if(v==settings.slices-1){setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
timeBuff+=50;v++;});}
else if(settings.effect=='fold'||vars.randAnim=='fold'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;$('.nivo-slice',slider).each(function(){var slice=$(this);var origWidth=slice.width();slice.css({top:'0px',height:'100%',width:'0px'});if(i==settings.slices-1){setTimeout(function(){slice.animate({width:origWidth,opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({width:origWidth,opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
timeBuff+=50;i++;});}
else if(settings.effect=='fade'||vars.randAnim=='fade'){createSlices(slider,settings,vars);var firstSlice=$('.nivo-slice:first',slider);firstSlice.css({'height':'100%','width':slider.width()+'px'});firstSlice.animate({opacity:'1.0'},(settings.animSpeed*2),'',function(){slider.trigger('nivo:animFinished');});}
else if(settings.effect=='slideInRight'||vars.randAnim=='slideInRight'){createSlices(slider,settings,vars);var firstSlice=$('.nivo-slice:first',slider);firstSlice.css({'height':'100%','width':'0px','opacity':'1'});firstSlice.animate({width:slider.width()+'px'},(settings.animSpeed*2),'',function(){slider.trigger('nivo:animFinished');});}
else if(settings.effect=='slideInLeft'||vars.randAnim=='slideInLeft'){createSlices(slider,settings,vars);var firstSlice=$('.nivo-slice:first',slider);firstSlice.css({'height':'100%','width':'0px','opacity':'1','left':'','right':'0px'});firstSlice.animate({width:slider.width()+'px'},(settings.animSpeed*2),'',function(){firstSlice.css({'left':'0px','right':''});slider.trigger('nivo:animFinished');});}
else if(settings.effect=='boxRandom'||vars.randAnim=='boxRandom'){createBoxes(slider,settings,vars);var totalBoxes=settings.boxCols*settings.boxRows;var i=0;var timeBuff=0;var boxes=shuffle($('.nivo-box',slider));boxes.each(function(){var box=$(this);if(i==totalBoxes-1){setTimeout(function(){box.animate({opacity:'1'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){box.animate({opacity:'1'},settings.animSpeed);},(100+timeBuff));}
timeBuff+=20;i++;});}
else if(settings.effect=='boxRain'||vars.randAnim=='boxRain'||settings.effect=='boxRainReverse'||vars.randAnim=='boxRainReverse'||settings.effect=='boxRainGrow'||vars.randAnim=='boxRainGrow'||settings.effect=='boxRainGrowReverse'||vars.randAnim=='boxRainGrowReverse'){createBoxes(slider,settings,vars);var totalBoxes=settings.boxCols*settings.boxRows;var i=0;var timeBuff=0;var rowIndex=0;var colIndex=0;var box2Darr=new Array();box2Darr[rowIndex]=new Array();var boxes=$('.nivo-box',slider);if(settings.effect=='boxRainReverse'||vars.randAnim=='boxRainReverse'||settings.effect=='boxRainGrowReverse'||vars.randAnim=='boxRainGrowReverse'){boxes=$('.nivo-box',slider)._reverse();}
boxes.each(function(){box2Darr[rowIndex][colIndex]=$(this);colIndex++;if(colIndex==settings.boxCols){rowIndex++;colIndex=0;box2Darr[rowIndex]=new Array();}});for(var cols=0;cols<(settings.boxCols*2);cols++){var prevCol=cols;for(var rows=0;rows<settings.boxRows;rows++){if(prevCol>=0&&prevCol<settings.boxCols){(function(row,col,time,i,totalBoxes){var box=$(box2Darr[row][col]);var w=box.width();var h=box.height();if(settings.effect=='boxRainGrow'||vars.randAnim=='boxRainGrow'||settings.effect=='boxRainGrowReverse'||vars.randAnim=='boxRainGrowReverse'){box.width(0).height(0);}
if(i==totalBoxes-1){setTimeout(function(){box.animate({opacity:'1',width:w,height:h},settings.animSpeed/1.3,'',function(){slider.trigger('nivo:animFinished');});},(100+time));}else{setTimeout(function(){box.animate({opacity:'1',width:w,height:h},settings.animSpeed/1.3);},(100+time));}})(rows,prevCol,timeBuff,i,totalBoxes);i++;}
prevCol--;}
timeBuff+=100;}}}
var shuffle=function(arr){for(var j,x,i=arr.length;i;j=parseInt(Math.random()*i),x=arr[--i],arr[i]=arr[j],arr[j]=x);return arr;}
var trace=function(msg){if(this.console&&typeof console.log!="undefined")
console.log(msg);}
this.stop=function(){if(!$(element).data('nivo:vars').stop){$(element).data('nivo:vars').stop=true;trace('Stop Slider');}}
this.start=function(){if($(element).data('nivo:vars').stop){$(element).data('nivo:vars').stop=false;trace('Start Slider');}}
settings.afterLoad.call(this);return this;};$.fn.nivoSlider=function(options){return this.each(function(key,value){var element=$(this);if(element.data('nivoslider'))return element.data('nivoslider');var nivoslider=new NivoSlider(this,options);element.data('nivoslider',nivoslider);});};$.fn.nivoSlider.defaults={effect:'random',slices:15,boxCols:8,boxRows:4,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:'.jpg',controlNavThumbsReplace:'_thumb.jpg',keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:0.8,prevText:'Prev',nextText:'Next',beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};$.fn._reverse=[].reverse;})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
jQuery('.squarebanner li:nth-child(even)').addClass('rbanner');
jQuery('#slider').nivoSlider({
effect:'random',
slices: 10 });
});
//]]>
</script>
 <div class='nivoSlider' id='slider'>
<a href='#'><img alt='самый высокий водопад в мире' class='nivim' height='300' src='[url]http://vallek.ru/wp-content/uploads/2013/06/anhel_1.jpg[/url]' title='#Post Title' width='768'/></a>
<a href='#'><img alt='#Post Title' class='nivim' height='300' src='[url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3dpidsKejJLoasajgDrYLT3jImttuc29uihyphenhyphenHQ9x6PtLO1gXMSDTUkZXxy3olygmZzVonNKp5g7LJLOiCXkRyD6DO6MidbBsGJQ6YL0evdtY3CVQbpjk2LV1ionjxrz73FbNzLMYOvkgf/s0/1.jpg[/url]' title='#Post Title' width='768'/></a>
<a href='#'><img alt='#Post Title' class='nivim' height='300' src='[url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCY-_zeHv0mIN2U1fE3WKscDjm01gc0YEeLn0Ci1iH0Op6gDmdG7alT8-OiKkJAQmFKLckjCf64n5OspB5lAEq7s87aILOWuI6vpSMp8oXk9_kA3umt_0uBFVPQ6O8PQQACZvNgufOt_LA/s0/3.jpg[/url]' title='#Post Title' width='768'/></a>
</div>
Красная маркировка это урлы ваших фотографий.
источник: http://blogodel.com/2013/12/Ustanovka-gadzheta-slajdera-v-shapku-Blogspot-Blogger.html