Hướng dẫn thêm widget thông báo cho template Median

Hướng dẫn thêm widget thông báo cho template Median

Trà Đá 29
21 Views

Hê lô các bạn, những ngày qua các mình nhận được rất nhiều yêu cầu về hướng dẫn cách thêm widget thông báo trên header. Chính vì vậy hôm nay mình sẽ hướng dẫn các bạn cách tạo thông báo như blog của mình.

Hướng dẫn thêm widget thông báo cho template Median 1.6

Hướng dẫn bên dưới đây là hướng dẫn chi tiết cho template Median 1.6 và Median 1.5, các template khác có thể dựa vào một số phần ở hướng dẫn bên dưới để tạo widget thông báo cho blog của mình.

Hướng dẫn:

Template Median UI 1.6

Bước 1: Thêm icon thông báo vào thanh header

  1. Tìm thẻ </b:defaultmarkup> và thêm svg icon thông báo sau vào trước thẻ đóng đó. 
    <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'>
      </path>
    </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'>
      </path>
    </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'>
      </path>
    </g>
  </svg>
</b:includable>
  2. Tìm section sau trong template <b:section class='headP' id='header-icon' maxwidgets='2' showaddelement='false'>
  3. Kéo xuống 1 chút sẽ thấy thẻ <ul class='headIc'>. Các bạn tìm thẻ <b:if đầu tiên và sửa 2 thành 3 sau đó thêm đoạn code bên dưới vào sau thẻ </li> đầu tiên 
    <b:elseif cond='data:item == &quot;Notification&quot;' />
<li>
  <b:class cond='data:item == &quot;Notification&quot;' name='isNtf' />
  <label expr:aria-label='data:item' class="popup-notif tIc bIc" for='wcCheckPop'>
    <b:include name='notif-icon' />
  </label>
</li>
  4. Sau đó các bạn kéo lên trên phần <b:widget-settings> và chỉnh sửa một số setting như sau: 
    <b:widget-settings>
  <b:widget-setting name='shownum'>4</b:widget-setting>
  <b:widget-setting name='sorting'>NONE</b:widget-setting>
  <b:widget-setting name='item-3'>Notification</b:widget-setting>
  <b:widget-setting name='item-2'>Profile</b:widget-setting>
  <b:widget-setting name='item-1'>Search</b:widget-setting>
  <b:widget-setting name='item-0'>Dark</b:widget-setting>
</b:widget-settings>
  5. Các bạn có thể chỉnh sửa số thứ tự của item-i để đổi vị trí các icon trên header
  6. Phần này hơi phức tạp nên mình để một số hình ảnh minh họa ở bên dưới nhé
    Construction of New Highway
    Construction of New Highway

Bước 2: Thêm HTML Popup thông báo

Các bạn thêm đoạn HTML sau vào sau thẻ <body> vậy là xong bước này. 

<!-- [ PopUp Notification ] -->
  <input id='wcCheckPop' type='checkbox' />
  <div class='wcNotif'>
    <label class='wcNotifClose' for='wcCheckPop'>
    </label>
    <div class='wcNotifStart'>
      <ul>
        <!-- noti thông báo -->
        <li style="border: 1px solid;display: flex;border-radius: 12px;flex-direction: row;margin-bottom:10px">
          <p style="width: 70%;text-align: center;">Ấn vào nút chuông để nhận thông báo bài viết mới nhất
          </p>
          <div class="followBLog" onclick='window.open("https://www.blogger.com/follow.g?blogID=blog-id")'>
            <i class="fad fa-bells"></i>
          </div>
        </li>
        <!-- noti 2 -->
        <li>
          <i><!--Ngày/tháng/năm--></i> - <!-- Tiêu đề -->
          <input class='wcPopMenu' id='pop-menu2' name='multi-popup' type='checkbox' />
          <label class='wcPopMore' for='pop-menu2'>
            <span class='more'>Xem thêm</span>
          </label>
          <div class='content'>
            <!-- Thêm chi tiết ở đây -->
          </div>
        </li>
        <!-- noti 1 -->
        <li>
          <i><!--Ngày/tháng/năm--></i> - <!-- Tiêu đề -->
          <input class='wcPopMenu' id='pop-menu1' name='multi-popup' type='checkbox' />
          <label class='wcPopMore' for='pop-menu1'>
            <span class='more'>Xem thêm</span>
          </label>
          <div class='content'>
            <!-- Thêm chi tiết ở đây -->
          </div>
        </li>
      </ul>
    </div>
  </div>
  <label class='fullClose' for='wcCheckPop'>
  </label>
  <script type='text/javascript'>
    //<![CDATA[
      document.addEventListener("DOMContentLoaded", () => {
        document.querySelector('.popup-notif').dataset.text = document.querySelector('.wcNotifStart > *').childElementCount
      });
    //]]>
  </script>
<!-- [ End Notification ] -->

Bước 3: Thêm CSS

Bên dưới đây là CSS của popup, các bạn dán vào phần css của template và chỉnh sửa các thông báo rồi lưu template là xong 

/* --- CSS Popup Notification --- */
#totalNotif_top{position:absolute;top:-9px;left:9px;font-size:8px;font-weight:900;color:white;background:rgb(242 22 22);padding:3px 4px;border-radius:30px;animation:text-flicker 4s linear infinite}
label.popup-notif.tIc.bIc::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: 2;}
header .navicon .popup-notif{margin-left:12px;position:relative}
.wcIconNotif{position:relative;width:35px;height:35px;display:flex;left:-10px}
.wcIconNotif path{fill:#444}
.wcIconNotif:before{content:attr(aria-label);position:relative;display:flex;*padding:5px;font-size:8px;width:15px;height:15px;background-color:#e40101;color:#fefefe;justify-content:center;align-items:center;border-radius:50%;position:relative;top:-10px;left:26px;animation:flicker 4s linear infinite}
.followBLog{background:linear-gradient(135deg,rgb(32 167 246),rgb(115 190 243));color:#fff;font-size:20px;width:45px;height:45px;border-radius:50%;margin:auto;display:flex;justify-content:center;align-items:center;animation:codepro-noti 2s 0s ease-out infinite}
@keyframes codepro-noti{0%{box-shadow:0 0 0 0 rgba(74,177,255,0.5)}75%{box-shadow:0 0 0 16px rgba(148,209,255,0)}100%{box-shadow:0 0 0 0 rgba(148,209,255,0)}}
.wcNotif{position:fixed;opacity:0;visibility:hidden;z-index:999999;overflow-y:auto;top:0;right:20px;border:1px solid #ddd;height:auto;width:350px;max-height:calc(100% - 110px);display:block;border-radius:16px 5px 16px 16px;color:#48525c;box-shadow:10px 10px 35px rgba(0,0,0,0.1),-10px -10px 35px rgba(0,0,0,0.1);transition:all .3s ease}
.wcNotif li{border-bottom:1px solid #f1f2f4;padding:10px 10px 10px 0;display:block;align-items:center;margin:0 20px}
.wcNotifStart{background:var(--contentB);padding:20px 0!important}
.wcNotifStart ul{margin:0!important;padding:0;overflow:auto;box-sizing:border-box}
.wcNotifStart .more{margin:5px 0 0 -5px;font-size:12px}
#wcCheckPop:checked ~ .wcNotif{width:350px;visibility:visible;opacity:1;top:60px}
#wcCheckPop:checked ~ .wcNotif + .fullClose{visibility:visible;opacity:1}
#wcCheckPop,.wcPopMenu{display:none}
.wcPopMore{display:flex;align-items:center;font-weight:900;color:#262d3d;padding:0 5px}
.wcPopMore span{flex-grow:1}
.accorIcon{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:12px;height:12px;margin-right:15px}
.wcPopMenu:checked ~ .wcPopMore span{color:#00a8f8}
.wcPopMenu:checked ~ .wcPopMore .accorIcon:before,.wcPopMenu:checked ~ .wcPopMore .accorIcon:after{background-color:#f89000}
.wcPopMenu:checked ~ .wcPopMore .accorIcon:after{visibility:hidden;opacity:0}
.wcNotifStart .content{position:relative;margin-left:-30px;padding-left:32px;overflow:hidden;max-height:0;transition:all .2s ease;opacity:.8}
.wcPopMenu:checked ~ .content{max-height:100vh;padding-top:15px;padding-bottom:8px}
/* CSS darkmode */
.drK .wcNotif,.drK .wcPopMore{color:#fefefe;border:none}
.drK .wcNotif li,.drK .wcNotifStart{background:var(--darkBs);border-color:rgba(255,255,255,.1)}
.drK .wcNotifClose:before{color:#d3d3d3}
@media screen and (max-width:480px){#wcCheckPop:checked ~ .wcNotif{width:100%;top:0;backdrop-filter:blur(4px)}.wcNotifStart{border-radius:12px 12px 0 0;overflow:scroll}.wcNotif{min-height:100vh;width:100%;top:0;right:0;bottom:0;left:0}.wcNotifClose:before{content:'\10f057';font-family:'Font Awesome 5 Duotone';display:flex;position:relative;font-size:40px;color:#48525c;padding:10px 0;justify-content:center}}
/* CSS RTL mode */
.Rtl .wcNotif{left:20px;right:auto;border-radius:5px 16px 15px 16px}

Template Median 1.5

Bước 1: Thêm icon thông báo

  1. Đầu tiên các bạn cũng thêm svg icon giống như bên trên.
  2. Với template 1.5 thì phần này đơn giản hơn 1.6 một chút. Các bạn tìm thẻ <b:tag class='headerIcon' cond='!data:view.isLayoutMode' name='div'>
  3. Các bạn sẽ thấy trong đó có Dark mode buttton và Search button. Sau đó các bạn thêm đoạn code button thông báo dưới đây vào vị trí muốn đặt. 
    <label class="popup-notif" for='wcCheckPop'>
  <b:include name='notif-icon' />
</label>
  4. Mình sẽ để hình ảnh ở bên dưới để các bạn dễ hình dung.

Bước 2: Thêm HTML và CSS

Các bạn tìm thẻ <body class='' id='mainContent'> và thêm đoạn code sau vào bên dưới

<style>
/* --- CSS Popup Notification --- */
  #totalNotif_top{position:absolute;top:-9px;left:9px;font-size:8px;font-weight:900;color:white;background:rgb(242 22 22);padding:3px 4px;border-radius:30px;animation:text-flicker 4s linear infinite}
label.popup-notif::before{content:attr(data-text);font-size:11px;line-height:18px;padding:0 5px;border-radius:10px;background:#e6e6e6;position:absolute;top:-5px;right:-4px;z-index:2}
header .navicon .popup-notif{margin-left:12px;position:relative}
  .wcIconNotif{position:relative;width:35px;height:35px;display:flex;left:-10px}
  .wcIconNotif path{fill:#444}
  .wcIconNotif:before{content:attr(aria-label);position:relative;display:flex;*padding:5px;font-size:8px;width:15px;height:15px;background-color:#e40101;color:#fefefe;justify-content:center;align-items:center;border-radius:50%;position:relative;top:-10px;left:26px;animation:flicker 4s linear infinite}
  .followBLog{background:linear-gradient(135deg,rgb(32 167 246),rgb(115 190 243));color:#fff;font-size:20px;width:45px;height:45px;border-radius:50%;margin:auto;display:flex;justify-content:center;align-items:center;animation:codepro-noti 2s 0s ease-out infinite}
  @keyframes codepro-noti{
    0%{box-shadow:0 0 0 0 rgba(74,177,255,0.5)}
    75%{box-shadow:0 0 0 16px rgba(148,209,255,0)}
    100%{box-shadow:0 0 0 0 rgba(148,209,255,0)}
  }
  .wcNotif{position:fixed;opacity:0;visibility:hidden;z-index:999999;overflow-y:auto;top:0;right:20px;border:1px solid #ddd;height:auto;width:350px;max-height:calc(100% - 110px);display:block;border-radius:16px 5px 16px 16px;color:#48525c;box-shadow:10px 10px 35px rgba(0,0,0,0.1),-10px -10px 35px rgba(0,0,0,0.1);transition:all .3s ease}
  .wcNotif li{border-bottom:1px solid #f1f2f4;padding:10px 10px 10px 0;display:block;align-items:center;margin:0 20px}
  .wcNotifStart{background:#fffdfc;padding:20px 0!important}
  .wcNotifStart ul{margin:0!important;padding:0;overflow:auto;box-sizing:border-box}
  .wcNotifStart .more{margin:5px 0 0 -5px;font-size:12px}
  #wcCheckPop:checked ~ .wcNotif{width:350px;visibility:visible;opacity:1;top:60px}
  #wcCheckPop:checked ~ .wcNotif + .fullClose{visibility:visible;opacity:1}
  #wcCheckPop,.wcPopMenu{display:none}
  .wcPopMore{display:flex;align-items:center;font-weight:900;color:#262d3d;padding:0 5px}
  .wcPopMore span{flex-grow:1}
  .accorIcon{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:12px;height:12px;margin-right:15px}
  .wcPopMenu:checked ~ .wcPopMore span{color:#00a8f8}
  .wcPopMenu:checked ~ .wcPopMore .accorIcon:before,.wcPopMenu:checked ~ .wcPopMore .accorIcon:after{background-color:#f89000}
  .wcPopMenu:checked ~ .wcPopMore .accorIcon:after{visibility:hidden;opacity:0}
  .wcNotifStart .content{position:relative;margin-left:-30px;padding-left:32px;overflow:hidden;max-height:0;transition:all .2s ease;opacity:.8}
  .wcPopMenu:checked ~ .content{max-height:100vh;padding-top:15px;padding-bottom:8px}
  /* CSS darkmode */
    .darkMode label.popup-notif::before{background:var(--dark-bgAlt)}
  .darkMode .wcNotif,.darkMode .wcPopMore{color:#fefefe;border:none}
  .darkMode .wcNotif li,.darkMode .wcNotifStart{background:#252526;border-color:rgba(255,255,255,.1)}
  .darkMode .wcNotifClose:before{color:#d3d3d3}
  @media screen and (max-width:480px){
    #wcCheckPop:checked ~ .wcNotif{width:100%;top:0;backdrop-filter:blur(4px)}
    .wcNotifStart{border-radius:12px 12px 0 0;overflow:scroll}
    .wcNotif{min-height:100vh;width:100%;top:0;right:0;bottom:0;left:0}
    .wcNotifClose:before{content:'\10f057';font-family:'Font Awesome 5 Duotone';display:flex;position:relative;font-size:40px;color:#48525c;padding:10px 0;justify-content:center}
  }
</style>
<!-- [ PopUp Notification ] -->
<input id='wcCheckPop' type='checkbox' />
<div class='wcNotif'>
  <label class='wcNotifClose' for='wcCheckPop'>
  </label>
  <div class='wcNotifStart'>
    <ul>
      <!-- noti thông báo -->
      <li style="border: 1px solid;display: flex;border-radius: 12px;flex-direction: row;margin-bottom:10px">
        <p style="width: 70%;text-align: center;">Ấn vào nút chuông để nhận thông báo bài viết mới nhất
        </p>
        <div class="followBLog" onclick='window.open("https://www.blogger.com/follow.g?blogID=blog-id")'>
          <i class="fad fa-bells">
          </i>
        </div>
      </li>
      <!-- noti 2 -->
      <li>
        <i>
          <!--Ngày/tháng/năm-->
        </i> - 
        <!-- Tiêu đề -->
        <input class='wcPopMenu' id='pop-menu2' name='multi-popup' type='checkbox' />
        <label class='wcPopMore' for='pop-menu2'>
          <span class='more'>Xem thêm
          </span>
        </label>
        <div class='content'>
          <!-- Thêm chi tiết ở đây -->
        </div>
      </li>
      <!-- noti 1 -->
      <li>
        <i>
          <!--Ngày/tháng/năm-->
        </i> - 
        <!-- Tiêu đề -->
        <input class='wcPopMenu' id='pop-menu1' name='multi-popup' type='checkbox' />
        <label class='wcPopMore' for='pop-menu1'>
          <span class='more'>Xem thêm
          </span>
        </label>
        <div class='content'>
          <!-- Thêm chi tiết ở đây -->
        </div>
      </li>
    </ul>
  </div>
</div>
<label class='fullClose' for='wcCheckPop'>
</label>
<script type='text/javascript'>
  //<![CDATA[
  document.addEventListener("DOMContentLoaded", () => {
    document.querySelector('.popup-notif').dataset.text = document.querySelector('.wcNotifStart > *').childElementCount
  });
  //]]>
</script>

Lời kết

Vậy là trong bài viết này mình đã hướng dẫn các bạn cách thêm widget thông báo vào blog, nếu có bất kì thắc mắc nào các bạn hãy để lại comment bên dưới mình sẽ giải đáp. Chúc các bạn một ngày làm việc và học tập hiệu quả!

Copyright © Phạm Văn Linh

Xem thêm:
Đánh giá của bạn về bài viết này?

Tags:

21 Nhận xét

  1. Nguyễn Hoàng Đạtlúc 00:29 11 tháng 12, 2021

    median ui 1.5 không thấy thẻ này ạ :(

    Trả lờiXóa
  2. Lê Anh Đứclúc 00:49 11 tháng 12, 2021

    ui dời ơi thông báo thế

    Trả lờiXóa
  3. Phạm Văn Linhlúc 02:02 11 tháng 12, 2021

    thông báo thế chư lị

    Trả lờiXóa
  4. Phạm Văn Linhlúc 02:02 11 tháng 12, 2021

    Đúng rồi bản 1.5 cấu trúc khác bản 1.6 một chút, nếu có thời gian mình sẽ hướng dẫn cho bản 1.5 sau nhé!

    Trả lờiXóa
  5. Sáu Nguyễnlúc 02:22 11 tháng 12, 2021

    Sao blog mình làm theo hướng dẫn này nó ko hiện số lượng thông báo hè. (hàm count không hoạt động hay sao vậy bạn ơi)

    Trả lờiXóa
  6. Phạm Văn Linhlúc 04:33 11 tháng 12, 2021

    à cái đó thiếu 1 đoạn CSS: label.popup-notif.tIc.bIc::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: 2;}
    Bạn thêm vào nhé

    Trả lờiXóa
  7. Sáu Nguyễnlúc 05:16 11 tháng 12, 2021

    Ok bạn đã thành công!! thanks

    Trả lờiXóa
  8. Phạm Văn Linhlúc 07:17 11 tháng 12, 2021

    Okee nhé!

    Trả lờiXóa
  9. Nguyễn Hoàng Đạtlúc 19:43 11 tháng 12, 2021

    ôk anh :33

    Trả lờiXóa
  10. Sadab Alilúc 01:56 12 tháng 12, 2021

    Thanks for the tutorial bro

    Trả lờiXóa
  11. Phạm Văn Linhlúc 03:48 12 tháng 12, 2021

    okee bro!

    Trả lờiXóa
  12. Phạm Văn Linhlúc 18:52 12 tháng 12, 2021

    Có hướng dẫn cho bản 1.5 rồi nhé!

    Trả lờiXóa
  13. Nguyễn Hoàng Đạtlúc 23:38 12 tháng 12, 2021

    làm 1 quả recent cmt cho bản 1.6 đi anh :33

    Trả lờiXóa
  14. Phạm Văn Linhlúc 05:16 13 tháng 12, 2021

    Chắc sang tuần anh lên bài nhé!

    Trả lờiXóa
  15. Phạm Văn Linhlúc 07:51 13 tháng 12, 2021

    Bạn vào cài đặt của blog bật chuyển hướng miền và 2 cái ở HTTPS lên nhé!

    Trả lờiXóa
  16. Sadab Alilúc 09:39 19 tháng 12, 2021

    Make a tutorial for comment section bro.

    Trả lờiXóa
  17. Phạm Văn Linhlúc 19:48 19 tháng 12, 2021

    Tôi sẽ làm sớm nhất có thể

    Trả lờiXóa
  18. Phạm Văn Linhlúc 01:50 19 tháng 3, 2022

    Mình vào nhưng không thấy!

    Trả lờiXóa
  19. Cobesieucapcutelúc 23:06 21 tháng 5, 2022

    cái này bổ sung ở đâu vậy ạ

    Trả lờiXóa
  20. Phạm Văn Linhlúc 12:06 28 tháng 5, 2022

    Popup mình hướng dẫn là bản cũ nhé!

    Trả lờiXóa
  21. Phạm Văn Linhlúc 17:23 11 tháng 6, 2022

    Thank bro!!!

    Trả lờiXóa