Cách đặt thanh thông báo nằm trên thanh tiêu đề trong Template Median UI 1.7

Mặc định trong Template Median UI 1.7 thì thanh thông báo nằm dưới thanh tiêu đề, hôm nay mình sẽ cho nó nằm bên trên...

Cách đặt thanh thông báo nằm trên thanh tiêu đề trong Template Median UI 1.7:

Bước 1: Sao chép và dán đoạn code dưới đây lên trên thẻ ]]></b:skin>

/* CSS đặt thông báo nằm trên thanh tiêu đề */
.ntfC{display:flex;align-items:center;position:relative;min-height:53px;background:#e8f0fe;color:#3c4043;padding:10px 25px;font-size:13px;transition:all .1s ease;overflow:hidden;z-index:3}
.ntfC .secIn{width:100%;position:relative}
.ntfC .c{display:flex;align-items:center}
.ntfT{width:100%;padding-right:15px;text-align:center}
.ntfT a{color:#f89000;font-weight:700}
.ntfI:checked ~ .ntfC{height:0;min-height:0;padding:0;opacity:0;visibility:hidden}
.ntfA{display:inline-flex;align-items:center;justify-content:center;text-align:initial}
.ntfA >a{flex-shrink:0;white-space:nowrap;display:inline-block;margin:0 10px;padding:8px 12px;border-radius:3px;background:#f89000;color:#fffdfc;font-size:12px;font-weight:400;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);text-decoration:none}
.ntfC .c::after{content:'\2715';line-height:18px;font-size:14px}
@media screen and (max-width:896px){.ntfC{padding-left:20px;padding-right:20px}}
.drK .ntfC{background:#2d2d30;color:#989b9f}

Bước 2: Sao chép và dán đoạn code dưới đây lên trên thẻ <header

<!--[ Notification ]-->
        <b:section cond='!data:view.isPreview' id='notif-widget' maxwidgets='1' showaddelement='false'>
          <b:widget id='HTML0' locked='true' title='Notification' type='HTML' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='content'>&lt;div class=9;ntfA&#39;&gt; 
 &lt;span&gt;

grup whatsapp indonesian members only
&lt;br /&gt;
&lt;div style=9;text-align:center;&#39;>;&lt;a href=&#39;https://chat.whatsapp.com/GBv3laCcZJjDEQ1TrXZuGB&#39; target=&#39;_blank9; rel=&#39;nofollow noopener noreffer&#39;&gt;Join Now&lt;/a&gt;&lt;/div&gt;

&lt;/span&gt; 
&lt;/div&gt;</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
              <input class='ntfI hidden' id='forNft' type='checkbox'/>
              <div class='ntfC'>
                <div class='ntfT'><data:content/></div>
                <label aria-label='Close Menu' class='c' for='forNft'/>
              </div>
            </b:includable>
          </b:widget>
        </b:section>

>

Lưu lại và xem kết quả thôi !!

Lời kết:

Nếu thấy hay thì cho mình xin 1 cảm nhận và 1 nhận xét nhé!