2015-05-27

Textual description of firstImageUrl

Как разбить длинную запись блога на страницы

разбить запись блога на страницы
Длинные посты удобно разбивать на страницы – облегчается чтение и не приходиться до бесконечности скролить страницу. Сегодня вы узнаете, как разбить записи блога на страницы в Blogger и Wordpress.

Как разделить длинное сообщение блога Blogger на страницы


  1. Идем в редактор html блога
    редактор html блога
    Найдите отрезок кода </head> и вставьте перед ним jquery-код:

    <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>
  2. Создаем сообщение блога. В редакторе html записи блога, оно будет иметь следующую структуру: 
    <span class="content1">
    Первая часть длинной записи (первая страница)
    </span>
    <span class="content2" style="display:none">
    Вторая часть сообщения (вторая страница)</span>
    <span class="content3" style="display:none">
    Контент третьей страницы
    </span>
    <span class="content4" style="display:none">
    Четвертая страница текста
    </span>
    страницы записи
  3. Осталось лишь добавить постраничную навигацию в конце записи. В том же html режиме сообщения блога в конце записи добавляем код:
    <p><a class="page5" href="#"> Страницы: </a>
    <a href="#" class="page1">1</a>
    <a href="#" class="page2">2</a>
    <a href="#" class="page3">3</a>
    <a href="#" class="page4">4</a></p>

    У вас получится простая нумерация страниц.
  4. Если вы хотите придать навигации более красивый вид, то вы можете добавить стили css в шаблон блога. Пример:
    нумерации сообщения блога
    В редакторе шаблона блога найдите отрезок кода ]]></b:skin> и добавьте код перед ним:
    .page1, .page2, .page3, .page4 {
    background: #eee;
    border: 1px solid #ccc;
    padding: 5px;
    }
    .page5 {
    background: #eee;
    border: 1px solid #ccc;
    padding: 5px;
    margin: 4px;
    }

Как разбить запись wordpress на страницы

Для разбивки записи wordpress на отдельные страницы нужно воспользоваться кодом <!—nextpage—> , который добавляем в режиме “текст” сообщения блога wordpress. Если после обновления записи постраничная разбивка не появилась, значит нужно править файл single.php – в этот файл нужно добавить код <?php wp_link_pages(); ?> . Этот код нужно добавить перед кодом, вызывающим комментарии - <?php comments_template(); ?> .
Читать далее ...

2015-05-10

Textual description of firstImageUrl

Popup окно для сайта на blogger

pop-ap на blogger
Всем известно, что поисковики не любят рекламу типа pop-ap на сайтах, но если вам необходимо сделать попап, то сведения из этой статьи вам пригодятся. Вы можете добавить pop-ap в рекламных целях, договориться с рекламодателем о цене размещения попап окна на вашем блоге,
Читать далее ...

2015-05-05

Textual description of firstImageUrl

Виджет социальных сетей

социальные закладкиЭтот стильный виджет закладок отлично впишется в дизайн блога и не займет много рабочего пространства.
Шаг 1 В стартовой панели инструментов Blogger из выпадающего меню вашего блога выберите > Шаблон. Нажмите на кнопку "Изменить HTML". Теперь вы можете приступить к редактированию шаблона. Если вам непонятен первый шаг по установке виджета, то вы можете просмотреть короткое видео.


Шаг 2. Найдите следующий фрагмент кода в блогах сайтов: (Нажмите Ctrl и F, чтобы быстро найти код)

</HEAD>

Шаг 3. Скопируйте и вставьте следующий код перед тегом </HEAD>
<script src='https://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='https://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='https://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Шаг 4. Найдите следующий фрагмент кода:
</Body>

Шаг 5. Теперь скопируйте и вставьте этот код перед </body>
<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script>

Важная деталь - изменение положения виджета социальных закладок:
гаджет в настоящее время установлен в правом нижнем углу вашего блога, но вы можете легко изменить его положение. Для этого вам нужно изменить отрезок кода, отмеченный желтым цветом – bottom (положение от нижней границы страницы): 2%; left (расстояние от левого края): 2%. Чем больший процент вы поставите, тем выше или правее вы определите положение виджета социальных закладок.
Шаг 6. Сохраните шаблон.

Если вам понравилась статья, то вы можете поделиться ею с помощью социальных закладок.
Читать далее ...