Chia sẻ Code Widget Thông Báo cho Median UI 1.7

Bạn đã biết cách thêm Pop Up thông báo cho Median UI v1.7 chưa??

Xin chào các bạn đã quay trở lại với Blogger Của Chỉnh. Mình nhận thấy bây giờ khá là ít tài liệu cho Median Ui v1.7 nên hôm nay mình chia sẻ cho các bạn Pop Up Thông Báo cho các bạn nhé. Mình sẽ hướng dẫn một cách ngắn gọn nhất cho các bạn hiểu nhé.

Xàm lìn chém gió

Code này mình cũng đi rip về thôi :)). Mình cũng thử decor lại code từ phiên bản 1.6 nhưng lỗi tùm lum nên mình quyết định rip cho nhanh.

Mình vừa rip vừa test và đây là bản ít lỗi nhất

Hướng dẫn

Đăng nhập vào trang Blog mà bạn muốn cài đặt (trang đó phải sử dụng template Median UI v1.7)
Sau đó bạn vào mục Chủ đề, sau đó chọn vào nút mũi tên và nhấn vào Chỉnh sửa HTML
Cái này cũng sử dụng Font Awesome v5 nha, bạn nào cài rồi thì thôi còn bạn nào chưa thì copy link thư viện awesome vào thẻ <html> hoặc thẻ <head>
```
<link href='https://cdn.leanhduc.pro.vn/font-awesome/pro-5.15.3/css/all.css' rel='stylesheet' type='text/css'/>
```

Đầu tiên bạn thêm icon thông báo vào blog bằng cách tìm đến thẻ <b:defaultmarkup type='Common'> và dán mã sau vào trong thẻ đó

<!-- notif icon -->
      <b:includable id='notif-icon'>
        <svg viewBox='0 0 24 24'><g><path d='m13.5 4.18c-.276 0-.5-.224-.5-.5v-1.68c0-.551-.449-1-1-1s-1 .449-1 1v1.68c0 .276-.224.5-.5.5s-.5-.223-.5-.5v-1.68c0-1.103.897-2 2-2s2 .897 2 2v1.68c0 .277-.224.5-.5.5z'/></g><g><path d='m12 24c-1.93 0-3.5-1.57-3.5-3.5 0-.276.224-.5.5-.5s.5.224.5.5c0 1.378 1.122 2.5 2.5 2.5s2.5-1.122 2.5-2.5c0-.276.224-.5.5-.5s.5.224.5.5c0 1.93-1.57 3.5-3.5 3.5z'/></g><g><path d='m20.5 21h-17c-.827 0-1.5-.673-1.5-1.5 0-.439.191-.854.525-1.14 1.576-1.332 2.475-3.27 2.475-5.322v-3.038c0-3.86 3.14-7 7-7 3.86 0 7 3.14 7 7v3.038c0 2.053.899 3.99 2.467 5.315.342.293.533.708.533 1.147 0 .827-.672 1.5-1.5 1.5zm-8.5-17c-3.309 0-6 2.691-6 6v3.038c0 2.348-1.028 4.563-2.821 6.079-.115.098-.179.237-.179.383 0 .276.224.5.5.5h17c.276 0 .5-.224.5-.5 0-.146-.064-.285-.175-.38-1.796-1.519-2.825-3.735-2.825-6.082v-3.038c0-3.309-2.691-6-6-6z'/></g></svg>
      </b:includable>

Bạn cũng có thể thay đổi mã svg này nếu bạn thích

Tiếp theo, bạn thêm icon vào header bằng cách tìm đến thẻ <b:section id='header-icon', bạn thay đổi hàm maxwidgets='+ 1 vào đây', bạn thêm thẻ sau <b:widget-setting name='item-1'>Notification</b:widget-setting> vào bên dưới thẻ <b:widget-setting name='shownum'/>, cuối cùng bạn thêm thẻ sau
```

                        <label aria-label='Notification' class='popup-notif sha bc fc ic op i20 noJava' for='ntfCheck'>
  							<b:include name='notif-icon'/>
    </label>
```
vào bên dưới thẻ <b:loop index='icon' values='data:items' var='item'>
Thay đổi thẻ mà mình sắp xếp thành số mà bạn yêu thích miễn là nó trong trong khoảng từ 0-(số mà bạn đã cài đặt ở thẻ nhưng phải -1). Đây là sắp xếp icon trên header bạn xem hình ảnh bên dưới nhé

Sau đó bạn tìm đến thẻ </b:skin> và dán code sau vào trước thẻ đó

/* CSS Popup Notification */ .popup-ntf:before{content:attr(data-text);font-size:11px;line-height:18px;padding:0 5px;border-radius:10px;background:#e6e6e6;color:var(--bodyC);position:absolute;top:-5px;right:-2px;z-index:89001}.ntf-frame{position:fixed;top:-5px;right:25px;background:var(--contentBg);border-radius:16px 5px 16px 16px;width:350px;max-height:calc(100% - 120px);box-shadow:0 10px 25px -3px rgba(0,0,0,.1);transition:var(--trans-4);z-index:89001;opacity:0;visibility:hidden;display:flex;flex-direction:column}#ntfCheck:checked ~ .ntf-frame{top:60px;opacity:1;visibility:visible}#ntfCheck:checked ~ .ntf-close{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99}.ntf-header{padding:12px 16px 6px 16px;display:flex;justify-content:space-between;align-items:center;border-radius:16px 5px 0 0}.fa-bell{opacity:.6}.ntf-list{flex:1;overflow:auto}.ntf-ul{margin:0;padding:8px 5px 8px 16px;list-style:none}.ntf-ul li{margin-bottom:15px}.ntf-info{display:flex;justify-content:space-between;align-items:center}.ntf-menu-label{flex-shrink:0;display:flex;width:35px;height:35px;justify-content:center;align-items:center;border-radius:50rem;opacity:.8;transition:all 0.6s ease;cursor:pointer}.ntf-menu-label:hover{background:#e9e9e9}.ntf-title{font-size:14px;margin-bottom:5px;font-weight:600}.ntf-time{opacity:.8;font-size:90%}.ntf-content{max-height:0;overflow:hidden;opacity:.8;line-height:1.5;transition:var(--trans-2)}.ntf-menu:checked ~ .ntf-content{max-height:100vh}.nB[data-theme=dark] .ntf-frame{background:var(--darkBg-sec);box-shadow:0 10px 40px rgba(0,0,0,.2)}.nB[data-theme=dark] .ntf-menu-label:hover{background:rgba(0,0,0,.15)}.Rtl .ntf-frame{left:25px;right:auto;border-radius:5px 16px 16px 16px}.Rtl .ntf-ul{padding:8px 16px 8px 5px}@media screen and (max-width:480px){.ntf-frame,.Rtl .ntf-frame{left:10px;right:10px;width:auto;border-radius:16px}#ntfCheck:checked ~ .ntf-frame{top:75px}#ntfCheck:checked ~ .ntf-close{background:rgba(0,0,0,.2);backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter: saturate(180%) blur(10px);}.ntf-frame:before{content:'';font-family:'Font Awesome 5 Pro';position:fixed;font-size:25px;width:50px;height:50px;background:var(--contentBg);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M12.9,7.3c-0.2,0-0.3-0.1-0.3-0.3V6c0-0.3-0.3-0.6-0.6-0.6S11.4,5.7,11.4,6v1c0,0.2-0.1,0.3-0.3,0.3 c-0.2,0-0.3-0.1-0.3-0.3V6c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v1C13.2,7.2,13.1,7.3,12.9,7.3z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M12,19.2c-1.2,0-2.1-0.9-2.1-2.1c0-0.2,0.1-0.3,0.3-0.3s0.3,0.1,0.3,0.3c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5 c0-0.2,0.1-0.3,0.3-0.3s0.3,0.1,0.3,0.3C14.1,18.3,13.2,19.2,12,19.2z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M17.1,17.4H6.9C6.4,17.4,6,17,6,16.5c0-0.3,0.1-0.5,0.3-0.7c0.9-0.8,1.5-2,1.5-3.2v-1.8c0-2.3,1.9-4.2,4.2-4.2 s4.2,1.9,4.2,4.2v1.8c0,1.2,0.5,2.4,1.5,3.2c0.2,0.2,0.3,0.4,0.3,0.7C18,17,17.6,17.4,17.1,17.4z M12,7.2c-2,0-3.6,1.6-3.6,3.6v1.8 c0,1.4-0.6,2.7-1.7,3.6c-0.1,0.1-0.1,0.1-0.1,0.2c0,0.2,0.1,0.3,0.3,0.3h10.2c0.2,0,0.3-0.1,0.3-0.3c0-0.1,0-0.2-0.1-0.2 c-1.1-0.9-1.7-2.2-1.7-3.6v-1.8C15.6,8.8,14,7.2,12,7.2z'/%3E%3C/g%3E%3C/svg%3E");display:flex;justify-content:center;align-items:center;border-radius:35%;top:-65px;left:50%;transition:var(--trans-4);transform:translate(-50%,0)}#ntfCheck:checked ~ .ntf-frame:before{top:15px}.ntf-frame:after{content:'';position:fixed;border:8px solid;border-color:transparent transparent var(--contentBg) transparent;top:-20px;left:50%;transition:var(--trans-4);transform:translate(-50%,0)}#ntfCheck:checked ~ .ntf-frame:after{top:60px}.nB[data-theme=dark] .ntf-frame:before{background:var(--darkBg-sec);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M17.7,15.8c-0.9-0.8-1.5-2-1.5-3.2v-1.8c0-1.9-1.3-3.5-3-4V6c0-0.7-0.5-1.2-1.2-1.2S10.8,5.3,10.8,6v0.8 c-1.7,0.5-3,2.1-3,4v1.8c0,1.2-0.5,2.4-1.5,3.2C6.1,16,6,16.2,6,16.5c0,0.5,0.4,0.9,0.9,0.9h3c0.2,1,1,1.8,2.1,1.8s1.9-0.8,2.1-1.8 h3c0.5,0,0.9-0.4,0.9-0.9C18,16.2,17.9,16,17.7,15.8z M11.4,6c0-0.3,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v0.7c-0.2,0-0.4-0.1-0.6-0.1 s-0.4,0-0.6,0.1V6z M12,18.6c-0.7,0-1.3-0.5-1.5-1.2h2.9C13.3,18.1,12.7,18.6,12,18.6z M17.1,16.8H6.9c-0.2,0-0.3-0.1-0.3-0.3 c0-0.1,0-0.2,0.1-0.2c1.1-0.9,1.7-2.2,1.7-3.7v-1.8c0-1.7,1.1-3.1,2.7-3.5c0,0,0,0,0.1,0c0,0,0,0,0.1,0c0.2-0.1,0.5-0.1,0.8-0.1 s0.5,0,0.8,0.1c0,0,0.1,0,0.1,0c0,0,0,0,0.1,0c1.5,0.4,2.7,1.8,2.7,3.5v1.8c0,1.4,0.6,2.7,1.7,3.7c0.1,0.1,0.1,0.1,0.1,0.2 C17.4,16.7,17.3,16.8,17.1,16.8z'/%3E%3C/g%3E%3C/svg%3E%0A");}.nB[data-theme=dark] .ntf-frame:after{border-color:transparent transparent var(--darkBg-sec) transparent} .ntf-content .fa-info-circle{color:var(--linkB)}.nB[data-theme=dark] .ntf-content .fa-info-circle{color:var( --darkU)}}}

Sau đó bạn lưu lại, bạn quay lại phần Bố cục, ở phần settings-id bạn thêm 1 tiện ích HTML/JavaScript Sau khi xong bạn bỏ không phần tiêu đề và dán code sau vào phần nội dung

<input class="hidden" id="ntfCheck" type="checkbox" />

<label class="ntf-close" for="ntfCheck"></label>

<div class="ntf-frame">
<div class="ntf-header">
<h6>Thông báo</h6>
<a href="https://www.blogger.com/follow.g?blogID=1687042985594357377" target="_blank" title="Follow để nhận thông báo về bài viết mới nhất!">
<i class="fad fa-bells" style="font-size: 26px;color: var(--themeLink)"></i>
</a>
</div>
<div class="ntf-list">
<ul class="ntf-ul">
<!-- noti 3 -->
<li>
<input class="ntf-menu hidden" id="ntf-6" type="checkbox" />
<div class="ntf-info">
<div>
<div class="ntf-title">Tiêu đề</div>
<span class="ntf-time">ngày/tháng/năm</span>
</div>
<label class="ntf-menu-label" for="ntf-6"><i class="fad fa-eye"></i></label>
</div>
<div class="ntf-content">
<p>
Nội dung
</p>
</div>
</li>
<!-- noti 2 -->
<li>
<input class="ntf-menu hidden" id="ntf-6" type="checkbox" />
<div class="ntf-info">
<div>
<div class="ntf-title">Tiêu đề</div>
<span class="ntf-time">ngày/tháng/năm</span>
</div>
<label class="ntf-menu-label" for="ntf-6"><i class="fad fa-eye"></i></label>
</div>
<div class="ntf-content">
<p>
Nội dung
</p>
</div>
</li>
<!-- noti 1 -->
<li>
<input class="ntf-menu hidden" id="ntf-5" type="checkbox" />
<div class="ntf-info">
<div>
<div class="ntf-title">Tiêu đề</div>
<span class="ntf-time">ngày/tháng/năm</span>
</div>
<label class="ntf-menu-label" for="ntf-5"><i class="fad fa-eye"></i></label>
</div>
<div class="ntf-content">
<p>
Nội dung
</p>
</div>
</li>
</ul></div></div>

Thay đổi những nội dung mà mình đánh dấu thành nội dung mà bạn thích
• Thay đổi id blog thành id blog của bạn nhé

Sau khi làm xong bạn lưu lại nhé, như vậy là xong

Lời kết

Như vậy mình đã chia sẻ cho bạn code cho Popup Widget Thông Báo cho blog của bạn rồi. Chúc bạn thành công

Code mà mình chia sẻ cho bạn là mình đã rip lại từ Blog khác có lúc nó lỗi này nọ. Mong bạn bỏ qua nhé .

Tham khảo thêm :

Life is not fair - get used to it!

19 nhận xét

- Không spam, giữ văn minh nơi công cộng
- Ngoan ngoãn, lễ phép :))
- Sử dụng [image]...[/image] để chèn hình ảnh, [youtube]...[/youtube] để chèn video diu túp.

Tên bth 08:51 2/5/24 08:51 2/5/24

vip x2
Tên bth 09:19 2/5/24 09:19 2/5/24

cỏ vẻ như từ 1 khung notifi nhân lên thành 3 cái rồi =D
1. Nguyễn Bá Chỉnh ☭ ™︎ 19:00 4/5/24 19:00 4/5/24
  
  sao lại thế ạ
2. Tên bth 20:02 4/5/24 20:02 4/5/24
  
  mik cng chịu luôn á, cài kiểu gì cũng vậy à
3. Nguyễn Bá Chỉnh ☭ ™︎ 20:07 4/5/24 20:07 4/5/24
  
  bạn xóa bớt notification ở tiện ích setting-icon thử xem
4. Tên bth 07:55 5/5/24 07:55 5/5/24
  
  mik xóa kiểu gì cũng vậy à(thậm chí disable cũng vậy luôn)
5. Tên bth 07:55 5/5/24 07:55 5/5/24
  
  mik xóa kiểu gì cũng vậy à(thậm chí disable cũng vậy luôn)
6. Tên bth 08:13 5/5/24 08:13 5/5/24
  
  à bạn sửa lại đoạn thêm code dưới thẻ b:loop thành bên trên nha, bên dưới là nhân ra nhiều á
7. Nguyễn Bá Chỉnh ☭ ™︎ 08:58 5/5/24 08:58 5/5/24
  
  mình để nó ở dưới nhưng không bị làm sao
Tên bth 09:35 5/5/24 09:35 5/5/24

mik cng không bt nữa nhưng chắc tùy vào template á
Tuong Duy Anh 18:45 26/5/24 18:45 26/5/24

Tăng mắt xem kiểu gì vậy
1. Nguyễn Bá Chỉnh ☭ ™︎ 13:44 27/5/24 13:44 27/5/24
  
  ib fb mình chỉ chi tiết nhé
2. Tuong Duy Anh 15:49 27/5/24 15:49 27/5/24
  
  link fb là gì
3. Nguyễn Bá Chỉnh ☭ ™︎ 19:15 27/5/24 19:15 27/5/24
  
  ở trên thumnail mỗi bài viết hoặc widget socail dưới chân trang có đấy ạ
4. Tuong Duy Anh 20:50 27/5/24 20:50 27/5/24
  
  tự dưng đang trả lời bình luận, bình luận xong cái bài viết mất hết nội dung, là như nào nhỉ =))
Nguyễn Bá Chỉnh ☭ ™︎ 21:03 27/5/24 21:03 27/5/24

Chắc do xung đột code gì đó ạ, bạn kiểm tra xem có lỗi ở đâu không, mình cũng gặp nhiều rồi
Tên bth 21:33 24/6/24 21:33 24/6/24

bạn làm phần "Bạn biết thêm popup chưa" mờ mờ kiểu gì vậy?
1. Nguyễn Bá Chỉnh ☭ ™︎ 22:52 24/6/24 22:52 24/6/24
  
  Bạn có thể môt tả thêm không hoặc gửi link ảnh để mình biết, hơi khó hiểu
2. Tên bth 09:13 25/6/24 09:13 25/6/24
  
  hình mik gửi qua dis rồi á

Chỉnh

Bình luận

Thông báo

Chia sẻ Code Widget Thông Báo cho Median UI 1.7

Xàm lìn chém gió

Hướng dẫn

Lời kết

Nhúng video từ Youtube

Đặt liên kết bạn bè phát triển blog

Share code widget bạn bè cho blogspot

Template Median UI v1.7 (Edit)

Nguyễn Bá Chỉnh

Partner

Tools

Main category

Sub category