Весьма полезные, и не очень, интересные фишки для блога. При создании блога порой хочется добавить изюминку и иметь свой неповторимый дизайн страниц.Добавление различных креативных фишек может добавить стиль блогу и вызвать интерес у читателей.Как сделать свои страницы более привлекательными и куда и что необходимо будет вставить можно будет посмотреть дальше
Как вставить фишку?
Для простых развлекательных блогов добавление различных новинок и фишек вещь необходимая.И если для вас блог является потенциальным источником дохода,то вызвав интерес у посетителей к определённому и неизвестному ранее гаджету можно с большей долей вероятности надеяться на то,что и другие элементы контента,размещённые на странице не останутся без должного внимания.Так же при обзоре тем недвусмысленной тематики возникает необходимость разместить изображение интимного характера,но общий дизайн и порядочность не позволяют автору разместить фото на странице.Хотя он понимает,что миниатюра обязательно привлечёт чьё-то внимание и наверняка будет осуществлён переход по ссылке,что изначально и планировалось при создании страницы блога. Рассматривая различные исходники и примеры использования CSS меня заинтересовал пример простого меню,ни как самостоятельное использование,а сам принцип работы.Поковырявшись в коде и поменяв и добавив некоторые переменные у меня получился такая незамысловатая фишка,которая способна украсить блог и скрыть нежелательные фотоэлементы со страницы,тем не менее сохранив возможность добавления ссылки к изображению.В результате появился на свет вот такой гаджет,способный одновременно украсить страницу и придать ей функциональность и наполненность. |
|
Установка кода гаджета 18+.
Установка кода для отображения гаджета расположенного выше стандартна и незамысловата.Первая часть-это CSS код,который можно будет установить или в шаблон,для многократного использования,или же непосредственно в тело поста,где нибудь в самом конце при однократном применении.Вторая часть кода HTML,который после соответствующих настроек и изменений нужно будет вставить в то место на странице,где именно будет размещён сам гаджет .Заполните все поля в соответствии с подписанными параметрами и разместите у себя на странице в результате у вас должна появиться новая фишка,которая я думаю украсит ваш блог и за интересует посетителей.
<style>.v-gol { position: relative;z-index: 5;background: url(http://fytzal.ru/wp-content/uploads/2014/07/v-gol.ru-v-g.gif) repeat-x #ccc; border: 1px solid #060;border-radius: 100px; margin: 0 auto;height: 200px;
width: 200px;}.v-gol:hover {width: 700px; /* ширина блока основная */
.v-gol:after,.v-gol:before { position: absolute;
top: 0;content: '';padding: 0;margin: 0;height: 200px;width: 100px;
}.v-gol:before {left: 0; background: #333; border-radius: 100px 0 0 100px;
}.v-gol:after { right: 0; background: #f5f; border-radius: 0 100px 100px 0;
}.vg-menu:before,.vg-menu:after {content: '\25CF'; position: absolute; z-index: 5;
font: normal normal 100px/75px Tahoma; height: 100px; width: 50px;
}.vg-menu:before { background: #f5f; border-radius: 50px 0 0 50px;
text-indent: 20px; color: #000; left: 50px; top: 0;
}.vg-menu:after {background: #007; border-radius: 0 50px 50px 0;
text-indent: -50px; color: #f20;right: 50px; bottom: 0;
}.vg-menu { background: url() 0% -2px no-repeat transparent; border-top: 2px solid transparent;
border-bottom: 2px solid transparent; padding: 0 !important; margin: 0 100px !important;
list-style: none; overflow: hidden; height: 196px;
}.vg-menu li { position: relative ; border-radius: 100px; text-align: center;
float: left; height: 100%; width: 120px;
}.vg-menu li a { display: block; position: relative;
background: #FFF;border-radius: 100px; border: 0px solid #fff; color: #000;
font: normal normal 10px/100px Tahoma; text-decoration: none;
overflow: hidden;margin: 0px 10px; height: 120px; width: 120px;
word-wrap: break-word;
}.vg-menu li a:hover { background: #FFF;margin: 20px -18px;
font: normal normal 16px/150px Tahoma;padding: 0px 2px 1px 1px;
z-index: 2;height: 150px; width: 150px;
}.menu-title { display: block; position: absolute; top: -18px; right: 100%;
background: #FFF; border: 1px solid #CCC; text-align: center;
font: normal normal 16px sans-serif; opacity: 1.4; padding: 10px 0 0 0;
height: 80px; /* высота блока */
width: 150px; /* ширина блока для текста */
word-wrap: break-word;
}.menu-title:before,.menu-title:after { content: '+18'; /* поле для текста */
position: absolute;
right: 0; border-radius: 1px; border-width: 10px 10px; border-style: solid;
}.menu-title:after{ top: 90px; border-color: #a00000 transparent transparent transparent;
}.menu-title:before { top: 91px; border-color: #ccc transparent transparent transparent;
}.v-gol:hover .menu-title { opacity: 0;
}.v-gol { -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -o-transition: all 1s ease-in;
transition: all 1s ease-in;
}.vg-menu li a,.menu-title { -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease; transition: all 0.8s ease;
}</style>
width: 200px;}.v-gol:hover {width: 700px; /* ширина блока основная */
.v-gol:after,.v-gol:before { position: absolute;
top: 0;content: '';padding: 0;margin: 0;height: 200px;width: 100px;
}.v-gol:before {left: 0; background: #333; border-radius: 100px 0 0 100px;
}.v-gol:after { right: 0; background: #f5f; border-radius: 0 100px 100px 0;
}.vg-menu:before,.vg-menu:after {content: '\25CF'; position: absolute; z-index: 5;
font: normal normal 100px/75px Tahoma; height: 100px; width: 50px;
}.vg-menu:before { background: #f5f; border-radius: 50px 0 0 50px;
text-indent: 20px; color: #000; left: 50px; top: 0;
}.vg-menu:after {background: #007; border-radius: 0 50px 50px 0;
text-indent: -50px; color: #f20;right: 50px; bottom: 0;
}.vg-menu { background: url() 0% -2px no-repeat transparent; border-top: 2px solid transparent;
border-bottom: 2px solid transparent; padding: 0 !important; margin: 0 100px !important;
list-style: none; overflow: hidden; height: 196px;
}.vg-menu li { position: relative ; border-radius: 100px; text-align: center;
float: left; height: 100%; width: 120px;
}.vg-menu li a { display: block; position: relative;
background: #FFF;border-radius: 100px; border: 0px solid #fff; color: #000;
font: normal normal 10px/100px Tahoma; text-decoration: none;
overflow: hidden;margin: 0px 10px; height: 120px; width: 120px;
word-wrap: break-word;
}.vg-menu li a:hover { background: #FFF;margin: 20px -18px;
font: normal normal 16px/150px Tahoma;padding: 0px 2px 1px 1px;
z-index: 2;height: 150px; width: 150px;
}.menu-title { display: block; position: absolute; top: -18px; right: 100%;
background: #FFF; border: 1px solid #CCC; text-align: center;
font: normal normal 16px sans-serif; opacity: 1.4; padding: 10px 0 0 0;
height: 80px; /* высота блока */
width: 150px; /* ширина блока для текста */
word-wrap: break-word;
}.menu-title:before,.menu-title:after { content: '+18'; /* поле для текста */
position: absolute;
right: 0; border-radius: 1px; border-width: 10px 10px; border-style: solid;
}.menu-title:after{ top: 90px; border-color: #a00000 transparent transparent transparent;
}.menu-title:before { top: 91px; border-color: #ccc transparent transparent transparent;
}.v-gol:hover .menu-title { opacity: 0;
}.v-gol { -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -o-transition: all 1s ease-in;
transition: all 1s ease-in;
}.vg-menu li a,.menu-title { -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease; transition: all 0.8s ease;
}</style>
Как сделать блок для выделения кода.
<div class="menu-block"> <div class="v-gol"> <span class="menu-title">Возбуждает не голое тело, а сама возможность.</span> <ul class="vg-menu"> <li><a href="ссылка на сайт"><img border="0" src="Ссылка на изображение" height="160" title="картинка" width="160" /></a></li> <li><a href="ссылка на сайт"><img border="0" src="Ссылка на изображение" height="160" title="картинка" width="160" /></a></li> <li><a href="ссылка на сайт"><img border="0" src="Ссылка на изображение" height="160" title="картинка" width="160" /></a></li> <li><a href="ссылка на сайт"><img border="0" src="Ссылка на изображение" height="150" title="картинка" width="150" /></a></li> </ul></div></div> | Смотреть ещёСлайдер- ротатор для блогаРотатор для баннеровЭффекты для фото на CSS.Как добавить форум на блогОформление блоков для кода |
Настройки кода для фишки 18+.
Настроек масса и я даже не уверен стоит их перечислять или нет.Проще мне кажется самостоятельно скопировать код целиком и воспользоваться онлайн отладчиком HTML,изменяя и дополняя необходимые параметры.Тем более,что изменение одних настроек автоматически требует вмешательства в другие,что для начинающих пользователей может показаться несколько затруднительным.Основные параметры подписаны в коде и при необходимости можно изменить их.Удачи и пусть каждый из нас найдёт свою фишку в этой жизни способной изменить нашу жизнь к лучшему.
Отправить комментарий