Кнопка Print для блога

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

Может кому-то это и не нужно. А с другой стороны я сама иногда, если такое на сайте есть, пользуюсь.

О том, как установить значок Print у себя в блоге и поговорим сегодня. Посмотрите у меня в конце сообщения слева как это выглядит.  Делается это достаточно просто. Для начала перейдём во вкладку шаблон и сделаем резервное копирование. С помощью клавиш Ctrl+F ищем строчку <div class='post-footer'>. Кто пока не знает, как это делается, прочитайте статью стили CSS в шаблоне блога.

И сразу над ней вставьте вот такой небольшой код-

<div style="float: left; padding-left: 10px;"> <a href="javascript:window.print ()" rel="nofollow"><img src="https://sites.google.com/site/moaspargalocka/ssylki/button-print.png " /></a></div>

Просмотрите шаблон и если всё устраивает, сохраняем. Заходим на страницу сообщения, где значок" распечатать" находится на месте. В этом коде можете поменять при желании left на right-право, center-центр.  10px-расстояние от края. А остальное просто копируйте и вставляйте. Выделенное синим- путь к изображению. Можете заменить  на своё. 

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

 

<div style="float: left; padding-left: 10px;">

<a href="javascript:window.print ()" rel="nofollow"><img src="https://sites.google.com/site/moaspargalocka/ssylki/print_button.gif

 " /></a></div>

<div style="float: left; padding-left: 10px;">

<a href="javascript:window.print ()" rel="nofollow"><img src="https://sites.google.com/site/moaspargalocka/ssylki/print.png " /></a></div>

<div style="float: left; padding-left: 10px;">

<a href="javascript:window.print ()" rel="nofollow"><img src=" https://sites.google.com/site/moaspargalocka/ssylki/images.jpg" /></a></div>

<div style="float: left; padding-left: 10px;">

<a href="javascript:window.print ()" rel="nofollow"><img src="https://sites.google.com/site/moaspargalocka/ssylki/button-print.png " /></a></div>

Если всё правильно установили сразу и попробуйте как это работает. Должно работать. У себя я проверила. А захотите сделать кнопку прокрутки страницы вверх, то этот пост для вас. Вот пока и всё. До новых встреч.

Удачи всем нам.

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :