2016-08-10

Textual description of firstImageUrl

Как сделать версию для печати

версия для печати
Я уже рассказывала ранее как распечатать страницу из интернета, но это была статья для интернет-серферов, сегодня же я расскажу о том, как вебмастерам сделать версию для печати своего блога, чтобы упростить жизнь ваших посетителей, которые хотели бы читать ваши статьи и в печатном виде.
Конечно, не для всех сайтов есть необходимость добавлять кнопку “Печать” и создавать упрощенную версию для печати. Особенно популярностью версии для печати пользуются на кулинарных сайтах, так как именно рецепты больше всего любят распечатывать интернет-пользователи. Версию для печати можно установить на сайты с инструкциями, в т.ч. и по использованию компьютерных программ, сайты с рефератами, картами, графиками, статистическими данными, с книгами и документами и другие.
Ранее я уже публиковала информацию как установить кнопку печать на сайт. Посмотрите различные варианты. Далее в этой статье речь пойдет не только о размещении кнопки для распечатывания веб-страницы, но и создании простой страницы для печати без лишних элементов для сайтов на wordpress и blogspot.

Как сделать версию для печати на wordpress

Это можно сделать с помощью простых плагинов:

  • WP-Print
  • Print Friendly and PDF – я рекомендую.
Установить каждый, из вышеперечисленных плагинов можно через админпанель Wordpress.  Для этого нужно воспользоваться поиском по плагинам в разделе Плагин –> Добавить новый.
Мне больше всего понравился плагин Print Friendly and PDF. В отличие от WP-Print, он не создает дублей страниц, которые бы пришлось закрыть от индексации в robots.txt. WP-Print не вырезает контекстную рекламу из тела статьи. Кроме того, плагин Print Friendly and PDF открывает версию для печати в всплывающем окне, в котором пользователь может найти удобные настройки печати.
Версия печати от Print Frienly and PDF:
Print Frienly and PDF
Вы можете не пользоваться плагинами, тогда вам нужно будет установить код кнопки “Печать”. Вы можете воспользоваться этим кодом:
<a href="#" onClick="window.print()" class="printer"></a>
Отредактировать @media print в файле style.css
Значения @media print могут принять следующий вид:
@media print { body { background: #fff none !important; color: #000; } #wrapper { clear: both !important; display: block !important; float: none !important; position: relative !important; } #header { border-bottom: 2pt solid #000; padding-bottom: 18pt; } #colophon { border-top: 2pt solid #000; } #site-title, #site-description { float: none; line-height: 1.4em; margin: 0; padding: 0; } #site-title { font-size: 13pt; } .entry-content { font-size: 14pt; line-height: 1.6em; } .entry-title { font-size: 21pt; } #access, #branding img, #respond, .comment-edit-link, .edit-link, .navigation, .page-link, .widget-area { display: none !important; } #container, #header, #footer { margin: 0; width: 100%; } #content, .one-column #content { margin: 24pt 0 0; width: 100%; } .wp-caption p { font-size: 11pt; } #site-info, #site-generator { float: none; width: auto; } #colophon { width: auto; } img#wpstats { display: none; } #site-generator a { margin: 0; padding: 0; } #entry-author-info { border: 1px solid #e7e7e7; } #main { display: inline; } .home .sticky { border: none; } }

Как сделать печатную версию блога Blogspot

В редакторе HTML шаблона блога найдите тег </head> и добавьте перед ним код вида:
<style media='print' type='text/css'>
#header-wrapper,#header,.header, #sidebar-wrapper,.sidebar, #footer-wrapper,#footer,.date-header,.comment-link,.comment-footer,#comments,#blog-pager,.feed-links, #google-ad, #backlinks-container, #navbar-iframe,.noprint {display: none;}
.post-body, .post, #content-wrapper,#main-wrapper,#main{width:100%;
font-size: 16px;}
  </style>
Теперь найдите отрезок <data:post.body/> и добавьте код (смотри ниже) после него ( в этом случае кнопка окажется в конце поста) или перед ним (кнопка печати установится сразу после заголовка). А вот и сам код:
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<span style='background: url(http://1.bp.blogspot.com/-Mb4-GV4oQWg/T3dJoGapyrI/AAAAAAAAC_Y/VcQicRYQcW0/s1600/print-icon1.png) left no-repeat; padding-left: 25px;display:inline;'><a class="noprint" href='javascript:window.print()' rel="nofollow" >Распечатать</a></span>
</b:if>
Для того, чтобы в ваших постах не публиковалась контекстная реклама, добавьте идентификатор google-ad к div, окружающим блоки рекламы. Тоже самое вы можете сделать с другими нежелательными блоками, которые не перестали отображаться после установки кодов.
Примечание. Если вы используете блок ссылок социальных сетей, в котором имеется кнопка распечатать, то у вас отпадает необходимость в первом шаге установки кнопки.

Комментариев нет :

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности