как создать инфо-блок для сайдбара (wordpress)

[Mar$hall]

Приветствую, уважаемые форумчане!

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

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

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

 

[Emblema]

Можно ссылку на сайт? Можно под хайдом.

 

[Emblema]

На сайт, откуда взяли блок.

 

[Mar$hall]

вот ссылка

переключите на вкладку "как заработать"

 

[Emblema]

Вот собственно код этого блока:

<div class="tabs__content" style="display: block;">
					<ul class="offers">
						<li class="offer">
							<img src="http://speculantu.ru/wp-content/uploads/2015/07/bo.png" width="32" height="32" alt="">
							<div class="offer__name"><span>Бинарные опционы</span><span class="offer__name1"> до 82 %</span></div>
							<a href="http://speculantu.ru/category/binary-option/" class="offer__review">Обучение</a> |
							<a target="_blank" href="http://wow-partners.com/click.php?ctag=a998-b107-p5-fBlog-Rubrikator" class="offer__site">Перейти на сайт</a>
						</li>
						<li class="offer">
							<img src="http://speculantu.ru/wp-content/uploads/2015/07/partner.png" width="32" height="32" alt="">
							<div class="offer__name"><span>Партнерки</span><span class="offer__name1"> до 300$ CPA</span></div>
							<a href="http://speculantu.ru/category/zarabotok-online/partnerskie-programmy/" class="offer__review">Ликбез</a> 
						<!--	<a target="_blank" href="" class="offer__site">Перейти на сайт</a> -->
						</li>
						<li class="offer">
							<img src="http://speculantu.ru/wp-content/uploads/2015/07/infobiz.png" width="32" height="32" alt="">
							<div class="offer__name"><span>Инфобизнес</span></div>
							<a href="http://speculantu.ru/category/zarabotok-online/info-biznes/" class="offer__review">Ликбез</a> |
							<a target="_blank" href="http://1popov.ru/disc2/" class="offer__site">Обучающий курс</a>
						</li>
						<li class="offer">
							<img src="http://speculantu.ru/wp-content/uploads/2015/07/copyright.png" width="32" height="32" alt="">
							<div class="offer__name"><span>Копирайтинг</span></div>
							<a href="http://speculantu.ru/category/zarabotok-online/kopirajting/" class="offer__review">Ликбез</a> |
							<a target="_blank" href="http://www.etxt.ru/?r=sai84" class="offer__site">Биржа копирайта</a>
						</li>
						<li class="offer">
							<img src="http://speculantu.ru/wp-content/uploads/2015/07/blog.png" width="32" height="32" alt="">
							<div class="offer__name"><span>Собственный сайт / блог</span></div>
							<a href="http://speculantu.ru/category/zarabotok-online/zarabotok-na-sajte/kak-sozdat-sajt/" class="offer__review">Ликбез</a> 
					<!--		<a target="_blank" href="http://www.etxt.ru/?r=sai84" class="offer__site">Биржа копирайта</a>  -->
						</li>
					</ul> 
				</div>

Осталось найти соответствующие CSS, которые определяют вид элементов отсюда: http://speculantu.ru/wp-content/themes/speculantu.ru/style.css

 

[Emblema]

Но как я понял тут плагин стоит виджета. Легче найти этот виджет в нете.

 

[Mar$hall]

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

если рассматривать вариант с кодом, то вопрос только 1 как текст рядом с картинкой?
есть ли еще варианты, может кому известны плагины?

 

[Mar$hall]

Но как я понял тут плагин стоит виджета. Легче найти этот виджет в нете.

я пытался найти что-то похожее, но результатов нет

 

[Void]

если рассматривать вариант с кодом, то вопрос только 1 как текст рядом с картинкой?

Для этого используются атрибуты css Float и Clear

 

[Void]

я пытался найти что-то похожее, но результатов нет

ТЫЦ Если хорошо поискать можно найти нужные виджеты и плагины

 

[Mar$hall]

Для этого используются атрибуты css Float и Clear

я конечно далек от знания кодов, но в случае с указанные выше кодом как использовать эти атрибуты тут?

<div class="tabs__content" style="display: block;">					<ul class="offers">						<li class="offer">							<img src="http://speculantu.ru/wp-content/uploads/2015/07/bo.png" width="32" height="32" alt="">							<div class="offer__name"><span>Бинарные опционы</span><span class="offer__name1"> до 82 %</span></div>							<a href="http://speculantu.ru/category/binary-option/" class="offer__review">Обучение</a> |							<a target="_blank" href="http://wow-partners.com/click.php?ctag=a998-b107-p5-fBlog-Rubrikator" class="offer__site">Перейти на сайт</a>						</li>						<li class="offer">							<img src="http://speculantu.ru/wp-content/uploads/2015/07/partner.png" width="32" height="32" alt="">							<div class="offer__name"><span>Партнерки</span><span class="offer__name1"> до 300$ CPA</span></div>							<a href="http://speculantu.ru/category/zarabotok-online/partnerskie-programmy/" class="offer__review">Ликбез</a> 						<!--	<a target="_blank" href="" class="offer__site">Перейти на сайт</a> -->						</li>						<li class="offer">							<img src="http://speculantu.ru/wp-content/uploads/2015/07/infobiz.png" width="32" height="32" alt="">							<div class="offer__name"><span>Инфобизнес</span></div>							<a href="http://speculantu.ru/category/zarabotok-online/info-biznes/" class="offer__review">Ликбез</a> |							<a target="_blank" href="http://1popov.ru/disc2/" class="offer__site">Обучающий курс</a>						</li>						<li class="offer">							<img src="http://speculantu.ru/wp-content/uploads/2015/07/copyright.png" width="32" height="32" alt="">							<div class="offer__name"><span>Копирайтинг</span></div>							<a href="http://speculantu.ru/category/zarabotok-online/kopirajting/" class="offer__review">Ликбез</a> |							<a target="_blank" href="http://www.etxt.ru/?r=sai84" class="offer__site">Биржа копирайта</a>						</li>						<li class="offer">							<img src="http://speculantu.ru/wp-content/uploads/2015/07/blog.png" width="32" height="32" alt="">							<div class="offer__name"><span>Собственный сайт / блог</span></div>							<a href="http://speculantu.ru/category/zarabotok-online/zarabotok-na-sajte/kak-sozdat-sajt/" class="offer__review">Ликбез</a> 					<!--		<a target="_blank" href="http://www.etxt.ru/?r=sai84" class="offer__site">Биржа копирайта</a>  -->						</li>					</ul>  				</div>

 

[Void]

Например:

li.offer>img {float: left;}

 

[Mar$hall]

Например:

Код:
li.offer>img {float: left;}

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

Появился вопрос касательно ссылок на другие ресурсы, есть ли смысл или необходимость заключать ссылки в тег <noindex> ?

 

[Void]

Появился вопрос касательно ссылок на другие ресурсы, есть ли смысл или необходимость заключать ссылки в тег <noindex> ?

Я на своем блоге поставил плагин ( Для Джумла ), который берет все внешние ссылки в тег noindex и добавляет атрибут nohref , но это по желанию конечно. Ссылки не вредят сайту, если они тематические, не купленные и их не очень очень много.

 

[Mar$hall]

Ссылки не вредят сайту, если они тематические, не купленные и их не очень очень много.

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

 

[Void]

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

Их лучше будет закрыть под тегами noindex и атрибутом nofollow. 30-50 уже много.

 

[Denis1987]

Недавно случайно наткнулся на этот плагин, только не смогу вспомнить где именно.

 

[Mar$hall]

Недавно случайно наткнулся на этот плагин, только не смогу вспомнить где именно.

я нашел решение задачи, вроде все хорошо получилось. Спасибо всем за помощь