оформление статьи
Привет, друзья. Сегодня решила обойтись без кодов и скриптов. Просто хочу поговорить с вами и немного порассуждать на тему 
Как правильно оформить статью в блоге?
От оформления контента на блоге зависит, захотят ли наши посетители его читать и зайти ещё раз. Иногда кажется, что какую классную статью я написал, читателя за уши не оттащить.
баннер
Всем, доброго времени суток. Хочу вам предложить код с помощью которого можно оригинально оформить картинку или баннер, когда при  наведении курсора на неё появляться заголовок с кратким анонсом и прямой ссылкой на страницу.
Всем, доброго времени суток. Сегодня у меня шпаргалка как сделать появляющееся окно в нижней части блога с нужными ссылками. Окно будет появляться при прокрутке страницы в правом нижнем углу. В качестве примера я взяла ссылки на последние сообщения
шпаргалки блогерши
Привет, друзья. Небольшой код, с помощью которого можно визуально скрыть счётчики или любой другой элемент в блоге . Так или иначе для отслеживания статистики мы устанавливаем различные счётчики. Чаще всего это Google Analytics, liveinternet, Яндекс Метрика и другие.
Как при помощи CSS сделать вращение картинки. Часто такой эффект используют для придания оригинальности каких - то кнопок, которые при наведении курсора начинают крутится. Можно применить его абсолютно к любому изображению. А ещё, если прописать к этим картинкам ссылку на нужную страницу, у нас получится вполне своеобразная картинка - ссылка.

Предлагаю вам 3 варианта вращающихся картинок. Выбирайте на свой вкус, что кому нужно.

Поворот на 360 градусов.



<style>
div#rotateimg360 img {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
div#rotateimg360 img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<div id="rotateimg360">
<a href="http://www.shpargalochki.ru/p/blog-page_1.html">
<img src="https://img-fotki.yandex.ru/get/9503/36014149.249/0_8ea6d_40f3210c_S
" /></a>
<a href="http://www.shpargalochki.ru/p/blog-page_34.html">
<img src="https://img-fotki.yandex.ru/get/9511/36014149.248/0_8ea14_c6e0a126_S
" /></a>
</div>


Поворот на 180 градусов.



<style>
div#rotateimg180 img {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
div#rotateimg180 img:hover {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
<div id="rotateimg180">
<a href="http://www.shpargalochki.ru/p/blog-page_1.html">
<img src="https://img-fotki.yandex.ru/get/9503/36014149.249/0_8ea6d_40f3210c_S
" /></a>
<a href="http://www.shpargalochki.ru/p/blog-page_34.html">
<img src="https://img-fotki.yandex.ru/get/9511/36014149.248/0_8ea14_c6e0a126_S" /></a>
</div>


Поворот на 90 градусов.



<style>
div#rotateimg90 img {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
div#rotateimg90 img:hover {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
<div id="rotateimg90">
<a href="http://www.shpargalochki.ru/p/blog-page_1.html">
<img src="https://img-fotki.yandex.ru/get/9503/36014149.249/0_8ea6d_40f3210c_S
" /></a>
<a href="http://www.shpargalochki.ru/p/blog-page_34.html">
<img src="https://img-fotki.yandex.ru/get/9511/36014149.248/0_8ea14_c6e0a126_S" /></a>
</div>


Синим цветом я отметила адреса страниц, куда будет вести ссылка. И красным - адрес самого изображения. Если не хотите чтобы картинка была кликабельная, пишите просто путь к изображению. Вот так.

<div id="rotateimg90">
<img src="http://agitki.ru/_bl/1/04066477.png" /></div>


Размеры изображения могут быть абсолютно любые. Вставляйте выбранный код непосредственно в редакторе блога в режиме HTML в нужном месте. Или оформляйте свои кнопки социальных сетей и другие картинки в гаджете HTML.

Ещё красивые эффекты для изображений.

Вот сегодня и всё. Всем спасибо. Увидимся.


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

Введите Ваш email


Пользовательский поиск