Social Icons





воскресенье, 30 апреля 2017 г.

Содержание блога - меняем код на работающий!

Недавно заметила, что на моих блогах на Blogger не работает Карта сайта. Как ее установить я писала в этой статье. Сегодня нашла другой рабочий вариант карты (содержания) блога.

Итак, давайте поменяем код скрипта.


Инструкция для тех, кто уже устанавливал Карту по первому варианту:

1) Заходим в настройки блога. Выбираем пункт Страницы >> Карта сайта >> Изменить:
2) Переходим в режим редактирования HTML. Выделяем весь старый код и удаляем:


3) Копируем вот этот код и вставляем вместо старого:
   
   ВНИМАНИЕ! Все скрипты автора Абу Фархан были заблокированы Google! Есть другой вариант карты сайта.

4) Заменяем слова адрес_блога на адрес своего блога на Blogger. Обратите внимание, что http:// уже прописано.
5) Нажимаем оранжевую кнопку Обновить.
Автор этого кода Abu Farhan. Карта сайта должна расположиться по алфавиту ярлыков.
источник

Как сделать оглавление блога (содержание) в Blogger.

Давно искал решение как сделать оглавление для блога, чтобы читатель мог увидеть что еще можно почитать на блоге. Поискал по интернету-ничего мне не подошло, надо было отдельную страницу создавать ,на которую вряд ли кто-то попрется смотреть содержание блога. Хотелось чтобы где-нибудь в правой стороне блога показывалось содержание, еще бы лучше было, если бы меню можно было прокручивать чтобы содержание не занимало много места, поскольку постов становится больше и если оставить весь список содержания блога-долищу будет загружаться, да и не красиво как-то. Нашел более менее подходящий виджет, который транслирует все заголовки из RSS. Благополучно установил, но вопрос с эстетичностью и компактностью оставался открытым. Покапался и нашел решение. Так что если кто хочет такое содержание блога как у меня или с прокруткой-читаем дальше.
Идем в Дизайн (элементы страницы), выбираем местечко для содержания блога-Добавить гаджет (HTML/JavaScript ) и вставляем такой код:

-где ВАШ БЛОГ-это адрес вашего блога. 
Если вы хотите чтобы заголовки ползли вниз, вставляем такой код:

Если вы хотите чтобы ваше содержание блога можно было прокручивать,то вставляем этот код:
Все,сохраняемся и любуемся:)

источник

суббота, 29 апреля 2017 г.

Автоматическая генерация увеличенной первой буквы поста блогспота



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

Награди свой блог ТИЦ!


Web-ip.net

Дамы и господа, леди и джентльмены, рабочие и колхозницы, просто товарищи (сетевые конечно же). Сегодня я предлагаю вам нечто, что по настоящему есть круто, создаст иллюзию вашей важности, нужности вашего блога, поднимет внутреннее ЭГО и увеличит то, что имеет недостаточный размер!

 
Даже в том случае, если вас читают три с половиной инвалида!


Итак фокус!
Хотите ТИЦ в два клика?

Легко!

Виджет похожие сообщения без миниатюр для Blogger



Для лучшей навигации и поиска необходимой информации, применяется виджет похожие сообщения без миниатюр для Blogger. С помощью ссылок похожие сообщения которые обычно размещаются под статьёй обеспечивается внутренняя перелинковка повышающая статический вес страниц, применение виджета похожие статьи без миниатюр для Blogger необходимо, в целях обеспечения удобной навигации, и SEO оптимизации Blogger.
Скрипт похожие сообщения без миниатюр выводит заголовки статей связанные общими ярлыками. В похожей статье я описал, как установить виджет похожие сообщения с миниатюрами для Blogger

Рассмотрим установку виджета похожие сообщения без миниатюр.

Перейдём в Шаблон - Изменить HTML.
Отмечаем галочкой “Расширить шаблоны виджетов”
С помощью поиска (Ctrl+F) находим строку:
 </head>

и прямо над ней вставляем код:

<!--Related Posts Scripts and Styles Start--><!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'><style type="text/css">#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}#related-posts .widget{padding-left:6px;margin-bottom:10px;}#related-posts .widget h2, #related-posts h2{font-size: 1.6em;font-weight: bold;color: black;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{color:blue;}#related-posts a:hover{color:blue;}#related-posts ul{list-style-type:none;margin:0 0 0px 0;padding:0px;text-decoration:bold;font-size:15px;text-color:#000000}#related-posts ul li{background:transparent url(https://lh6.googleusercontent.com/-2JWL1R0i0i0/TxsH-tOc_lI/AAAAAAAAENs/pgk0U-IDGsE/w10/green.png) no-repeat ; display:block; list-style-type:none; margin-bottom: 13px; padding-left: 30px; padding-top:0px;} </style> <script type='text/javascript'>
display:block;list-style-type:none;margin-bottom: 13px;padding-left: 30px;padding-top:0px;}</style><script type='text/javascript'>var relatedpoststitle="Похожие сообщения:";</script><script src='http://slivsol-pc-user.googlecode.com/files/related-posts.js' type='text/javascript'/><!--Remove--></b:if><!--Related Posts Scripts and Styles  End-->

Эта ссылка ведёт на изображение в виде зелёной галочки перед заголовком сообщения: https://lh6.googleusercontent.com/-2JWL1R0i0i0/TxsH-tOc_lI/AAAAAAAAENs/pgk0U-IDGsE/w10/green.png его вы можете заменить на своё или полностью удалить выделенную строчку если не хотите, чтобы изображение присутствовало.

В этой строке var relatedpoststitle="Похожие сообщения:"; вы можете поменять название заголовока виджета.

Дальше находим строку:
<div class='post-footer-line post-footer-line-1'>

если такой нет, то такую:
<p class='post-footer-line post-footer-line-1'> 

и сразу под строкой вставляем этот код (код не содержит скрытых сторонних ссылок) :

<!-- Related Posts Code  Start--><!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=7&quot;' type='text/javascript'/></b:if></b:loop><script type='text/javascript'>var maxresults=7;removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);</script></div><!--Remove--></b:if><!-- Related Posts Code  End -->

В строках:
var maxresults=
и
max-results=
можно настроить количество выводимых ссылок на похожие сообщения без миниатюр.
Если вы хотите, чтобы виджет выводился не только в конце каждой статьи, но и на главной странице тоже, то  удалите из кода все эти строки:
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- remove --></b:if>


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

Самое простое решение для скрытого текста - спойлера для блога на Blogger, Блогспот


rubserf.ru

В срочном порядке публикую короткий пост для себя (что бы не потерялся в "километрах" закладок!) и для вас, тех кто читает эти строки. Сегодня я наткнулся на самое простое и эффективное решение - скрыть показать текст. Без JavaScript или JQuery. Поверьте мне, проще решения я не встречал! А нашел это я на замечательном блоге:

ШПАРГАЛКА БЛОГГЕРА http://shpargalkablog.ru/ который я, особенно владельцам blogger, блоггер (blogspot, блогспот) - советую! Выглядит это так:


                     


Как вы уже наверное догадались, это скрытый - исчезнувший текст. В самом коде, то что выделено красным, вы можете поменять. Это цвет заднего фона.


А вот и сам код:

<style>
#no-div, .no { display: none; }

.no + label { /* вид CSS кнопки */
  background: #4e6473;
  padding: 9px 10px;
  border-radius: 2px;
  color: #fff;
  cursor: pointer; }

.no:checked + label { background: #e36443; }

.no:checked ~ #no-div { display: block; }
</style>

<input type="checkbox" id="raz" class="no"/><label for="raz">Ваш текст о скрытой информации - кликнуть!</label><div id="no-div"><br />
<br />исчезающий текст</div>
источник

Красивое горизонтальное меню с анимацией для Blogger


socpublic.com


menu12
Меню с анимацией для Blogger

Для того, чтобы установить это меню зайдите в панель инструментов Blogger - Дизайн. Нажмите добавить гаджет Html/JavaScript:

menu
Нажмите добавить гаджет Html/JavaScript:

И в его поле добавьте такой код:

Здесь естественно меняйте названия пунктов меню и вместо решеток вставляйте ссылки на страницы. Сохраните гаджет.

Горизонтальное меню 3D для Blogger с эффектом вращения


fastprom.net

Это меню особенно впечатляет, при наведение курсором мыши на пункт меню оно вращается, то есть переворачивается. Красота. Не забудьте проверить в демо блоге.

menu_1

3D Flip меню для блога

Для вставки в поле гаджета Html/JavaScript вот этот код:

Здесь тоже самое заменяйте пункты меню на свои и вставляйте вместо решеток ссылки на что угодно. И последнее меню будет выпадающим.

ВИДЖЕТЫ ВКОНТАКТЕ ДЛЯ BLOGGER


profitcentr.com

Всем, доброго времени суток. Сегодня хочу пробежаться с вами по виджетам, которые нам предлагает социальная сеть ВКонтакте. А именно как их применить непосредственно в наших блогах. Сложного ничего нет, достаточно всё ясно описано, как с ними работать, но вот на некоторых остановлюсь более подробно
в сообщении.

Идём по этой ссылке и сразу видим весь список виджетов.

1. Авторизация.

Предоставляет пользователям авторизоваться на Вашем ресурсе. Перед авторизацией пользователь видит свою фотографию и уже авторизованных друзей.
Заполняем предложенную форму, получаем код и вставляем его в гаджет HTML/JavaScript. Как будет выглядеть этот виджет, можно увидеть сразу внизу настроек.

2. Комментарии. Разберёмся подробнее.

В Блоггере система комментарии выглядят довольно скучно. Нет возможности вставки картинок и других примочек тоже. Раньше была возможность вставить и ссылки, и приукрасить текст. Для этого использовали скрипт NCcode. 
Увы, сейчас это не работает. Да и с добавлением смайликов тоже проблема у многих.
Думаю, что вы обращали внимание, что у некоторых блогеров установлена 2 формы создания комментариев - Блоггеровские и ВКонтакте, или ФБ.

Нажимаем комментарии и попадаем на страницу создания самой формы.


В строке cайт/приложение впишите название вашего блога. Определитесь с количеством комментариев. В строке медиа, нажмите на ссылку расширенные комментарии и выбираем то что нужно. Не думаю, что стоит разрешить добавлять видео или ауди в комментариях, но это на ваше усмотрение.

Так же поставьте или снимите галочки. В окошке ширина пока можно оставить как есть, в любом случае потом можно подредактировать. По окончании настроек будет предложен код примерно такого вида -

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?139"></script>

<script type="text/javascript">
  VK.init({apiId: 5835984, onlyWidgets: true});
</script>

<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "665", attach: "graffiti,photo,link"});
</script>

Скопируйте его пока в блокнот.


Для установки кода заходим во вкладку шаблон, но перед этим делаем обязательно резервную копию. Установка пойдёт в 2 шага.

Сначала находим в шаблоне тег </head> и перед ним устанавливаем первую чась кода, которую я отметила синим цветом. Нажмите по картинке для увеличения.


<!-- Put this script tag to the <head> of your page --> можно убрать вообще.

Далее с помощью горячих клавиш (читаем об этом статью, как найти строку в шаблоне правильно) ищем в шаблоне вот такую строчку

<b:includable id='comment_picker' var='post'>

И под ней вставляем вторую часть кода от ВК, отмеченную красным цветом. Первую пояснительную строчку
 <!-- Put this div tag to the place, where the Comments block will be --> можно убрать тоже.


Обратите внимание, что в ней я поменяла ширину на 550 под размеры своего блога и добавила перенос строк. Можно сделать и заголовок. Перед вторым куском кода вставьте такую строку -

<br/><h4>Комментировать ВКонтакте</h4><br/>

Сохраните шаблон и наслаждайтесь. Можно предупредить своих посетителей, если не хотят, чтобы комментарии отражались на вашей стене ВК. Не нужно ставить галочку в опции поделиться перед публикацией.

Смотрите здесь что получилось и протестируйте. Сразу на этой же странице обратите внимание на опросник и кнопку подписаться.

Далее посмотрите другие виджеты.

Сообщения сообщества — это быстрый способ связи с пользователями ВКонтакте прямо на Вашем сайте.

Публикация ссылок — когда пользователь ВК нажимает на эту кнопку на Вашем сайте, на его странице ВКонтакте автоматически создается заметка со ссылкой на ваш блог.

Мне нравится —  позволяет посетителям одним кликом выразить своё отношение к статье или моментально поделиться ссылкой на статью с друзьями.

Виджет для сообществ  - очень он нравится мне. Свяжет ваш блог с соответствующей группой или официальной страницей ВКонтакте. Отображает фото ваших друзей.

Схема создания их и установки аналогичная. Генерируется код, результат будет сразу виден и устанавливается в сообщении блога или в гаджете.

Можно сделать опросник и расположить его в сообщении блога. Так же создайте опрос, получите код и вставьте в тело поста, перейдя в режим HTML. Узнавайте мнения ваших посетителей.

Как встроить запись из соц. сети ВК в сообщение блога читаем здесь.

Спасибо всем за визит. Всего хорошего и до встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email



SEO Blogger - бесплатная seo оптимизация


seo-fast.ru

Команда блога Блогопоиск представляет вам для тестирования свою новую разработку — гаджет SEO Blogger (бесплатная seo оптимизация блогов на Blogger).

Одним из преимуществ блогов на WordPress перед блогами на Blogger было и пока есть — это наличие разного рода полезных плагинов. Для Blogger тоже есть официальные и авторские гаджеты, но их значительно меньше, чем плагинов для WordPress.

Идея создания онлайн—инструмента SEO Blogger принадлежит мне. Разработчик —  +Evgeny Masibut. В тестировании этого гаджета принимала участие вся команда блога Блогопоиск.

SEO Blogger и бесплатная seo оптимизация Blogger

SEO Blogger

На этой картинке вы видите результат проверки гаджетом SEO Blogger статьи по ключевому слову. Бесплатная seo оптимизация Blogger включает в себя:
1. Онлайн—проверку по ключевому слову. SEO Blogger проверит наличие ключевого слова в тегах <title>,<h1>,<h2>,<h3>,<b>,<strong> и его наличие в первом и последнем предложении статьи. 
2. Проверка ссылок. SEO Blogger проверит наличие внешних ссылок, в том числе dofollow. Для более точного определения количества внешних  dofollow ссылок, нужно в поле "Искать в тэге с id:" внести название идентификатора виджета Blog из шаблона вашего блога. Обычно это main.
3. Подсчет общего количества слов и плотности ключевых слов. 
Общая рекомендация - если  SEO Blogger говорит вам — в статье низкая плотность ключевых слов, то это не значит, что нужно их добавить столько, чтобы гаджет показал 3%. Не забывайте о том, что поисковик может наказать за переоптимизацию.
SEO Blogger - бесплатная seo оптимизация

Бесплатная seo оптимизация — установка SEO Blogger

Вам нужно войти в панель инструментов (админку) вашего блога, открыть меню "Дизайн" и добавить гаджет HTML/JS.

В этот гаджет нужно добавить код:
<script type="text/javascript">gradditSEOToolsLanguage = "rus";</script> <script type="text/javascript" src="http://static.graddit.com/js/seotools/blogger/all.js"/></script>Сохраните изменения. Откройте любую вашу статью и добавьте в окне браузера к ссылке #seo и нажмите кнопку Enter 

Совсем ленивые дяди и тёти могут к указанным выше записям добавить третью:
<a href="#seo" style="text-decoration: none; border-bottom: 1px dashed;">SEO</a>В левом верхнем углу появится ссылка "SEO". После открытия статьи для бесплатной seo оптимизации нажмите на эту ссылку и к url вашей статьи будет автоматически добавлен якорь #seo.
Любители валидных решений могут добавить в ссылку с якорем class="seo1" и заменить линейный стиль: 
style="text-decoration: none; border-bottom: 1px dashed;"

При этом в CSS нужно добавить запись:
 a.seo1 {text-decoration: none; border-bottom: 1px dashed;}
Просьба свои предложения и замечания оставлять в комментариях к этому сообщению. С запуском гаджета SEO Blogger начинается бесплатная seo оптимизация Blogger онлайн.

источник

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


seosprint.net

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


Пост (в основном) для пользователей:Blogger, Блоггер (Blogspot, Блогспот)

Из-за неоднократной и настойчивой просьбы одной читательницы, публикую установку любого гаджета в шапку Блогспот, Блоггера (в данном случае слайдера).

Кому интересно, как это будет выглядеть, вот ссылка на тестовый вариант:

К сожалению по умолчанию, Блогспот не предусматривает возможности размещения гаджета в шапке и поэтому необходимо будет произвести небольшие изменения в шаблоне.

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(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center;
display:inline-block;
height:14px;
width:14px;
text-indent:-9999px;
cursor:pointer;
}
.nivo-controlNav .active{
background:transparent url(http://project.dimpost.com/image-slider/images/button_active.png);
}
</style>
<script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js" 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="http://dimpost.com/" target="_blank"><img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a>
<a href="#" target="_blank"><img alt="" title="#caption2" src="http://project.dimpost.com/image-slider/images/sample1.jpg" /></a>
<a href="#" target="_blank"><img alt="" title="#caption3" src="http://project.dimpost.com/image-slider/images/sample2.jpg" /></a>
<a href="#" target="_blank"><img alt="" title="#caption4" src="http://project.dimpost.com/image-slider/images/sample3.jpg" /></a>
<a href="#" target="_blank"><img alt="" title="#caption5" src="http://project.dimpost.com/image-slider/images/sample4.jpg" /></a>
<a href="#" target="_blank"><img alt="" title="#caption6" src="http://project.dimpost.com/image-slider/images/sample5.jpg" /></a>
</div>
</div>
</div>

И еще один скрипт


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' 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(http://1.bp.blogspot.com/-gobsiOEHHqI/ThJzEkIvFMI/AAAAAAAABGI/I_B9dOH0C1s/s000/arrows.png) 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
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * 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='http://vallek.ru/wp-content/uploads/2013/06/anhel_1.jpg' title='#Post Title' width='768'/></a>
<a href='#'><img alt='#Post Title' class='nivim' height='300' src='http://3.bp.blogspot.com/-CIhF9lTm40Y/ThJzFstyiRI/AAAAAAAABGU/TE9Xp-vMCmk/s000/1.jpg' title='#Post Title' width='768'/></a>
<a href='#'><img alt='#Post Title' class='nivim' height='300' src='http://4.bp.blogspot.com/-g3_LtU7x7Sk/ThJzF-vMkeI/AAAAAAAABGY/JgrcpY0ZDh4/s000/3.jpg' title='#Post Title' width='768'/></a>
</div>

Красная маркировка это урлы ваших фотографий.
Даю так же, адреса для обработки изображений:
http://radikal.cc/
http://pixlr.com/express/

источник



Друзья! Вы можете поддержать сайт материально!

 

Реклама:

РЕКЛАМА:




Место Вашей рекламы!

Добавляйтесь ЗДЕСЬ





SEO sprint - Всё для максимальной раскрутки!

















Информация:




Вы можете получить WMR-бонус в размере 0.01-0.02 WMR на свой кошелек 1 раз в сутки

Кошелек
Код Защитный код

Сейчас на сайте:







 
Blogger Templates Генератор ТИЦ