Hưỡng Dẫn Cách Bạn Bật Header Notification Trên Template Median UI

Chào các bạn dạo gần đây các bạn hay thắc mắc là làm sao bật được thanh thông báo trên header web thì sau đây mình sẽ hưỡng dẫn nhẹ nhàng cho anh em nhé

Cách bật Header Notifitication

Bước 1: Vào phần bố cục:

Bước 2: Các bạn sẽ thấy Widget với tên là Header Notification

Bước 3: Nhấn vào icon cây bút sau đó dán mã HTML dưới đây vào

<div class='notifAlt'><p>/* Điền nội dung vào đây*/</p><a href='*/ Điền cái link vào đây nè */'/>

Cách Thêm Widget Header Notification

Cách này áp dụng cho các bạn nào không tải Template từ nhà xuất bản

Chèn mã này lên đầu widget Header1

<b:widget id='HTML0' locked='true' title='Header Notification' type='HTML' version='2' visible='false'>
              <b:widget-settings>
                <b:widget-setting name='content'></b:widget-setting>
              </b:widget-settings>
              <b:includable id='main'>
                <input class='notifInput hidden' id='offnotif-box' type='checkbox'/>
                <div class='notifContent'>
                  <div class='notifText'><data:content/></div>
                  <label for='offnotif-box'><b:include name='close-icon'/></label>
                </div>
              </b:includable>
            </b:widget>

Sau đó chèn mã CSS này lên trên thẻ ]]></skin>

/* Header Notification */
.notifContent{display:flex;align-items:center;position:relative;background-color:var(--notif-bg);color:var(--notif-color);padding:10px 25px;font-size:90%;line-height:normal;-webkit-transition:var(--transition-1);transition:var(--transition-1);overflow:hidden}
.notifContent label{margin-left:auto;display:flex;align-items:center}
.notifContent label svg.line{width:20px;height:20px;stroke:var(--notif-color)}
.notifText{width:calc(100% - 20px);padding-right:12px}
.notifInput:checked ~ .notifContent{height:0;padding-top:0;padding-bottom:0;opacity:0;visibility:hidden}
.notifAlt{display:flex;align-items:center;justify-content:space-between}
.notifAlt a{flex-shrink:0;white-space:nowrap;display:block;margin-left:10px;padding:8px 12px;border-radius:3px;background-color:#fff;font-size:12px;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%)}

Sau đó lưu lại và làm theo bước ở bên trên