Аккуратный блок с реферальными ссылками
За последние несколько дней в блоге pervushin.com появились некоторые нововведения. Одним из этих нововведений я бы хотел поделиться с Вами.
Вчера, в боковую колонку, я добавил блок с партнерскими ссылками. Не скрою, идею внешнего вида, а именно соотношение графики и текста, «слизал» с блога seo2z.
В этом посте я поделюсь с Вами иконками сервисов, которые можно разместить в таком блоке со своими партнерскими ссылками и CSS стилем, который будет «рулить» положением иконок относительно ссылок и текста.
Как сейчас выглядят мои партнерские ссылки Вы можете глянуть в панели справа, в блоке «Я использую и рекомендую Вам». Или посмотрите на скриншот ниже:
Хотите себе такие? Забирайте иконки (скачать), распакуйте их и залейте на свой сервер в любую удобную Вам папку. В архиве все используемые мной иконки.
Вам наверняка понадобятся какие-то свои иконки. Взять Вы их можете с тех сайтов, на которые собственно хотите ставить ссылки. Практически у каждого сайта сейчас имеется свой favicon.ico, вот его я скачивал и конвертировал в формат .png. Если Вы не знаете, как это сделать, воспользуйтесь каким-нибудь онлайн конвертором, коих в сети много, или напишите мне через форму обратной связи, помогу.
Теперь необходимо прописать стили в Ваш css файл. Обычно это style.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). Таким же образом добавляем и другие свои ссылки.
Вот собственно и все. Быстро, не сложно и очень симпатично.
А какие стильные, не мешающие чтению, но в тоже время притягивающие внимание решения используете Вы?
Классно выглядет, мне прямо очень понравилось!
Хороший блок, полезный. интересно посмотреть, что рекомендует автор.
очень хорошая идея, получается мало того что статьи есть так и подтверждение как бы на деле! одобрям
Спасибо за полезную статью, добавил в закладки думаю позже вернусь к её реализации..
хорошая идея
Интересно. Возможно на некоторому сегменту траффика будет полезно.
Да. Надо объюзать.
Милые мои, используйте http://www.google.com/s2/favicons?domain=доменъ
И будет вам щасте.
Прикольный блок, я тоже планирую такой сделать… Только только рефки замаскирую по-другому через onclick, так конверсия будет лучше. За иконки спс.
Зарегистрируйтесь пожалуйста,нужно набрать 40 человек)