Аккуратный блок с реферальными ссылками

За последние несколько дней в блоге pervushin.com появились некоторые нововведения. Одним из этих нововведений я бы хотел поделиться с Вами.

Вчера, в боковую колонку, я добавил блок с партнерскими ссылками. Не скрою, идею внешнего вида, а именно соотношение графики и текста, «слизал» с блога seo2z.

В этом посте я поделюсь с Вами иконками сервисов, которые можно разместить в таком блоке со своими партнерскими ссылками и CSS стилем, который будет «рулить» положением иконок относительно ссылок и текста.

Аккуратный блок с реферальными ссылками

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

Блок с партнерскими ссылками

Хотите себе такие? Забирайте иконки (скачать), распакуйте их и залейте на свой сервер в любую удобную Вам папку. В архиве все используемые мной иконки.

Вам наверняка понадобятся какие-то свои иконки. Взять Вы их можете с тех сайтов, на которые собственно хотите ставить ссылки. Практически у каждого сайта сейчас имеется свой favicon.ico, вот его я скачивал и конвертировал в формат .png. Если Вы не знаете, как это сделать, воспользуйтесь каким-нибудь онлайн конвертором, коих в сети много, или напишите мне через форму обратной связи, помогу.

Теперь необходимо прописать стили в Ваш css файл. Обычно это style.css. Я приведу в пример стиль одной ссылки (иконки), а Вы уже по аналогии добавьте необходимое количество, изменяя лишь путь к иконке.

CSS стили

.ref_gogetlinks{
 padding: 0 0 10px 26px;
 background: url('путь к картинке/gogetlinks.png') no-repeat 0px 2px;
 }

Стили прописаны. Пришло время добавить необходимые реферальные ссылки в нужное место шаблона. Я свои добавил в боковую колонку, за эту колонку в моем шаблоне отвечает файл sidebar.php. В него и добавляю вот такой код:

<div class="ref_gogetlinks">
 <a href="http://pervushin.com/r/gogetlinks.php" rel="nofollow">GoGetLinks</a> - качественные сайты, вечные ссылки, приличные цены. Продвигай и зарабатывай. (<a href="http://pervushin.com/gogetlinks-internet-earnings.html">Подробнее</a>)
 </div>

Где class=»ref_gogetlinks» — это стиль, который мы прописывали в файл стилей (style.css). Таким же образом добавляем и другие свои ссылки.

Вот собственно и все. Быстро, не сложно и очень симпатично.

А какие стильные, не мешающие чтению, но в тоже время притягивающие внимание решения используете Вы?


Комментарии

10 на запись "Аккуратный блок с реферальными ссылками"
  1. Классно выглядет, мне прямо очень понравилось!

  2. ShadowKoTT says:

    Хороший блок, полезный. интересно посмотреть, что рекомендует автор.

  3. Tony says:

    очень хорошая идея, получается мало того что статьи есть так и подтверждение как бы на деле! одобрям

  4. Artur says:

    Спасибо за полезную статью, добавил в закладки думаю позже вернусь к её реализации..

  5. Gamer says:

    Интересно. Возможно на некоторому сегменту траффика будет полезно.

  6. artoha says:

    Да. Надо объюзать.

  7. artoha says:

    Милые мои, используйте http://www.google.com/s2/favicons?domain=доменъ
    И будет вам щасте.

  8. Прикольный блок, я тоже планирую такой сделать… Только только рефки замаскирую по-другому через onclick, так конверсия будет лучше. За иконки спс.

  9. Ксения says:

    Зарегистрируйтесь пожалуйста,нужно набрать 40 человек)

Спасибо, что оставили свой комментарий

banner