Всем читателям, доброго времени суток. Если вы пишите очень длинные тексты, разумнее будет разбить таковой на несколько страниц. И выглядит красиво, и не пугает читателя. В своё время я поделилась двумя вариантами как разделить длинное сообщение на отдельные страницы в Блоггере.

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

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

Рабочий вариант смотрим на тестовом блоге

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

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

<style>
.button-box{margin:30px 0;text-align:center;}
#page1,#page2,#page3,#page4,#page5{display:none}
#page1.current{display:block}
a.button-pager{height:30px;line-height:30px;padding:0 20px; margin:0 5px 0 0;text-align:center;background:#ddd;color:#333;cursor:pointer;display:inline-block;}
a.button-pager.current{background:#333;color:#fff;}
</style>

<div id='topcontent'></div>

<div id="page1" class="current">
Ваш контент для 1 страницы.....
</div>

<div id="page2">
Ваш контент для 2 страницы......
</div>

<div id="page3">
Ваш контент для 3 страницы......
</div>

<div id="page4">
Ваш контент для 4 страницы......
</div>

<div id="page5">
Ваш контент для 5 страницы......
</div>

<div class="button-box">
<a class="button-pager current" id="button1" href="?page1#topcontent">1</a>
<a class="button-pager" id="button2" href="?page2#topcontent">2</a>
<a class="button-pager" id="button3" href="?page3#topcontent">3</a>
<a class="button-pager" id="button4" href="?page4#topcontent">4</a>
<a class="button-pager" id="button5" href="?page5#topcontent">5</a>
</div>

<script>
//<![CDATA[
var p1=document.getElementById("page1"),p2=document.getElementById("page2"),p3=document.getElementById("page3"),p4=document.getElementById("page4"),p5=document.getElementById("page5"),b1=document.getElementById("button1"),b2=document.getElementById("button2"),b3=document.getElementById("button3"),b4=document.getElementById("button4"),b5=document.getElementById("button5");window.location.href.search("page1")>0&&(p1.style.display="block",p1.classList.add("current"),b1.classList.add("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page2")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="block",p2.classList.add("current"),b2.classList.add("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page3")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="block",p3.classList.add("current"),b3.classList.add("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page4")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="block",p4.classList.add("current"),b4.classList.add("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page5")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="block",p5.classList.add("current"),b5.classList.add("current"));
//]]>
</script>

В первом коде CSS, при необходимости измените цвет кнопок. Я их отметила.

В участках кода

<div id="page1" class="current">
Ваш контент для 1 страницы.....
</div>

пишите ваш текст.

Вставляйте обычным путём графику, картинки, цитаты или что там ещё нужно для оформления вашего поста.

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

Собственно и всё. Всем добра и до встречи.

👇

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

Введите Ваш email

Подробнее...

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

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

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

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  для входа.

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

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

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

Подробнее...