Виджет для магазина GameStores (информация) #2

[7erGO]

Доброго времени суток.

Делаю подобное впервые, строго не судите (в теории задуманного очень много, на практике делаю лишь второй образец).
Меньше слов, больше дела.
Сейчас я покажу как можно сделать вот такой виджет:

Спойлер: посмотреть скрин

В закрытом виде:

В открытом виде:

Да, этот виджет смотрится проще и скучнее чем прошлый, но всёже я практикую разные вариации, развиваюсь так сказать. И я считаю что на каждую позицию найдется тот, кому понравится.

Приступим к установке.

Установка данного виджета очень проста. Для этого Вам нужно просто перейти в раздел "Внешний вид", далее нажать на "Виджеты", "Добавить виджет". Выбрать тип "Пользовательский виджет" и вставить в него следующий код:

Спойлер: посмотреть код

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 100%;font-size: 29px;font-weight: 800;">
    НАШИ СОЦ.СЕТИ
  </button>
  <div class="dropdown-menu btn btn-secondary">
    <a class="dropdown-item btn btn-primary" style="width: 100%; padding: 1rem;" href="#">Группа в вк</a><br><br>
    <a class="dropdown-item btn btn-primary" style="width: 100%; padding: 1rem;" href="#">Группа в steam</a><br><br>
    <a class="dropdown-item btn btn-primary" style="width: 100%; padding: 1rem;" href="#">Наш дискорд</a><br><br>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item btn btn-primary" style="width: 100%; padding: 1rem;" href="#">Наш YouTube канал</a>
  </div>
</div>
<br>
<br>

где href="#" отвечает за ссылку, ссылку ставить вместо #

Изменение цвета кнопки происходит точно также как и в прошлом моем посте который можно посмотреть вот тут: КЛАЦ

 

[vintem87]

скрины не работают