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

Mar$hall

Специалисты
Регистрация
12 Фев 2016
Сообщения
231
Приветствую, уважаемые форумчане!

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



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

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

Emblema

Профессионалы
Регистрация
2 Май 2013
Сообщения
585
Можно ссылку на сайт? Можно под хайдом.
 

Emblema

Профессионалы
Регистрация
2 Май 2013
Сообщения
585
На сайт, откуда взяли блок.
 

Emblema

Профессионалы
Регистрация
2 Май 2013
Сообщения
585
Вот собственно код этого блока:

HTML:
<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

Профессионалы
Регистрация
2 Май 2013
Сообщения
585
Но как я понял тут плагин стоит виджета. Легче найти этот виджет в нете.
 

Mar$hall

Специалисты
Регистрация
12 Фев 2016
Сообщения
231
скопировать код не составляет труда, при этом проблема только в том что на моем сайте текст залезает под картинку.


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

Mar$hall

Специалисты
Регистрация
12 Фев 2016
Сообщения
231
Но как я понял тут плагин стоит виджета. Легче найти этот виджет в нете.
я пытался найти что-то похожее, но результатов нет
 

Mar$hall

Специалисты
Регистрация
12 Фев 2016
Сообщения
231
Для этого используются атрибуты css Float и Clear
я конечно далек от знания кодов, но в случае с указанные выше кодом как использовать эти атрибуты тут?
HTML:
<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>
 

Mar$hall

Специалисты
Регистрация
12 Фев 2016
Сообщения
231
Например:

Код:
li.offer>img {float: left;}
В общем, все получилось. Спасибо что указали правильные пути решения этой задачи.

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

Void

Виртуозы
Регистрация
2 Фев 2013
Сообщения
528,854
Появился вопрос касательно ссылок на другие ресурсы, есть ли смысл или необходимость заключать ссылки в тег <noindex> ?
Я на своем блоге поставил плагин ( Для Джумла ), который берет все внешние ссылки в тег noindex и добавляет атрибут nohref , но это по желанию конечно. Ссылки не вредят сайту, если они тематические, не купленные и их не очень очень много.
 

Mar$hall

Специалисты
Регистрация
12 Фев 2016
Сообщения
231
Ссылки не вредят сайту, если они тематические, не купленные и их не очень очень много.
уточните много это сколько? в сайдбаре примерно будет 30-50 внешних ссылок, большая часть из которых будет меняться
 

Void

Виртуозы
Регистрация
2 Фев 2013
Сообщения
528,854
уточните много это сколько? в сайдбаре примерно будет 30-50 внешних ссылок, большая часть из которых будет меняться
Их лучше будет закрыть под тегами noindex и атрибутом nofollow. 30-50 уже много.
 

Denis1987

Пользователи
Регистрация
14 Май 2016
Сообщения
24
Недавно случайно наткнулся на этот плагин, только не смогу вспомнить где именно.
 

Mar$hall

Специалисты
Регистрация
12 Фев 2016
Сообщения
231
Недавно случайно наткнулся на этот плагин, только не смогу вспомнить где именно.
я нашел решение задачи, вроде все хорошо получилось. Спасибо всем за помощь
 
Сверху