Refresh
Đối tác của ANewPlus ANewTips Xem Ngay!

Two thousand a sour orange

Cách thêm tiện ích trên thanh header của template Median UI 1.6

Đã bao giờ bạn thấy template của mình không đẹp bằng blog của người khác chưa. Bạn muốn sao cho đẹp và hoàn chỉnh như Code Pro hoặc Phạm Văn Linh. Mình sẽ hướng dẫn cách làm ở từng bài viết. Ở bài viết này mình sẽ hướng dẫn cho mọi người cách làm tiện ích trên thanh header.






Ok bắt đầu thui

Bước 1:

Các bạn thêm đoạn css bên dưới:


/* --- 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}

/* CSS popup comment by Lê Anh Đức */
.fullClose{display:block;position:fixed;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .1s ease;background:transparent;opacity:0;visibility:hidden}
.codepro-comment{position:fixed;opacity:0;visibility:hidden;z-index:999999;overflow-y:auto;top:0;right:20px;background:#fff;border:1px solid #ddd;width:350px;height:auto;max-height:400px;display:block;border-radius:6px;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;}
.codepro-comment:before{content:"";position:fixed;top:0;right:30px;border:10px solid;border-color:transparent transparent #fff transparent;opacity:0;visibility:hidden;transition:all .3s ease;}
.codepro-comment li{display:block;align-items:center;margin:0 20px 0 -15px}
.codepro-commentStart .more{margin:5px 0 0 -5px;font-size:12px}
#codepro-CheckPop:checked ~ .codepro-comment{visibility:visible;opacity:1;top:80px}
#codepro-CheckPop:checked ~ .codepro-comment:before{visibility:visible;opacity:1;top:62px}
#codepro-CheckPop:checked ~ .codepro-comment + .fullClose{visibility:visible;opacity:1}
#codepro-CheckPop,.codepro-PopMenu{display:none}
.codepro-PopMore{display:flex;align-items:center; font-weight:900; color:#262d3d;padding:0 5px}
.codepro-PopMore 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}
.codepro-PopMenu:checked ~ .codepro-PopMore span{color:#f89000}
.codepro-PopMenu:checked ~ .codepro-PopMore .accorIcon:before, .codepro-PopMenu:checked ~ .codepro-PopMore .accorIcon:after{background-color:#f89000}
.codepro-PopMenu:checked ~ .codepro-PopMore .accorIcon:after{visibility:hidden;opacity:0}
.codepro-commentStart .content{position:relative;margin-left:-30px;padding-left:32px;overflow:hidden;max-height:0; transition:all .2s ease; opacity:.8}
.codepro-PopMenu:checked ~ .content{max-height:100vh;padding-top:15px;padding-bottom:8px}
@media screen and (max-width:480px){
#codepro-CheckPop:checked ~ .codepro-comment{top:0}
.codepro-commentStart{border-top:1px solid #f1f2f4;margin-top:30px}
.codepro-comment{min-height:100vh;width:100%;top:0;right:0;bottom:0;left:0;padding-top:25px}
.codepro-commentClose{position:absolute;top:8px;right:15px;width:40px;height:40px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%2348525c'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:35px;background-position:center;}
.codepro-commentClose:before{content:'Close';position:relative;right:35px;top:10px;font-size:15px;color:#48525c;}
.codepro-comment:before{display:none}
}
/* CSS darkmode popup comment */
.drK .codepro-comment,.drK .codepro-PopMore{background:#2d2d30;color:#fefefe;border:none}
.drK .codepro-comment:before{border-color:transparent transparent #2d2d30 transparent}
.drK .codepro-comment li,.drK .codepro-commentStart{border-color:rgba(255,255,255,.1)}
.drK .codepro-comment p{color:#fff}
.drK .codepro-comment span{color:#fff}
/* CSS recent comments by Lê Anh Đức */
#rc-avatar-plus ul::-webkit-scrollbar{width:0}
#rc-avatar-plus ul:hover::-webkit-scrollbar{width:5px}
#rc-avatar-plus ul::-webkit-scrollbar-thumb{background:#ddd}
#rc-avatar-plus ul{margin:0!important;padding:0;overflow:auto;box-sizing:border-box}
#rc-avatar-plus li{position: relative; clear: both; margin: 0 0 5px!important; padding: 10px 0!important; list-style-type: none!important; float: left; width: 100%; box-sizing: border-box;}
#rc-avatar-plus img{margin:0!important;padding:0!important;width:40px;height:40px;border-radius:50%}
#rc-avatar-plus h4{display:none; font-size: 16px; margin: 0!important; margin: 0; position: absolute; top: 8px; left: 65px; z-index: 1; color: #555;}
#rc-avatar-plus a{position: relative; line-height: 1.3;}
#rc-avatar-plus a,#rc-avatar-plus a:hover{color:#444!important;text-decoration:none}
#rc-avatar-plus a:after{content:"";position:absolute;top:0;width:0;height:0;line-height:0}
#rc-avatar-plus p{margin: 0; padding: 0; font-weight: 400; font-size: 16px; line-height: 1.4;}
#rc-avatar-plus .rc-author .rc-info,#rc-avatar-plus .rc-admin a{float: left;position:absolute;width:fit-content}
#rc-avatar-plus .rc-admin .rc-info,#rc-avatar-plus .rc-author a{float: left; margin:0 0 0 55px; width: fit-content;max-width:100%}
#rc-avatar-plus span {font-size:12px}
#rc-avatar-plus .rc-author a{word-break:break-word;background:none}
.codepro-comments-more .left {float:left;padding:8px 0 10px 0;}
.codepro-comments-more .right {float:right;padding:8px 0 20px 0;}
.drK .codepro-comments-more a{color:#fff}
#totalComments_top {position: relative; 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;}
@keyframes text-flicker {
0% {opacity:0.1;text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);}
2% {opacity:1;text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);}
8% {opacity:0.1;text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);}
9% {opacity:1;text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);}
12% {opacity:0.1;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
20% {opacity:1;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
25% {opacity:0.3;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
30% {opacity:1;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
70% {opacity:0.7;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
72% {opacity:0.2;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
77% {opacity:0.9;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
100% {opacity:0.9;text-shadow: 0px 0px rgba(242, 22, 22, 1);}
}


Bước 2:

 Mọi người thêm code html bên dưới:

    

<!-- Popup recent comment by Code Pro -->

<input id='codepro-CheckPop' type='checkbox'/>
<div class='codepro-comment'>
<label class='codepro-commentClose' for='codepro-CheckPop'/>
<ul class='codepro-commentStart'>
<li>
<div id='rc-avatar-plus'/>
<div class='codepro-comments-more'>
<div class='left'>Hiện có <b><span id='totalComments_bottom'/></b> bình luận</div>
<div class='right'><a href='/p/recent-comment.html' target='_blank' title='Xem 1000 bình luận'>Xem thêm<i class='fa fa-angle-right' style='margin:0 0 0 5px'/></a></div>
</div>
</li>
</ul>
</div>
<label class='fullClose' for='codepro-CheckPop'/>
<!-- js recent comments by Duy Phạm -->
<script type='text/javascript'>
//<![CDATA[
var copyright_by_duypham_dot_info = 'Recent Comments free version 3.2 by http://duypham.info';
nc = 20; // số lượng bình luận
length_name = 20; // độ dài tên
length_content = 100; // độ dài nội dung bình luận
home_page = 'https://www.code.pro.vn/'; // link blogger
admin_uri = 'https://www.facebook.com/leanhduc.pro.vn/'; // link admin
no_avatar = 'https://1.bp.blogspot.com/-hgQuQLjKWiM/YKytpXcsa6I/AAAAAAAAFiU/j3Ixpn1632M_SuCVcgvFY01Vxg5gV2EdwCLcBGAsYHQ/s16000/favicon-1000x1000.png'; // avatar ẩn danh
admin_avatar = 'https://1.bp.blogspot.com/-hgQuQLjKWiM/YKytpXcsa6I/AAAAAAAAFiU/j3Ixpn1632M_SuCVcgvFY01Vxg5gV2EdwCLcBGAsYHQ/s16000/favicon-1000x1000.png'; // avatar admin

function rc_avatar2(a) {
-1 != d[u].indexOf("/p/") ? (pn[u] = 1, o = a.entry.title.$t, t[u] = o) : (o = a.feed.title.$t, t[u] = o, num = a.feed.openSearch$totalResults.$t, i = parseInt((num - 1) / 200) + 1, pn[u] = i), u++
}

function rc_avatar1(t) {
tt = t.feed.openSearch$totalResults.$t, tb = t.feed.title.$t, "uri" in t.feed.author[0] && (ura = t.feed.author[0].uri.$t), ima = t.feed.author[0].gd$image.src;
for (g = 0; g < nc && g < tt && (c = t.feed.entry[g], g != t.feed.entry.length); g++) {
if (lk = c.link[0].href, lk = lk.split("/"), bid = lk[4], pid = lk[5], cid = lk[8], d[g] = c["thr$in-reply-to"].href, -1 != y && (d[g] = d[g] + "?m=0"), pi[g] = c.gd$extendedProperty[0].value, ti[g] = c.gd$extendedProperty[1].value, p[g] = cid, "content" in c) var e = c.content.$t;
else if ("summary" in c) e = c.summary.$t;
else e = "&#8592;";
if ((e = (e = (e = e.replace(/<br \/>/g, " ")).replace(/@<a.*?a>/g, "")).replace(/<[^>]*>/g, "")).length < length_content) j2[g] = e;
else {
var r = (e = e.substring(0, length_content)).lastIndexOf(" ");
e = e.substring(0, r), j2[g] = e + "&#133;"
}
if (a2 = c.author[0].name.$t, a2.length < length_name) a[g] = a2;
else {
a2 = a2.substring(0, length_name);
r = a2.lastIndexOf("");
a2 = a2.substring(0, r), a[g] = a2 + "&#133;"
}
"uri" in c.author[0] && (ur[g] = c.author[0].uri.$t), "http://img1.blogblog.com/img/blank.gif" == c.author[0].gd$image.src ? (im[g] = no_avatar, alt[g] = "no avatar") : (im[g] = c.author[0].gd$image.src, alt[g] = a[g]), -1 != d[g].indexOf("/p/") ? document.write('<script type="text/javascript" src="https://www.blogger.com/feeds/' + bid + "/pages/default/" + pid + '?alt=json-in-script&callback=rc_avatar2"><\/script>') : document.write('<script type="text/javascript" src="' + home_page + "/feeds/" + pid + '/comments/default?alt=json-in-script&max-results=1&callback=rc_avatar2"><\/script>')
}
}

function rc_avatar() {
var e = "";
for (e += "<ul>", z = 0; z < nc && z < tt; z++) {
t[z] = t[z].replace("Comments on " + tb + ": ", "");
var r = "";
1 == pn[z] ? r = "#c" : (cp = "commentPage=" + pn[z] + "#c", r = -1 != y ? "&" + cp : "?" + cp), e += '<li class="', ur[z] == ura && im[z] == ima || ur[z] == admin_uri && im[z] == admin_avatar ? e += "rc-admin" : e += "rc-author", e += '"><div class="rc-info"><img alt="' + alt[z] + '" class="rc-avatar" src="' + im[z] + '"/><h4>' + a[z] + '</h4></div><a href="' + d[z] + r + p[z] + '" rel="nofollow" title="' + a[z] + " on " + t[z] + '"><p>' + j2[z] + "</p>", "true" != pi[z] && (e += "<span>" + ti[z] + "</span>"), e += '</a><div class="clear"></div></li>'
}
e += "</ul>", document.getElementById("rc-avatar-plus").innerHTML = e
}
tt = 0, u = 0, lk = [], d = [], p = [], pn = [], j2 = [], tb = [], t = [], pi = [], ti = [], a = [], im = [], alt = [], ur = [], ura = [], ima = [], ad = "duypham", loc = "http://", dot = ".", inf = "info", a3 = location.href, y = a3.indexOf("?m=0"), copyright_by_duypham_dot_info == "Recent Comments free version 3.2 by " + loc + ad + dot + inf && document.write('<script type="text/javascript" src="' + home_page + "/feeds/comments/default?alt=json-in-script&max-results=" + nc + '&callback=rc_avatar1"><\/script>');
//]]>
</script>
<script type='text/javascript'>rc_avatar();</script>
<!-- get số lượng comments by Lê Anh Đức -->
<script type='text/javascript'>
//<![CDATA[
function totalComments_bottom(json) {
document.getElementById('totalComments_bottom').innerHTML = json.feed.openSearch$totalResults.$t
};
document.write('<script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments_bottom\"><\/script>');
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function totalComments_top(json) {
document.getElementById('totalComments_top').innerHTML = json.feed.openSearch$totalResults.$t
};
document.write('<script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments_top\"><\/script>');
//]]>
</script>

Bước 3:

 Các bạn thêm code html sau thẻ <body>   hoặc trước thẻ </body> :

<!-- [ 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(&quot;https://www.blogger.com/follow.g?blogID=1197687249351999969&quot;)'>
<i class='fad fa-bells'/>
</div>
</li>
<!-- noti 9 -->
<li>
<i><!--Ngày/tháng/năm--></i> - <!-- Tiêu đề -->
<input class='wcPopMenu' id='pop-menu9' name='multi-popup' type='checkbox'/>
<label class='wcPopMore' for='pop-menu9'>
<span class='more'>Xem thêm</span>
</label>
<div class='content'>
<!-- Thêm chi tiết ở đây -->
</div>
</li>
<!-- noti 8 -->
<li>
<i><!--Ngày/tháng/năm--></i> - <!-- Tiêu đề -->
<input class='wcPopMenu' id='pop-menu8' name='multi-popup' type='checkbox'/>
<label class='wcPopMore' for='pop-menu8'>
<span class='more'>Xem thêm</span>
</label>
<div class='content'>
<!-- Thêm chi tiết ở đây -->
</div>
</li>
<!-- noti 7 -->
<li>
<i><!--Ngày/tháng/năm--></i> - <!-- Tiêu đề -->
<input class='wcPopMenu' id='pop-menu7' name='multi-popup' type='checkbox'/>
<label class='wcPopMore' for='pop-menu7'>
<span class='more'>Xem thêm</span>
</label>
<div class='content'>
<!-- Thêm chi tiết ở đây -->
</div>
</li>
<!-- noti 6 -->
<li>
<i><!--Ngày/tháng/năm--></i> - <!-- Tiêu đề -->
<input class='wcPopMenu' id='pop-menu6' name='multi-popup' type='checkbox'/>
<label class='wcPopMore' for='pop-menu6'>
<span class='more'>Xem thêm</span>
</label>
<div class='content'>
<!-- Thêm chi tiết ở đây -->
</div>
</li>
<!-- noti 5 -->
<li>
<i><!--Ngày/tháng/năm--></i> - <!-- Tiêu đề -->
<input class='wcPopMenu' id='pop-menu5' name='multi-popup' type='checkbox'/>
<label class='wcPopMore' for='pop-menu5'>
<span class='more'>Xem thêm</span>
</label>
<div class='content'>
<!-- Thêm chi tiết ở đây -->
</div>
</li>
<!-- noti 4 -->
<li>
<i><!--Ngày/tháng/năm--></i> - <!-- Tiêu đề -->
<input class='wcPopMenu' id='pop-menu4' name='multi-popup' type='checkbox'/>
<label class='wcPopMore' for='pop-menu4'>
<span class='more'>Xem thêm</span>
</label>
<div class='content'>
<!-- Thêm chi tiết ở đây -->
</div>
</li>
<!-- noti 3 -->
<li>
<i>15/01/2022</i> - Nâng Cấp Giao Diện
<input class='wcPopMenu' id='pop-menu3' name='multi-popup' type='checkbox'/>
<label class='wcPopMore' for='pop-menu3'>
<span class='more'>Xem thêm</span>
</label>
<div class='content'>
Cải thiện tốc độ load của web
</div>
</li>
<!-- noti 2 -->
<li>
<i>11/01/2022</i> - Cập Nhật Giao Diện
<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'>
Thay đổi giao diện
</div>
</li>
<!-- noti 1 -->
<li>
<i>01/01/2022</i> - Thành lập Minh Hiếu Blog
<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'>
- Name: Ngô Vi Minh Hiếu- Domain: https://www.ngoviminhhieu.xyz/
- Date Of Establishment: 01/01/2022
- Founder/Manager: Ngô Vi Minh Hiếu, Hồng Lâm Blog
- Categories: Code, template, thuật toán, tài liệu, tin tức,...


</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 4:

Các bạn chỉnh sửa phần <b:widget-settings>  ở  <b:section class='headP' id='header-icon' maxwidgets='2' showaddelement='false'> như sau:

                    <b:widget-settings>
<b:widget-setting name='shownum'>5</b:widget-setting>
<b:widget-setting name='item-4'>Profile</b:widget-setting>
<b:widget-setting name='item-3'>Search</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='item-2'>Dark</b:widget-setting>
<b:widget-setting name='item-1'>Comments</b:widget-setting>
<b:widget-setting name='item-0'>Notification</b:widget-setting>
</b:widget-settings>

Bước 5:

Thêm code sau, sau thẻ </li>  đầu tiên và chỉnh sửa code <b:if cond='data:icon &lt;= 2'>  thành 5 :

                               <b:elseif cond='data:item == &quot;Notification&quot;'/>
<li>
<b:class cond='data:item == &quot;Notification&quot;' name='isNtf'/>
<label class='popup-notif tIc bIc' expr:aria-label='data:item' for='wcCheckPop'>
<b:include name='notif-icon'/>
</label>
</li>




<b:elseif cond='data:item == &quot;Comments&quot;'/>

<li><label aria-label='Comments' class='comments tIc bIc' for='codepro-CheckPop'>
<span id='totalComments_top'/>

<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line x1='13.9394' x2='13.9484' y1='10.413' y2='10.413'/><line x1='9.9304' x2='9.9394' y1='10.413' y2='10.413'/><line x1='5.9214' x2='5.9304' y1='10.413' y2='10.413'/><path d='M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z'/></g></svg></label>
</li>

Bước 6:

Các bạn thêm svg trước thẻ </b:defaultmarkup>  :




<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>

Bước 7:

Các bạn lưu lại rồi load lại blog xem thành quả:

Nếu bạn muốn chia sẻ lại lên blog bạn thì vui lòng nhớ ghi nguồn.

Copyright © Ngô Vi Minh Hiếu

Bài viết liên quan:

Rate Articles:

Post a Comment