Динамический слайдер - лучший способ отображать на вашем сайте несколько изображений, видео или графику.

динамический слайдер

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

В чём особенности такого слайдера избранных постов 

1. Он отображает картинку превью во всю ширину слайда.
2. Активная ссылка на статью.
3. Количество опубликованных комментариев к данной статье.
4. Имя автора и дата публикации сообщения.
5. Стрелки навигации с увеличением картинки при наведении.
6. Возможность добавления дополнительных слайдов.


Посмотрите на тестовом блоге его в работе


Если хочется установить у себя в блоге такое, перейдём к установке.

Шаг 1. Перейдите в Blogger > Вкладка Тема, сделайте резервную копию шаблона.

Нажмите « Редактировать HTML ». Найдите тег <head> и сразу под ним установите следующие исходные ссылки JS.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/>

<script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'></script>


Внимание - если у вас в шаблоне уже есть ссылки JQuery, FontAwesome, FlexSlider или Oswald исключите их из списка

Шаг 2. Там же в шаблоне находим ]]></b:skin> и над ней устанавливаем следующий код

.mbt-s{margin:0 5px;border:0;width:100%;overflow:hidden}

.mbt-s .slides{list-style-type:none;margin:0 auto;padding:0}

.mbt-s li{color:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px}

.mbt-s .flex-control-nav li{display:inline-block;margin:0 2px}

.mbt-s .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important}

.flex-direction-nav .flex-prev{left:-50px}

.flex-direction-nav .flex-next{right:-50px;text-align:right}

.mbt-s .flex-control-paging{display:none}

.flex-direction-nav{position:relative;top:-250px}

.mbt-s .flex-control-nav a.flex-active{background-color:#84db06;border:1px solid #90f128}

.mbt-s .flex-div{margin:0 auto;display:block;padding:0!important;position:relative;height:370px}

.mbt-s li a{color:#0080ff;text-decoration:none}

.mbt-s i{color:#999;padding-right:5px}

.mbt-s .iline{line-height:2em;margin:0;position:relative;top:-87px;background:#31363a;padding:3px 10px;display:inline-block}

.mbt-s .icontent{line-height:1.5em;margin-top:5px}

.mbt-s div span{margin:0 5px 0 0;display:inline-block;font-weight:400}

.mbt-s .mbttitle{font-family:oswald;font-size:20px;color:#ff0;font-weight:400;text-decoration:none;position:relative;top:-90px;background:#222;padding:15px 10px;display:block}

.mbt-s .mbttitle:hover,.mbt-s .itotal a:hover{color:#fff;text-decoration:none}

.mbt-s .iedit a{text-decoration:none;color:#999;cursor:pointer}

.mbt-s .iedit:before,.mbt-s .iauthor:before,.mbt-s .itag:before,.mbt-s .icomments:before,.mbt-s .idate:before,.mbt-s .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}

.mbt-s .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}

.mbt-s .iFeatured{overflow:hidden;position:relative;margin:0;padding:0;width:100%}

.mbt-s .iFeatured a{background:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px}

.mbt-s .iFeatured img{height:305px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:0;margin:0;padding:0;opacity:.7}

.mbt-s .iFeatured:hover img{opacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}

.mbt-s .icomments a{color:#0080ff;font-family:arial;font-size:12px}

.mbt-s .icomments a:hover{text-decoration:underline}

.mbt-s .icomments:before{content:'\f086';padding:0 3px 0 7px;color:#fff}

.mbt-s .idate{color: #ff0;padding: 9px 10px;font-family: Oswald;

    font-size: 12px;position: relative;top: -290px; left:-190px; 

    background: #222;width: 23px;text-align: center;line-height: 1.8em;}

.mbt-s .idate b{font-size:17px;}



Подредактируйте стили на ваше усмотрение.

Можно изменить цвет черного фона у  названия статьи и даты публикации: #222
Изменить желтый цвет шрифта названия слайда и даты: # ff0
Изменить цвет ссылки для комментариев : # 0080ff

Возможно, придётся поиграться с расположением даты публикации top: -290px; left:-190px; 

Теперь сохраните шаблон.

Шаг 3. В админке блога выбираем Дизайн - Добавить гаджет HTML/JavaScript.

Скопируйте приведённый ниже код себе в блокнот и установите свои избранные сообщения, которые хотите отобразить.

<script type="text/javascript">

$(window).load(function() {

  $('.mbt-s').flexslider({

animation: "slide",itemWidth: 600,itemMargin: 25,directionNav: true,touch: true,slideshowSpeed: 2500,pauseOnHover: true,animationSpeed: 700,});});

</script>

<div class="flexslider mbt-s">

<ul class="slides">

<!-- SLIDE 1 -->

<li>

<div class="flex-div">

<div class="iFeatured">

<a href="адрес страницы"><img src="адрес отображаемой картинки" /></a></div>

<div class="iline"><span class="iauthor"><img class="адрес фото автора" />имя автора</span><span class="icomments"><a href="#comment-form">всего комментариев</a></span> </div><span class="idate">месяц публикации<b>дата</b></span><a class="mbttitle" href="адрес страницы" target="_blank">название поста</a>

</div>

</li>

<!-- SLIDE 2 -->

<li>

<div class="flex-div">

<div class="iFeatured">

<a href="адрес страницы"><img src="адрес отображаемой картинки" /></a></div>

<div class="iline"><span class="iauthor"><img class="адрес фото автора" />имя автора</span><span class="icomments"><a href="#comment-form">всего комментариев</a></span> </div><span class="idate">месяц публикации<b>дата</b></span><a class="mbttitle" href="адрес страницы" target="_blank">название поста</a>

</div>

</li>

<!-- SLIDE 3 -->

<li>

<div class="flex-div">

<div class="iFeatured">

<a href="адрес страницы"><img src="адрес отображаемой картинки" /></a></div>

<div class="iline"><span class="iauthor"><img class="адрес фото автора" />имя автора</span><span class="icomments"><a href="#comment-form">всего комментариев</a></span> </div><span class="idate">месяц публикации<b>дата</b></span><a class="mbttitle" href="адрес страницы" target="_blank">название поста</a>

</div>

</li>

</ul></div>

Замените -

"адрес страницыукажите адрес страницы вашего поста


адрес отображаемой картинки - адрес картинки

адрес фото автора - URL адрес картинки профиля (аватора). Посмотрите в своём профиле Гугл+ миниатюру и скопируйте адрес изображения

имя автора  - имя автора поста

всего комментариев - здесь пишем, к примеру, 10 комментариев. Количество опубликованных комментариев

месяц публикации -месяц публикации и дату

адрес страницы - ещё раз адрес страницы

название поста  - название поста


Код представлен для отображения трёх слайдов. Чтобы добавить ещё вставляйте дополнительно участок

<li>
<div class="flex-div">
<div class="iFeatured">
<a href="адрес страницы"><img src="адрес отображаемой картинки" /></a></div>
<div class="iline"><span class="iauthor"><img class="адрес фото автора" />имя автора</span><span class="icomments"><a href="#comment-form">всего комментариев</a></span> </div><span class="idate">месяц публикации<b>дата</b></span><a class="mbttitle" href="адрес страницы" target="_blank">название поста</a>
</div>
</li>


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


Всем спасибо за визит и до встречи

👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


Привет, друзья. Не думала, что придётся писать пост на тему воровства контента, но вот столкнулась с такой ситуацией, когда увидела свои статьи на нескольких чужих блогах, скопированные просто от начала и до конца, да ещё и со всеми картинками и, естественно ссылками на тестовые и другие блоги.

Привет, друзья. Предлагаю вам вариант автоматической прокрутки с кнопкой стоп. Раньше я уже писала пост про такую кнопку прокрутки, но его пришлось удалить, так как тот код "приказал долго жить". И посему предлагаю вам альтернативный вариант.

кнопка прокрутки

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

Вот именно для такого случая, вернее для ленивых читателей, предлагаю вариант оригинальной кнопки.

Взгляните на неё на тестовом блоге справа.


Демонстрация

Устанавливается код в гаджет HTML/JavaScript в любом месте макета блога.

Код

<style>#abt-scroll{position:fixed;z-index:9999;bottom:0;left:10px;top:380px!important;}
#abt-scroll a{display:block;float:left;width:32px;height:32px;text-indent:-999em; padding: 3px!important;}
#abt-scroll a.abt-scroll{font-family:FontAwesome;border-radius:50%;}
#abt-scroll a.abt-stop{font-family:FontAwesome;margin-left:2px;border-radius:50%;}
#abt-scroll a.abt-stop{background: url("https://3.bp.blogspot.com/-y7CTiiR2aBU/Wcu4H7AkmtI/AAAAAAAACwM/8mmry5ttOPgCOwJIKIpNM2n_ZyIr95ZngCLcBGAs/s1600/pause.png");}
  #abt-scroll a.abt-scroll{width:33px;height:33px;!important;}
 #abt-scroll a.abt-stop{width:34px;height:34px;}
#abt-scroll a.abt-scroll{background: url("https://1.bp.blogspot.com/-gpimEvetJGo/Wcu2gRFCkiI/AAAAAAAACwA/KIlNSQEG8t0JCw7nwC0cjChy8huaE_TdACLcBGAs/s1600/play.png");}</style>

<script type='text/javascript'>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout(&#39;autoScroll()&#39;,60)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='abt-scroll'>
<a class='abt-scroll' href='javascript:autoScroll();' rel='nofollow' title='Play'>Play</a>
<a class='abt-stop' href='javascript:stopScroll();' rel='nofollow' title='Pause'>Пауза</a>
</div>


Вы можете изменить скорость прокрутки - 60. Размеры кнопок, отмеченных розовым цветом. Сами иконки кнопок.

Вот и всё. Всем добра и спасибо за визит.

👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


Привет, друзья. К сожалению в BLOGGER нет возможности защитить какую - то конкретную страницу паролем. Либо мы должны сделать блог вообще частным, либо добавить пароль для всего блога. Вы наверняка видели на многих сайтах, что при входе на определённую страницу, появляется диалоговое окно с предупреждением ввести пароль, для просмотра.

пароль для страницы Блоггер


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

Давайте рассмотрим в каких случаях это может пригодиться. Допустим, у вас есть какой - то материал и вы хотите поделиться им, назовём так, со своими VIP - подписчиками или только членами семьи. Или вы пишите книгу и не хотите всем пользователям дать доступ к ней, а только избранным читателям.

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

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

Чтобы закрыть определённую страницу от посторонних глаз в Блоггере, будем использовать совсем небольшой Java/Sсript.

Для начала создаём нужную страницу, даём ей название, заполняем нужной информацией. Затем переходим в редакторе в режим HTML и в самом конце устанавливаем следующий скрипт

<script type="text/javascript">
var password = 'ваш пароль'
password=prompt('Пожалуйста, введите пароль для входа на страницу:','');
if (password != 'ваш пароль') {
location.href='адрес защищённой страницы';
}
</script>


Соответственно, 2 раза введите ваш пароль, URL - адрес вашей страницы. Сейчас смело публикуйте свою "секретную страницу". Перейдите на неё и убедитесь, что для доступа к ней требуется пароль.


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

И наконец по секрету всему свету выкладываю пароль, чтобы вы могли наглядно видеть, как это работает. Перейдите на эту страницу и введите пароль shpargalochki  для входа.

Возможно вас заинтересует

как закрыть блог на технические работы
как не показывать сообщение на главной странице

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

В html ссылка выглядит как <a href="www.shpargalochki.ru/">шпаргалки блогерши</a>, где тег <a> используется для включения ссылки внутри href = "", а текст ссылки помещается между тегом <a>.

Пример ссылки вы можете увидеть в конце поста.

Если хотите оформить все ссылки в виде анимированной кнопки, то в разделе Тема Blogger добавьте перед ]]> </ b: skin> следующий код


.btn{background:#c10707;border:1px solid #c10707 ;padding:3px;color:white !important;border-radius:6px;}.btn:hover{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);background:#ff0000;text-decoration:none;}


Теперь при написании сообщения, в том месте где нужно выделить ссылку прописываем такой код в режиме HTML

<a class="btn" href="www.shpargalochki.ru/">шпаргалки блогерши</a>

Что можно изменить под ваш дизайн

background:#c10707;- цвет фона кнопки
border:1px solid #c10707 ; - ширина и цвет рамки
btn:hover{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);- стили тени.

Таблица цветов здесь.

Если не часто применять кнопку - ссылку в блоге можно заключить код CSS в теги STYLE  и уже в редакторе сообщений, так же в режиме HTML, вставить полный код такого вида

<style>.btn{background:#3CB371;border:1px solid #BDB76B ;padding:3px;color:white !important;border-radius:6px;}.btn:hover{box-shadow: 0 8px 16px 0 rgba(174, 212, 194, 1), 0 6px 20px 0 rgba(174, 212, 194, 1);background:#556B2F;text-decoration:none;}</style>
<a class="btn" href="https://draft.blogger.com/www.shpargalochki.ru/">шпаргалки блогерши</a>

<a class="btn" href="www.shpargalochki.ru/">шпаргалки блогерши</a>


Посмотрите, что в итоге получается

шпаргалки блогерши

Удачи всем и до встречи.


👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


Пользовательский поиск
Foto Saya
My Photo