Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

CSS + html код банера для сайдбара в WordPress

  1. Почнемо по порядку.

Почав доробляти свій блог і вирішив, що треба як то красиво повідомляти людям про важливі події

Почав доробляти свій блог і вирішив, що треба як то красиво повідомляти людям про важливі події.

Пошукав плагіни для WordPress і зрозумів: «Хочеш що б було якісно і красиво зроби сам»

Зробив нескладний html код банера, додав css стилі і вийшов у мене зручний, редагований блок який підлаштовується під висоту і ширину сайдбара.

Потім подумав що його можна використовувати і в основний структурі блогу для виведення важливих повідомлень.

Почнемо по порядку.

Ось так виглядає приклад даного банера:

Ось так виглядає приклад даного банера. Тут показані всі типи текстів які ви можете використовувати і показана кнопка.

Що б додати собі такий же банер необхідно зайти Зовнішній вигляд => Редактор і знайти там файл style.css від оформлення яке у Вас встановлена.

І додати туди цей код

  1. / * ------------------------------------------------ ------------------------ * /
  2. / * BOX INFO by InfoBloger.pro Автор: Казанцев Сергій
  3. / * ------------------------------------------------ ------------------------ * /
  4. # Box-info {
  5. position: relative;
  6. padding: 10px;
  7. font-family: Tahoma;
  8. border: 2px dashed #fff;
  9. -webkit-border-radius: 8px;
  10. -khtml-border-radius: 8px;
  11. -moz-border-radius: 8px;
  12. border-radius: 8px;
  13. background: # d75a4b;
  14. }
  15. # Box-info .text-w {
  16. text-align: center;
  17. color: #fff;
  18. text-shadow: 1px 1px # 222;
  19. font-size: 19px;
  20. font-weight: 500;
  21. padding-bottom: 10px;
  22. padding: 0;
  23. margin: 0;
  24. }
  25. # Box-info .subtitle {
  26. text-align: center;
  27. color: #fff;
  28. text-shadow: 1px 1px # 000;
  29. font-size: 33px;
  30. opacity: 0.4;
  31. padding: 0;
  32. margin: 0;
  33. }
  34. # Box-info .title {
  35. text-align: center;
  36. color: #fff;
  37. font-weight: 500;
  38. opacity: 0.2;
  39. text-shadow: 2px 2px # 000;
  40. font-size: 85px;
  41. line-height: 93px;
  42. padding: 0;
  43. margin: 0;
  44. }
  45. # Box-info .text {
  46. text-align: center;
  47. text-shadow: 0px 0px # 000;
  48. color: #fff; font-size: 20px;
  49. padding: 0;
  50. margin: 0;
  51. }
  52. # Box-info .text-b {
  53. text-align: center;
  54. color: # 222;
  55. text-shadow: 0px 0px # 000;
  56. font-size: 13px;
  57. line-height: 15px;
  58. padding: 0;
  59. margin: 0;
  60. }
  61. # Box-info .kn {
  62. width: 90%;
  63. padding: 5px 8px;
  64. background-color: # fff1ba;
  65. border: 1px solid # ffcc00;
  66. font-size: 16px;
  67. color: # 222;
  68. text-align: center;
  69. border-radius: 5px;
  70. -moz-border-radius: 5px;
  71. -webkit-border-radius: 5px;
  72. }
  73. # Box-info .kn: hover {
  74. width: 90%;
  75. padding: 5px 8px;
  76. background-color: # fb784a;
  77. border: 1px solid # ff4200;
  78. font-size: 16px;
  79. color: # 222;
  80. }
  81. / * ------------------------------------------------ ------------------------ * /
  82. / * Кінець BOX INFO by InfoBloger.pro Автор: Казанцев Сергій
  83. / * ------------------------------------------------ ------------------------ * /

Потім зайти в Зовнішній вигляд => Віджети і вибрати віджет «Текст» під ним підписано Довільний текст або HTML-код і вставити туди цей код

  1. <Div id = "box-info">
  2. <Div class = "text-w"> Текст 1 </ div>
  3. <Div class = "subtitle"> Текст 2 </ div>
  4. <Div class = "title"> Текс 3 </ div>
  5. <Div class = "text"> Текст 4 </ div>
  6. <Div class = "text-b"> Тест 5 </ div>
  7. <a href="#"> <div class = "kn"> Кнопка </ div> </a>
  8. </ Div>

Редагуючи текст, Ви отримаєте необхідний Вам результат

(Всього відвідувачів: 26, сьогодні: 1)

Новости

Как сделать красивую снежинку из бумаги
Красивые бумажные снежинки станут хорошим украшением дома на Новый год. Они создадут в квартире атмосферу белоснежной, зимней сказки. Да и просто занимаясь вырезанием из бумаги снежинок разнообразной

Пиротехника своими руками в домашних
Самые лучшие полезные самоделки рунета! Как сделать самому, мастер-классы, фото, чертежи, инструкции, книги, видео. Главная САМОДЕЛКИ Дизайнерские

Фольгированные шары с гелием
Для начала давайте разберемся и чего же выполнен фольгированный шар и почему он летает дольше?! Как вы помните, наши латексные шарики достаточно пористые, поэтому их приходится обрабатывать специальным

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

2400 наименований пиротехники
В последние десятилетия наша страна может похвастаться появлением нескольких десятков отечественных производителей, специализирующихся на выпуске пиротехники. Если вы сомневаетесь, какой фейерверк заказать,

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

Надувные шарики с гелием с доставкой
На праздники часто бывают востребованы воздушные шарики, надутые гелием. Обычно, их покупают уже готовыми (надутыми) и привозят на праздник. Или, приглашают специалистов, которые приезжают и надувают

Аниматоры на детские праздники в Зеленограде
Уж сколько раз твердили миру…Что готовиться ко дню рождения нужно заранее, а не бегать в предпраздничный день угорелой кошкой. Нельзя впихнуть в 24 часа дела, рассчитанные на недели. К празднику нужно