Всем доброго времени суток!

Сегодня я вам расскажу, как вывести на блоге угловой баннер при помощи плагина fcc ribbon manager, а так же с помощью обычного кода. Многие из вас наверняка замечали на различных ресурсах этот угловой баннер? Вообще, он может иметь любой вид, подходящий для вашего блога. Для каждого он будет индивидуален.

как увеличить число подписчиков

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

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

Суть баннера заключается в том, что бы перенаправить человека на заранее заготовленную страницу. А уже что в ней будет? Это только ваша фантазия! Кто кликал по моему угловому баннеру, тот видел, какая информация в нем содержится. На этой странице я постарался объяснить человеку, почему он должен стать подписчиком моего блога. Ну как после такого не подписаться?

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

Еще один плюс баннера в том, что его можно использовать в виде украшения. Так как картинку баннера можно установить любую, этим можно воспользоваться в благих целях. Например, на 9 мая, сделать его в виде Георгиевской ленточки, на Новый Год — в виде гирлянды, на 8 марта — в виде ленточки в цветах. В общем, придумать можно много чего, была бы фантазия.

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

Fcc ribbon manager

Для начала вам потребуется скачать плагин на этой странице. Дальше делаем все, как обычно. Загружаем архив с плагином в папку с плагинами вашего блога (Административная панель/Плагины) и активируем его. После активации плагина в левом верхнем углу вашего сайта появится стандартный рисунок баннера, установленный по умолчанию в плагине fcc ribbon manager со ссылкой на какой-то не понятный сайт.

Как его заменить? Делается все очень просто. Для начала вам потребуется загрузить сам рисунок баннера в корневой каталог вашего блога, в любое удобное для вас место. Где взять рисунок баннера? Здесь есть несколько вариантов. Нарисовать его самому, например, с помощью Photoshop, или скачать готовый вариант баннера в интернете.

Также я приготовил для вас несколько вариантов баннеров, может, что и подойдет под ваш дизайн. Скачать их можете здесь. Теперь, переходим в настройки плагина (Административная панель/Параметры/Ribbon Manager) и изменяем стандартные настройки на свои:

как увеличить подписчиков

  1. Прописываем путь до картинки
  2. Подгоняем баннер под экран монитора
  3. Копируем ссылку на заранее заготовленную страницу
  4. Прописываем название страницы (Title) (не обязательно)
  5. Указываем расположение баннера, справа или слева
  6. После того как все настройки установлены, обязательно сохраняем их, нажав «update».

Теперь обновляем страницу блога и смотрим что получилось. Если все отображается и работает корректно, значит, вы все сделали правильно. Вот так вот легко устанавливается угловой баннер с помощью плагина  fcc ribbon manager.

Как установить угловой баннер при помощи кода

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

Расскажу вам небольшую предысторию, как все происходило! Я пошел на сайт free-lance.ru и опубликовал проект: «Требуется сверстать код углового баннера со ссылкой на страницу». Уточнил в проекте, сколько это займет по времени и какова цена вопроса? Сразу скажу, это был мой первый опыт общения с фрилансерами, поэтому я не очень в этом разбирался! В течении часа откликнулось три  человека. Один предложил сверстать код за 500 рублей/20 мин., второй 200 рублей/полдня и третий 180 рублей/один-два часа.

Ну, выкладывать 500 рублей за какой-то кусок кода мне не очень хотелось... Вот люди деньги делают, 20 мин. и 500 рублей в кармане!=) Оставался выбор из двух других исполнителей. Поразмышляв немного, я выбрал середину, т.е. второго фрилансера за 200 рублей, эта сумма меня вполне устраивала. На тот момент моим аргументы было: долго — значит качественно, но... я ошибся. Сейчас расскажу почему? В общем, заключили мы с ним сделку, оформили все как полагается.

Делал он мне код примерно часов 8-10, точно не помню. Сделал, значит, я проверил, вроде все работает. «Ну, спасибо огромное», говорю я ему. Расплатился с ним и остался доволен. На следующий день прихожу на работу, открываю свой блог, а баннер у меня сдвинут на шапку. А должен находиться в верхнем правом углу экрана. «Не понял?», подумал я про себя. «Что за фигня?».

Я иду снова на free-lance.ru, нахожу того же фрилансера и спрашиваю у него, в чем может быть дело? Он мне через какое-то время отвечает, что у него мол все нормально отображается и он не понимает, что я еще хочу от него. Ну ладно думаю, гаденыш! Начинаю искать информацию в интернете. Оказывается, в зависимости от разрешения монитора любой сайт отображается по разному.

Есть еще резиновые шаблоны, а есть фиксированные... В общем, в голове все перемешалось, а забивать ее не нужными вещами мне не хотелось, да и  больно некогда было. Я снова иду на free-lance.ru и публикую новый проект. Мол, так и так, почему баннер на разных ПК отображается по разному? Кто может устранить проблему? Через минут десять, мне пишет один товарищ: «Я нашел, в чем причина, вот мой скайп, пиши, помогу!». «Ну, хорошо», думаю я!

Пишу ему в скайп, а он мне говорит: «У тебя ошибка в коде вывода баннера! Ты сам код верстал? Нет, конечно», отвечаю я ему. — «Я в этом не силен». В общем, говорит: «Исправлю за 150 рублей, ну исправляй» — говорю, -"Я согласен!" Не проходит и минуты он мне пишет: «Проверяй». Проверяю, все отлично отображается. Проверяю на других ПК, благо их на работе полно, везде все замечательно!

«Ну благодарю, выручил». Расплатился я с ним, а тому товарищу, который изначально верстал код, написал грозное письмо. Говорю: «Пришлось переделывать твою работу. Мне не жалко этих 200 рублей, но если ты не умеешь верстать код то и не берись! Для начала стань профессиональном в своем деле, а потом бери деньги с людей! А такими темпами растеряешь всех клиентов и авторитетность в глазах заказчиков!». Так он наглец знаете, что мне ответил?

«А ты не можешь мне скинуть правильный код, чтобы я в следующий раз знал, как правильно его сверстать?». Такой наглости я еще не встречал... Я ему больше ничего не стал писать, но был немного шокирован! Вот такие вот бывают чудо фрилансеры. Поэтому, прежде чем, что-то заказывать, надо основательно изучить портфолио человека, отзывы о нем... Особенно если речь идет о приличной сумме за сделку!

В итоге код мне обошелся в 350 рублей! Но я поделюсь им с вами, абсолютно бесплатно! Итак, что бы вывести угловой баннер с помощью кода, делаем следующее. Для начала у вас, как и в первом варианте должна быть сама картинка баннера загружена в корневой каталог вашего блога. Дальше вам понадобится отредактировать всего лишь два файла темы, header.php и style.css. Давайте начнем с первого.

Скопируйте файл header.php себе на ПК, откройте его при помощи текстового редактора и после тега <body>, вставьте вот этот код:

<div class="ban"><a href="https://blogiseo.ru/dly-teh-kto-vpervie-na-bloge" target="_blank">для тех кто впервые на сайте</a></div>

Здесь мы присвоили идентификатор нашему баннеру (ban) и проставили ссылку на заготовленную страницу. Теперь давайте присвоим ему таблицу стилей (то, как баннер будет отображаться). Перемещаем файл style.css к себе на ПК, открываем его, и в самом конце вставляем вот этот код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.ban{
        background: url(images/ban.png) no-repeat 1px 1px;
        width: 175px;
        height: 180px;
        position: fixed;
        top: 0px;
        right: -8px;
    }
    .ban a{
        text-decoration: none;
        text-indent: -2000px;
        display: block;
        width: 205px;
        height: 49px;
        margin: 43px 2px;
        -o-transform: rotate(44deg);
         -webkit-transform: rotate(44deg);
         -moz-transform: rotate(44deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }

Эти коды вроде бы как настроены под оптимальное разрешение экрана. Я пробовал на двух разных сайтах и на пяти разных ПК, везде отображается корректно! Единственное, что могу немного прояснить по этому коду, если в строке №5 установить вместо:

position: fixed; - position: absolute;

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

Итоги эксперимента по выводу запроса в ТОП

Сегодня первое февраля, а значит подошло время подвести итоги моего первого эксперимента! О том, что это был за эксперимент, почитайте в этой статье. Вот результаты:

  • Яндекс — ТОП 8
  • Google — ТОП 6

Что я могу сказать — эксперимент провалился! Конечно, сказать провалился, будет не совсем корректно, так как его чистота просто нарушилась, после того, как я по незнанию допустил одну грубейшую ошибку! Но факт остается фактом. Больше особо сказать здесь не чего. Поэтому я решил немного погодя повторить эксперимент, но уже сделать его в виде соревнований с хорошими призами. Так что оставайтесь на связи! Скоро обо всем узнаете!

Награждение победителей кроссворда на blogiseo.ru №4

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

Победители кроссворда на blogiseo.ru №4:
1 место — Александр (vedrogaek.ru) — 200 рублей
2 место — Игорь ([email protected] ) — 100 рублей
3 место — Татьяна Саксон (sakson.lit-dety.ru) — 50 рублей

Поздравляю ребята! Молодцы! Высылайте номера своих кошельков и забирайте свои призы!

Из этой статьи вы узнали, как установить угловой баннер при помощи плагина fcc ribbon manager и с помощью кода! Узнали, что баннер может способствовать увеличению числа подписчиков. А значит, я писал этот пост не зря! И на этой заключительной ноте я с вами буду прощаться! Желаю всем отличного настроения! Пока! До новых встреч!

-->Подписаться на обновления блога<--

Как вам статья? А по вашему мнению баннер способствует привлечению внимания посетителей? Жду ваших комментариев!

С уважением, Николай Коротков