Вкусы у людей разные, кого - то устраивает длинный текст и при этом нисколько не напрягает восприятие информации. Кому - то, наоборот, легче читать, когда длинное сообщение разбито на отдельные страницы. Если решили, что вам это нужно, тогда давайте начнём по порядку. Как это работает (оба варианта) посмотрите на тестовом сразу под слайдером.
Вариант 1.
Сначала копируйте следующий код. Затем идём в редактор сообщений и открываем режим HTML. Для начинающих блогеров хотела бы посоветовать сразу в этот код вставить ваш текст вместо строк, отмеченных розовым цветом.
<div class="content_1">
Ваш текст
</div>
<div class="content_2" style="display: none;">
Ваш текст
</div>
<div class="content_3" style="display: none;">
Ваш текст
</div>
<div class="content_4" style="display: none;">
Ваш текст
</div>
Это код самой панели навигации. Устанавливаем его сразу под первым.Ваш текст
</div>
<div class="content_2" style="display: none;">
Ваш текст
</div>
<div class="content_3" style="display: none;">
Ваш текст
</div>
<div class="content_4" style="display: none;">
Ваш текст
</div>
<p><b>Страницы: <span style="color: #3d85c6;">
<a href="#" class="page1">1</a>
<a href="#" class="page2">2</a>
<a href="#" class="page3">3</a>
<a href="#" class="page4">4</a></span></b></p>
В редакторе это так должно выглядеть.<a href="#" class="page1">1</a>
<a href="#" class="page2">2</a>
<a href="#" class="page3">3</a>
<a href="#" class="page4">4</a></span></b></p>
И вот на этом моменте, я должна заострить ваше внимание. В первую очередь нужно проверить подключён ли у вас скрипт библиотеки jQuery. Это легко узнать в шаблоне блога. Читаем здесь. Если такой нет, то скопируйте следующий код и установите его после тега <head>.
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
Сохраните шаблон.
Чтобы ссылки были активными - ниже второго кода вставляем следующий.
<script style="text/javascript">
jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery('.content1').show();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});
jQuery('.page2').click(function(){
jQuery('.content1').hide();
jQuery('.content2').show();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});
jQuery('.page3').click(function(){
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').show();
jQuery('.content4').hide();
return false;
});
jQuery('.page4').click(function(){
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').show();
return false;
});
});
</script>
jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery('.content1').show();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});
jQuery('.page2').click(function(){
jQuery('.content1').hide();
jQuery('.content2').show();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});
jQuery('.page3').click(function(){
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').show();
jQuery('.content4').hide();
return false;
});
jQuery('.page4').click(function(){
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').show();
return false;
});
});
</script>
И опять ещё один важный момент. Ни в коем случае, после установки последнего не переходите в обычный режим в редакторе сообщений и не пользуйтесь функцией просмотр. Код сломается и результата не будет. Поэтому оформляйте сообщение, как обычно - указывайте ярлык, заголовок, постоянную ссылку и всё прочее. Можно даже опубликовать, а потом перейти в режим редактирования, установить последний код и обновить. У меня этот вариант на двух блогах не прошёл. Выдавало предупреждение. В связи с, последними нововведениями в Блоггере - изменены настройки HTTPS.
Вариант 2. Те же самые важные моменты при установке кодов и публикации сообщения. Этот вариант прошёл без капризов на всех тестовых блогах.
Принцип установки практически тот же самый. Копируйте предложенные ниже коды и устанавливайте в редакторе сообщения вышеописанным способом.
1. Сначала стили CSS.
Также проверьте наличие библиотеки jQuery в шаблоне. Если нет добавьте перед закрывающим тегом </head> скрипт -
Если вам таким образом сложновато разбивать сообщение, можно сделать немного по - другому. Зайти во вкладку шаблон. Найти тег <body> и сразу под ним установить 1 код ( стили CSS) и под ним - последний 4 код (Код javascript). Сохраните шаблон.
Затем в редакторе сообщения в режиме HTML остаётся только добавить второй и 3 коды. И публиковать сообщение.
Здесь с установкой сложного ничего нет. Просто поймите весь порядок и чуть - чуть внимания. Можете сначала экспериментировать на своих тестовых блогах. Если что непонятно, задавайте вопросы в комментариях.
О том как разбить длинное сообщение на страницы есть много информации на англоязычных блогах. Идею же этих вариантов почерпнула из этих источников.
Вариант 2. Те же самые важные моменты при установке кодов и публикации сообщения. Этот вариант прошёл без капризов на всех тестовых блогах.
Принцип установки практически тот же самый. Копируйте предложенные ниже коды и устанавливайте в редакторе сообщения вышеописанным способом.
1. Сначала стили CSS.
<style>
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
</style>
2. Затем ваш текст, разбитый на участки..post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
</style>
<div class="content_1">
Здесь ваш контент
</div>
<div class="content_2" style="display: none;">
Здесь ваш контент
</div>
<div class="content_3" style="display: none;">
Здесь ваш контент
</div>
3. Код самой панели навигации.Здесь ваш контент
</div>
<div class="content_2" style="display: none;">
Здесь ваш контент
</div>
<div class="content_3" style="display: none;">
Здесь ваш контент
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>
4. Код javascript.<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
Также проверьте наличие библиотеки jQuery в шаблоне. Если нет добавьте перед закрывающим тегом </head> скрипт -
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Если вам таким образом сложновато разбивать сообщение, можно сделать немного по - другому. Зайти во вкладку шаблон. Найти тег <body> и сразу под ним установить 1 код ( стили CSS) и под ним - последний 4 код (Код javascript). Сохраните шаблон.
Затем в редакторе сообщения в режиме HTML остаётся только добавить второй и 3 коды. И публиковать сообщение.
Здесь с установкой сложного ничего нет. Просто поймите весь порядок и чуть - чуть внимания. Можете сначала экспериментировать на своих тестовых блогах. Если что непонятно, задавайте вопросы в комментариях.
О том как разбить длинное сообщение на страницы есть много информации на англоязычных блогах. Идею же этих вариантов почерпнула из этих источников.
http://www.triposoft.com
http://clickto2download.blogspot.ru
И в сегодняшней шпаргалке ставлю точку. Всем удачи и до новых встреч.
здесь можно оформить подписку на новые шпаргалки
Ух, ты, как интересно! Вика, к Вам нельзя заходить, потому что начинаются чесаться руки и все время хочется что-нибудь вставить, изменить...
ОтветитьУдалитьИрина, спасибо, дорогая моя читательница. Если бы вы только знали, когда я начинала блог осваивать на Блоггере-запорола его . Я писала об этом. А потом мозги включила ... Тут надо и лаконично и аккуратно. Понимание пришло потом. Спасибо!
УдалитьДа, очень интересно и, в принципе, не сложно сделать по твоему описанию. Мой блог в последнее время начинает разваливаться, просто боюсь уже что-то в него добавлять. А так хочется иной раз, тоже от твоих постов вдохновляюсь)
ОтветитьУдалитьВика, ты пишешь "В связи с, последними нововведениями в Блоггере - изменены настройки HTTPS".НЕ знаю, с этим лит связано, но у меня перестали работать похожие сообщения. А еще в редакторе выскакивают разные предупреждения про ошибку. К примеру, про вполне безобидный код картинки, что я добавляла в конце каждого поста. Но это я так, для примера. Конкретный вопрос к тебе: нужно ли нам в своих блогах что-то особенное предпринимать в связи с последними общими изменениями самого сервиса? Например, в настройках. Там есть вкл./выкл. этот самый HTTPS..
Наташа, да с этим подключением многие гаджеты полетели. Сейчас ведь уже блоги на родных доменах все автоматом подключили. Во всех кодах раньше было прописано так HTTP... А сейчас блоггер сделал HTTPS из-за этого и идёт белиберда.
УдалитьВот здесь справка, где всё вроде понятно https://support.google.com/blogger/answer/6284029?p=blog_security_https&rd=1
А вот так можно сделать смешанный контент https://support.google.com/blogger/answer/6286127
Вика, спасибо! Посмотрела по ссылкам. Прочитала там, большей части вообще не поняла. И подумала, вот на кой они это все сделали? Не иначе, что бы народу не скучать..
УдалитьЕще не пойму, зачем они предлагают включать в настройках этот HTTPS, если и так уже всех на него перевели.
Наташа, им виднее. HTTPS считается более безопасным. Перевели они , ага. но хитро написано-можете отключить, но тогда может не корректно работать шаблон. Хитро, да. С Гугл не соскучишься.
УдалитьТого, кто придумал это подключение, следует пороть на конюшне, причем с трансляцией в интернет. Чтобы другим неповадно было.
ОтветитьУдалитьСкрипт хороший, только на вид страшный гемморой если надо увеличить или уменьшить число кнопок.
Алексей Васильев, да особо не должен напрягать. Копируй, да вставляй. Но нудный это да. Я вот только думаю, зачем вообще стоит писать такие длиннющие посты. Это какоё-же захватывающий текст должен быть. Вот где гемморой будет для читателя. Спасибо за отзыв.
Удалить