Автор: admin

Привет всем , сегодня покажу вам как установить удобную фому комментариев от Cackle.me. На мой взгляд форма удобна и подойдет для любого дизайна сайта.

Как вы помните до этого у меня была форма от контакта,но здесь есть больше возможности для комментирования,да и вообще хочется чего то нового.

Переходим к просмотру самого ролика.

С уважением, Водопьянов Иван

Здравствуйте уважаемые подписчики , читатели и просто случайно зашедшие на мой блог! Сегодня расскажу вам об полезном скрипте позволяющем вывести на свой сайт форму онлайн-консультанта для сайта от сервиса Redhelper.

Пользоваться им можно абсолютно бесплатно! Главное никаких плагинов создающих нагрузку на ваш сервер. Итак , как же выглядит данная форма? Ее вы можете увидеть на моем блоге или посмотрите скриншот:

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

Ну что же , переходим на сам сервис 

Жмем на “Запустить сейчас”. Откроется окно регистрации:

Вводите ваш логин  пароль и почту на которую будут приходить вопросы от посетителей если вы офлайн.Кстати , не смущайтесь кнопки «попробовать бесплатно» , сервис абсолютно бесплатен!

После регистрации вас перекидывает вот в такое окно:

где просят скопировать вышеуказанный код в то место на вашем сайте где вы хотели бы чтобы он отображался , а также скачать программу для онлайн общения. Пока этот шаг мы с вами пропустим и перейдем в визуальный редактор чтобы посмотреть как это все будет выглядеть и изменить его если нас что-то не устроит. Итак переходи во вкладку настройки:

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

Код необходимо разместить внутри тэга body или head, процедура аналогична установке
счётчика посещаемости, например LiveInternet или Яндекс.Метрика.

Теперь что касается самой программы: после скачивания устанавливаете ее на сайт и все.Ею вы можете пользоваться для общения как говорится в прямом эфире)) , а для кого то достаточно получать вопросы по почте.

На этом у меня все , если есть какие-либо вопросы задавайте их в комментариях ниже.

С уважением, Водопьянов Иван

Здравствуйте дорогие друзья! Сегодня хотел бы вам показать как сделать обводку для текста с помощью css.

Если вы хотите оригинально выделиться среди блогеров и выделить особо важный текст , то тогда читайте пост до конца.

Результат после применения: Теперь давайте по шагам разберемся что нужно сделать:

1) Вставить этот код в самый низ вашего CSS стиля

.obvodka {
margin:3px 10px; padding:12px 5px 12px 0px; border:1px solid #E1E1E1; background: #F1F1F1  no-repeat; background-position: 5px 3px; border-radius:8px; min-height:30px;width:400px; font-size:15px;
}

CSS класс для текста готов и им вполне можно пользоваться
Для того чтобы это сделать, при написании статьи переключитесь в Html вид.

Теперь определитесь с тем что какой текст будете выделять и перед ним добавьте:

<div class="obvodka">

Теперь после текста добавьте следующее:

</div>

Пример того что я привел выше:

<div class="obvodka">Вот как будет выглядеть текст</div>

В стиле вы можете изменять высоту и ширину обводки , радиус закругления,фон итд.

В общем экспериментируйте.

Добрый день дорогой друг! Сегодняшний пост будет посвящен  тому какие существуют способы

создания сайта бесплатно . Если вы новичек  в сайтостроении , и толком не знаете нужно ли вам это , то тогда вам конечно не стоит тратить деньги на домен и хостинг. Пока что вам необходима бесплатная платформа для создания сайта. Я свой первый сайт делал на Яндекс Народе , и получилось конечно ужасно. Довольно долго разбирался  с кажущимися проблемами создания сайта . У меня в начале даже не было как таковой цели , а именно – для чего мне нужен сайт.

Мне было просто интересно во всем этом разбираться , всегда хотелось узнать  как же вебмастера работают с  сайтами , как  добавляют новые записи , вносят изменения в дизайн и вообще просто хотелось похвастаться перед близкими , что я умею создавать сайт сам бесплатно не прибегая к помощи фрилансера и других.

На начальном этапе конечно можно поиграться   понять , а нужно ли оно вам? Затем  я стал увлекаться созданием сайтов еще больше и перешел на  другую систему создания сайтов , а именно Ucoz. Очень хорошая система , там я еще более стал разбираться в сайтостроительстве. Многие люди ведут достаточно большое количество проектов на Ucoz  и меня это не удивляет поскольку данная система достаточно качественная. Вам предоставляется бесплатный домен и хостинг и это классно. Мне не нравилось то что сайт вам полностью не принадлежит . Более того если у вас бесплатный аккаунт на Ucoz , то на вашем сайте вывешивается их реклама что было для меня не приятной новостью. Я наконец определился с тематикой своего сайта и решил что мой сайт будет посвящен  тому как создать сайт самому и раскрутить его. Позже еще возникла идея внести пункт про инфо-бизнес. Далее мой выбор пал на платформу  Wordpress. Поскольку я увидел сколько положительных отзывов об этой CMS и увидел что достаточно приличное количество крупных компаний имеют сайты именно на WordPress. И вам дорогие друзья советую , если вы действительно хотите создать качественный и профессиональный  блог , то конечно  устанавливайте его на WordPress . Главное определитесь  с  тематикой , интересна ли вам она? Поскольку многие люди создают сайты , а потом их забрасывают , то вас должен быть стимул вести блог. Если это связанно с вашим хобби то отлично , а может вы хотите зарабатывать  на сайте ,  то это еще лучше. Развивайте свой проект и добивайтесь поставленных целей!

В интернет среде достаточно большое количество материалов по тому как создать свой сайт бесплатно самому , но все эти методы разрозненные.Моя задача как вебмастера и инфо-бизнесмена структурировать всю информацию и запечатать ее в отдельный курс по созданию профессионального блога на WordPress. Ведь новичку очень сложно во всем этом разобраться , поэтому я и создал видео курс  «Создание сайт на WordPress от А до Я . Там вы получите комплексный алгоритм создание сайта и уже в течении трех дней все сделаете.

Скачать вы его можете абсолютно бесплатно перейдя по картинке в правом сайд баре.

На этом я заканчиваю этот коротенький пост , надеюсь он был вам полезен. Всего вам хорошего и до новых встреч , пока!

С уважением , Водопьянов Иван

Tweet

Часть 1. Создаём красивые хлебные крошки

Первый пример

Сам вид элемента будет состоять из трёх частей, которые соединены в одну целую часть. Чтобы было понятнее смотрите рисунок ниже:

#breadcrumbs-one{
 background: #eee;
 border-width: 1px;
 border-style: solid;
 border-color: #f5f5f5 #e5e5e5 #ccc;
 border-radius: 5px;
 box-shadow: 0 0 2px rgba(0,0,0,.2);
 overflow: hidden;
 width: 100%;
 }

#breadcrumbs-one li{
 float: left;
 }

#breadcrumbs-one a{
 padding: .7em 1em .7em 2em;
 float: left;
 text-decoration: none;
 color: #444;
 position: relative;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 background-color: #ddd;
 background-image: linear-gradient(to right, #f5f5f5, #ddd);
 }

#breadcrumbs-one li:first-child a{
 padding-left: 1em;
 border-radius: 5px 0 0 5px;
 }

#breadcrumbs-one a:hover{
 background: #fff;
 }

#breadcrumbs-one a::after,
 #breadcrumbs-one a::before{
 content: "";
 position: absolute;
 top: 50%;
 margin-top: -1.5em;
 border-top: 1.5em solid transparent;
 border-bottom: 1.5em solid transparent;
 border-left: 1em solid;
 right: -1em;
 }

#breadcrumbs-one a::after{
 z-index: 2;
 border-left-color: #ddd;
 }

#breadcrumbs-one a::before{
 border-left-color: #ccc;
 right: -1.1em;
 z-index: 1;
 }

#breadcrumbs-one a:hover::after{
 border-left-color: #fff;
 }

#breadcrumbs-one .current,
 #breadcrumbs-one .current:hover{
 font-weight: bold;
 background: none;
 }

#breadcrumbs-one .current::after,
 #breadcrumbs-one .current::before{
 content: normal;
 }

Второй пример

#breadcrumbs-two{
 overflow: hidden;
 width: 100%;
 }

#breadcrumbs-two li{
 float: left;
 margin: 0 .5em 0 1em;
 }

#breadcrumbs-two a{
 background: #ddd;
 padding: .7em 1em;
 float: left;
 text-decoration: none;
 color: #444;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 position: relative;
 }

#breadcrumbs-two a:hover{
 background: #99db76;
 }

#breadcrumbs-two a::before{
 content: "";
 position: absolute;
 top: 50%;
 margin-top: -1.5em;
 border-width: 1.5em 0 1.5em 1em;
 border-style: solid;
 border-color: #ddd #ddd #ddd transparent;
 left: -1em;
 }

#breadcrumbs-two a:hover::before{
 border-color: #99db76 #99db76 #99db76 transparent;
 }

#breadcrumbs-two a::after{
 content: "";
 position: absolute;
 top: 50%;
 margin-top: -1.5em;
 border-top: 1.5em solid transparent;
 border-bottom: 1.5em solid transparent;
 border-left: 1em solid #ddd;
 right: -1em;
 }

#breadcrumbs-two a:hover::after{
 border-left-color: #99db76;
 }

#breadcrumbs-two .current,
 #breadcrumbs-two .current:hover{
 font-weight: bold;
 background: none;
 }

#breadcrumbs-two .current::after,
 #breadcrumbs-two .current::before{
 content: normal;
 }

Третий пример

#breadcrumbs-three{
 overflow: hidden;
 width: 100%;
 }

#breadcrumbs-three li{
 float: left;
 margin: 0 2em 0 0;
 }

#breadcrumbs-three a{
 padding: .7em 1em .7em 2em;
 float: left;
 text-decoration: none;
 color: #444;
 background: #ddd;
 position: relative;
 z-index: 1;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 border-radius: .4em 0 0 .4em;
 }

#breadcrumbs-three a:hover{
 background: #abe0ef;
 }

#breadcrumbs-three a::after{
 background: #ddd;
 content: "";
 height: 2.5em;
 margin-top: -1.25em;
 position: absolute;
 right: -1em;
 top: 50%;
 width: 2.5em;
 z-index: -1;
 transform: rotate(45deg);
 border-radius: .4em;
 }

#breadcrumbs-three a:hover::after{
 background: #abe0ef;
 }

#breadcrumbs-three .current,
 #breadcrumbs-three .current:hover{
 font-weight: bold;
 background: none;
 }

#breadcrumbs-three .current::after{
 content: normal;
 }

Четвёртый пример

#breadcrumbs-four{
 overflow: hidden;
 width: 100%;
 }

#breadcrumbs-four li{
 float: left;
 margin: 0 .5em 0 1em;
 }

#breadcrumbs-four a{
 background: #ddd;
 padding: .7em 1em;
 float: left;
 text-decoration: none;
 color: #444;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 position: relative;
 }

#breadcrumbs-four a:hover{
 background: #efc9ab;
 }

#breadcrumbs-four a::before,
 #breadcrumbs-four a::after{
 content:'';
 position:absolute;
 top: 0;
 bottom: 0;
 width: 1em;
 background: #ddd;
 transform: skew(-10deg);
 }

#breadcrumbs-four a::before{

left: -.5em;
 border-radius: 5px 0 0 5px;
 }

#breadcrumbs-four a:hover::before{
 background: #efc9ab;
 }

#breadcrumbs-four a::after{
 right: -.5em;
 border-radius: 0 5px 5px 0;
 }

#breadcrumbs-four a:hover::after{
 background: #efc9ab;
 }

#breadcrumbs-four .current,
 #breadcrumbs-four .current:hover{
 font-weight: bold;
 background: none;
 }

#breadcrumbs-four .current::after,
 #breadcrumbs-four .current::before{
 content: normal;
 }

Вот и всё, я считаю, что очень стильные и одновременно простые крошки. Тем более нет никаких изображений, соответственно быстрее загружаются.

Во всех примерах в стилях используется тег hover, который меняет цвет элемента при наведении, так же если Вам не нравится не один из представленных цветов, Вы с лёгкость сможете заменить его на свой.

Теперь пришло время перейти к второй части, а именно, будем прикреплять один из примеров на свой блог WordPress, поехали.

Часть 2. Как прикрепить данные хлебные крошки

на блог WordPress

И так, для начала нам нужно скачать плагин Breadcrumb NavXT, скачать его Вы сможете тут. После того как плагин будет скачан и активирован, нужно будет произвести некоторые настройки:

Настройки плагина находятся в параметрах. Во вкладке General нужно найти строчку Breadcrumb Separator и удалить стандартное значение, которое там стоит, другими словами, нужно оставить поле пустым.

Далее выбираем вторую вкладку Current Item и на против строчки Link Current Item ставим галочку. Обязательно после того как всё сделаете,  не забудьте сохраниться.

Это второй пример, который находится выше в статье.

Берём и просто копируем данные стили, а затем добавляем их в style.css Вашей темы, в любое место, которое больше всего Вам понравится, советую выделить начало и конец стилей крошек, потому что если в будущем захочется что либо там изменить, запутаетесь.

Теперь нужно хлебные крошки добавить непосредственно на блог.

В админке блога находим внешний вид, затем редактор, и выбираем single.php. Далее добавьте следующее:

<div id="breadcrumbs-two">
<?php
if(function_exists('bcn_display'))
{
 bcn_display();
}
?>
</div>

Обратите внимание, что сама функция вызова крошек стоит между тегами <div></div> id которых breadcrumbs-two, не забудьте поменять данный id на пример который  добавили в стили. Например, если это первый пример (который выше) тогда должно быть так: <div id=»breadcrumbs-one»> и так далее. (Извиняюсь за ребус)

Вот и всё. Дорогие друзья, если возникнут какие то трудности обязательно спрашивайте в комментариях. До скорых встреч.

Источник: Beloweb

Доброго времени суток дорогие друзья!Не так давно в интернете я обнаружил сервис по установке кнопок социальных сетей на свой сайт или блог.Данные кнопки мне сразу же понравились и я даже подумываю установить их на свой блог.Во-первых они просты в использовании,просто выбираете необходимый вид кнопок,код автоматически сгенерируется нажимаете на кнопку скопировать вставляете и все.Вот не посредственно ссылка на сам сервис pluso.ru.Вот собственно как выглядят данные кнопки:

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

Думаю что делать видео урок о том как установить эти кнопки было бы глупо с моей стороны там и так все очень просто.

Если вам понравился данный пост,кликните по кнопкам социальных сетей ниже этого поста.

В очередной раз приветствую вас дорогие друзья! В этом посте хотел бы рассказать о замечательном плагине Popup Domination.Для чего этот плагин?Данный плагин является прекрасным инструментом сбора подписной базы,а как известно вам мои дорогие читатели подписная база, это ваш золотой актив, который при умелом применении становится вашим неиссякаемом источником дохода.Теперь поподробнее об этом плагине и как он работает:если посетитель заходит на ваш сайт то через некоторое время на экране монитора появится всплывающее окошко типа как на этой картинке:

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

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

Архив с плагином я приложу к этому посту,точнее ниже обучающего видео по его установке,чтобы вам было проще,автором данного  плагина является Свят Маслов он и расскажет в этом видео как его правильно установить.Плагин  проверен,так что вы совершенно уверенно можете его скачать и установить на свой сайт.Более того данная штуковина преобразит ваш сайт сделает его более привлекательным,если вы разбираетесь в html коде то вы можете настроить плагин по своему вкусу,сделать его неповторимым. Попап окно используется многими интернет предпринимателями и неспроста:т.к  он увеличивает количество подписавшихся более чем в 30%,вследствии чего вы будете получать больший доход.

Ну что же меньше слов приступаем к делу,смотрим видео.

СКАЧАТЬ ПЛАГИН