Оформляю блок с реферальными ссылками

Добрый день, уважаемые читатели и гости блога! За последнюю неделю на блоге lediseo.ru введены некоторые изменения, как я и обещала в статье “С днем рождения, Отчаянная! Блогу lediseo.ru 1 год!” . Думаю, постоянные читатели это уже заметили и сумели оценить. О том, как это реализовать я буду рассказывать в своих материалах. И начну уже прямя сегодня. Вчера, в сайтбаре блока я вывела блок с реферальными ссылками. В этой статье я расскажу Вам как можно с помощью css стилей реализовать подобное и на Вашем блоке, а так поделюсь данными иконками.

Раньше все мои реферальные ссылки были размещены только в статьях, рассказывающих о том или ином сервисе. Сегодня же основные мои партнерские ссылки можно увидеть в сайтбаре справа, в блоке “Блоггеру” или же просто посмотрите на скриншот ниже:

как вывести реферальные ссылки

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

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

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

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

.ref_timeweb{
padding: 0 0 10px 36px;
background: url('путь к иконке/time.jpg') no-repeat 0px 2px;
}

После того как стили прописали, добавляем рефельные ссылки в сайтбар. Я свои выводила с помощью виджета произвольного html кода, где прописала следующее: