Hello Everybody, Welcome to TechyJeeshan . Today in this post I am going to share a tutorial on How To Add Multi Pop up Comment Widget in Blogger Website to show the many comments in Popup.
This widget is regulated by Linh Qunag via my telegram channel comments and several others, for those of you who want to regulate tutorials or widgets, please comment on one of my articles or on our telegram groups and contact us page, if they are good or interesting, I will make them in the future. .
This widget is perfect for those of you who have an Gaming blog, tech blog and all types of blog which is hosted on only Blogger.
This widget is inspired by the code.pro.vn site , and I intentionally didn't make it 100% exactly the same but still looks like it, for 100% CSS and HTML I wrote it myself.
Demo:-
How To Install Multi Pop Up Recent Comment Widget in Blogger ?
Warning!
Before starting this tutorial, make sure you have to back up your blogger template first.
Step 1- Adding CSS in Blogger Theme
- First, Go to Blogger.com.
- Go to Theme/Template Section.
- Now Click on Edit HTML option.
- Now Search for the ]]></b:skin>tag.
- Copy the code provided below and paste it above the ]]></b:skin> tag.
To find anything in blogger theme section press Ctrl+F buttons and then type your term to find and press enter.
/* multi pop up by Wendy Code */
/*.techyIconNotif{position:relative;width:35px;height:35px;display:flex;margin:auto;/*left:-10px;*/cursor:pointer;}
/*.techyIconNotif path{fill:#444}*/
.techyIconNotif:before{content:attr(aria-label);position:relative;display:flex;/*padding:5px*/;font-size:10px;width:13px;height:13px;background-color:#e40101;color:#fefefe;justify-content: center;align-items: center;border-radius:50%;position:relative;top:-7px;left:9px;}*/
.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}
.techyNotif{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;}
.techyNotif: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;}
.techyNotif li{/*border-bottom:1px solid #f1f2f4;padding:10px 20px 10px 0;*/display:block;align-items:center;margin:0 20px 0 -15px}
.techyNotifStart .more{margin:5px 0 0 -5px;font-size:12px}
#techyCheckPop:checked ~ .techyNotif{visibility:visible;opacity:1;top:80px}
#techyCheckPop:checked ~ .techyNotif:before{visibility:visible;opacity:1;top:62px}
#techyCheckPop:checked ~ .techyNotif + .fullClose{visibility:visible;opacity:1}
#techyCheckPop,.techyPopMenu{display:none}
.techyPopMore{display:flex;align-items:center; font-weight:900; color:#262d3d;padding:0 5px}
.techyPopMore 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}
.techyPopMenu:checked ~ .techyPopMore span{color:#f89000}
.techyPopMenu:checked ~ .techyPopMore .accorIcon:before, .techyPopMenu:checked ~ .techyPopMore .accorIcon:after{background-color:#f89000}
.techyPopMenu:checked ~ .techyPopMore .accorIcon:after{visibility:hidden;opacity:0}
.techyNotifStart .content{position:relative;margin-left:-30px;padding-left:32px;overflow:hidden;max-height:0; transition:all .2s ease; opacity:.8}
.techyPopMenu:checked ~ .content{max-height:100vh;padding-top:15px;padding-bottom:8px}
@media screen and (max-width:480px){
#techyCheckPop:checked ~ .techyNotif{top:0}
.techyNotifStart{border-top:1px solid #f1f2f4;margin-top:30px}
.techyNotif{min-height:100vh;width:100%;top:0;right:0;bottom:0;left:0;padding-top:25px}
.techyNotifClose{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;}
.techyNotifClose:before{content:'Close';position:relative;right:35px;top:10px;font-size:15px;color:#48525c;}
.techyNotif:before{display:none}
}
/* CSS darkmode */
/*.darkMode .techyIconNotif path{fill:#989b9f}*/
.darkMode .techyNotif,.darkMode .techyPopMore{background:#2d2d30;color:#fefefe;border:none}
.darkMode .techyNotif:before{border-color:transparent transparent #2d2d30 transparent}
.darkMode .techyNotif li,.darkMode .techyNotifStart{border-color:rgba(255,255,255,.1)}
.darkMode .techyNotif p{color:#fff}
.darkMode .techyNotif span{color:#fff}
/* CSS Avatar */
#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; /*border-bottom:1px solid #f1f2f4;*/ 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}
.idbcomments .left{float:left; padding:8px 0 10px 0;}
.idbcomments .right{float:right; padding:8px 0 20px 0;}
.idbcomments .right a{color: #000; display: flex; align-items: center;}
.darkMode .idbcomments .right a{color:#fff;}
Step 2- Adding HTML in Blogger Theme
Now Copy the code provided below and paste the below of </footer>. It's actually free to use anywhere as long as it's still in the body tag, I personally prefer to put it above the footer to make it neater.
<input id='techyCheckPop' type='checkbox'/>
<div class='techyNotif'>
<label class='techyNotifClose' for='techyCheckPop'></label>
<ul class='techyNotifStart'>
<li>
<p style=' font-size: 15px; text-align: center; font-weight: 800; '>Recent Comment
</p>
<div id='rc-avatar-plus'>
</div>
<div class='idbcomments'>
<div class='left'>
There Are Currently
<b>
<span id='Stats1_totalComments'></span>
</b> Comments.
</div>
<div class='right'>
<a href='/p/recent-comment.html' target='_blank' title='View Comments'>See More
<svg class='line svg-2' viewBox='0 0 24 24'>
<g transform='translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'>
<path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'></path>
</g>
</svg>
</a>
</div>
</div>
</li>
</ul>
</div>
<label class='fullClose closeProfile' for='techyCheckPop'></label>
Step 3- Adding Javascript in Blogger Theme
and finally copy the javascript code provided below and place itabove thecode </body> or <!--</body>--> </body>Don't forget to click save.
<script>//<![CDATA[
var _0x5ef8 = ["Recent Comments free version 3.2 by http://duypham.info", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHnXgb3LCCNZH6yI2Jk1LEFA8d6kKOcEGtooFZeUF31MFegWS878O2BxgZjbmZWWjTIUeh8DnRwrmQ6vdKAEjM8g5ylg6M6Q0vKP3ptC13QmR6Y1mkLAEhpwzdMohdvDtWa2A0Iw1qcGEK/s0/favicon-180x180.png", "https://www.insurancefinances.com", "https://www.facebook.com/", "U b=[\"\\E\\G\\R\\v\\M\\f\\A\",\"\\M\\e\\e\\v\\1p\\r\\r\",\"\\X\",\"\\q\\n\\H\\s\",\"\\M\\j\\h\\H\",\"\\1e\\A\\C\\2A\",\"\\q\\n\\E\\h\\W\\1G\\H\",\"\\r\\v\\r\",\"\\1f\\e\",\"\\e\\q\\e\\l\\h\",\"\\h\\n\\e\\j\\R\",\"\\H\\h\\h\\E\",\"\\s\\v\\h\\n\\2B\\h\\f\\j\\m\\M\\1f\\e\\s\\e\\f\\l\\1F\\h\\k\\G\\l\\e\\k\",\"\\G\\j\\q\",\"\\f\\G\\e\\M\\s\\j\",\"\\k\\j\\m\",\"\\J\\E\\1f\\q\\A\\f\\J\\h\",\"\\l\\h\\n\\J\\e\\M\",\"\\l\\q\\n\\1c\",\"\\r\",\"\\k\\v\\l\\q\\e\",\"\\e\\M\\j\\1f\\q\\n\\I\\j\\h\\v\\l\\R\\I\\e\\s\",\"\\L\\f\\l\\G\\h\",\"\\J\\E\\1f\\h\\W\\e\\h\\n\\E\\h\\E\\1L\\j\\s\\v\\h\\j\\e\\R\",\"\\m\\s\\n\\e\\h\\n\\e\",\"\\k\\G\\A\\A\\f\\j\\R\",\"\\T\\1v\\2z\\2y\\2u\\1j\\1H\",\"\\x\",\"\\j\\h\\v\\l\\f\\m\\h\",\"\",\"\\k\\G\\P\\k\\e\\j\\q\\n\\J\",\"\\l\\f\\k\\e\\1M\\n\\E\\h\\W\\1G\\H\",\"\\T\\1v\\1n\\1w\\1w\\1H\",\"\\n\\f\\A\\h\",\"\\M\\e\\e\\v\\1p\\r\\r\\q\\A\\J\\1n\\X\\P\\l\\s\\J\\P\\l\\s\\J\\X\\m\\s\\A\\r\\q\\A\\J\\r\\P\\l\\f\\n\\1c\\X\\J\\q\\H\",\"\\n\\s\\x\\f\\L\\f\\e\\f\\j\",\"\\D\\k\\m\\j\\q\\v\\e\\x\\e\\R\\v\\h\\C\\w\\e\\h\\W\\e\\r\\1b\\f\\L\\f\\k\\m\\j\\q\\v\\e\\w\\x\\k\\j\\m\\C\\w\\M\\e\\e\\v\\k\\1p\\r\\r\\1d\\1d\\1d\\X\\P\\l\\s\\J\\J\\h\\j\\X\\m\\s\\A\\r\\H\\h\\h\\E\\k\\r\",\"\\r\\v\\f\\J\\h\\k\\r\\E\\h\\H\\f\\G\\l\\e\\r\",\"\\1e\\f\\l\\e\\C\\1b\\k\\s\\n\\I\\q\\n\\I\\k\\m\\j\\q\\v\\e\\T\\m\\f\\l\\l\\P\\f\\m\\1c\\C\\j\\m\\1u\\f\\L\\f\\e\\f\\j\\1j\\w\\B\\D\\r\\k\\m\\j\\q\\v\\e\\B\",\"\\1d\\j\\q\\e\\h\",\"\\D\\k\\m\\j\\q\\v\\e\\x\\e\\R\\v\\h\\C\\w\\e\\h\\W\\e\\r\\1b\\f\\L\\f\\k\\m\\j\\q\\v\\e\\w\\x\\k\\j\\m\\C\\w\",\"\\r\\H\\h\\h\\E\\k\\r\",\"\\r\\m\\s\\A\\A\\h\\n\\e\\k\\r\\E\\h\\H\\f\\G\\l\\e\\1e\\f\\l\\e\\C\\1b\\k\\s\\n\\I\\q\\n\\I\\k\\m\\j\\q\\v\\e\\T\\A\\f\\W\\I\\j\\h\\k\\G\\l\\e\\k\\C\\1n\\T\\m\\f\\l\\l\\P\\f\\m\\1c\\C\\j\\m\\1u\\f\\L\\f\\e\\f\\j\\1j\\w\\B\\D\\r\\k\\m\\j\\q\\v\\e\\B\",\"\\1F\\h\\m\\h\\n\\e\\x\\1J\\s\\A\\A\\h\\n\\e\\k\\x\\H\\j\\h\\h\\x\\L\\h\\j\\k\\q\\s\\n\\x\\1w\\X\\1j\\x\\P\\R\\x\",\"\\r\\H\\h\\h\\E\\k\\r\\m\\s\\A\\A\\h\\n\\e\\k\\r\\E\\h\\H\\f\\G\\l\\e\\1e\\f\\l\\e\\C\\1b\\k\\s\\n\\I\\q\\n\\I\\k\\m\\j\\q\\v\\e\\T\\A\\f\\W\\I\\j\\h\\k\\G\\l\\e\\k\\C\",\"\\T\\m\\f\\l\\l\\P\\f\\m\\1c\\C\\j\\m\\1u\\f\\L\\f\\e\\f\\j\\1n\\w\\B\\D\\r\\k\\m\\j\\q\\v\\e\\B\",\"\\D\\G\\l\\B\",\"\\1J\\s\\A\\A\\h\\n\\e\\k\\x\\s\\n\\x\",\"\\1p\\x\",\"\\1v\\m\",\"\\m\\s\\A\\A\\h\\n\\e\\1L\\f\\J\\h\\C\",\"\\T\",\"\\1e\",\"\\D\\l\\q\\x\\m\\l\\f\\k\\k\\C\\w\",\"\\j\\m\\I\\f\\E\\A\\q\\n\",\"\\j\\m\\I\\f\\G\\e\\M\\s\\j\",\"\\w\\B\\D\\E\\q\\L\\x\\m\\l\\f\\k\\k\\C\\w\\j\\m\\I\\q\\n\\H\\s\\w\\B\\D\\q\\A\\J\\x\\f\\l\\e\\C\\w\",\"\\w\\x\\m\\l\\f\\k\\k\\C\\w\\j\\m\\I\\f\\L\\f\\e\\f\\j\\w\\x\\k\\j\\m\\C\\w\",\"\\w\\r\\B\\D\\M\\1K\\B\",\"\\D\\r\\M\\1K\\B\\D\\r\\E\\q\\L\\B\\D\\f\\x\\M\\j\\h\\H\\C\\w\",\"\\w\\x\\j\\h\\l\\C\\w\\n\\s\\H\\s\\l\\l\\s\\1d\\w\\x\\e\\q\\e\\l\\h\\C\\w\",\"\\x\\s\\n\\x\",\"\\w\\B\\D\\v\\B\",\"\\D\\r\\v\\B\",\"\\e\\j\\G\\h\",\"\\D\\k\\v\\f\\n\\B\",\"\\D\\r\\k\\v\\f\\n\\B\",\"\\D\\r\\f\\B\\D\\E\\q\\L\\x\\m\\l\\f\\k\\k\\C\\w\\m\\l\\h\\f\\j\\w\\B\\D\\r\\E\\q\\L\\B\\D\\r\\l\\q\\B\",\"\\D\\r\\G\\l\\B\",\"\\q\\n\\n\\h\\j\\2b\\2c\\2i\\2j\",\"\\j\\m\\I\\f\\L\\f\\e\\f\\j\\I\\v\\l\\G\\k\",\"\\J\\h\\e\\2k\\l\\h\\A\\h\\n\\e\\2N\\R\\1M\\E\"];1g=0;u=0;V=[];d=[];p=[];Z=[];1i=[];1B=[];t=[];1y=[];1z=[];a=[];Y=[];1h=[];1o=[];1C=[];1D=[];1R=b[0];1S=b[1];1Y=b[2];1Q=b[3];1N=2Y[b[4]];y=1N[b[6]](b[5]);1x 2W(1q){K(d[u][b[6]](b[7])!=-1){Z[u]=1;o=1q[b[10]][b[9]][b[8]];t[u]=o}O{o=1q[b[11]][b[9]][b[8]];t[u]=o;1O=1q[b[11]][b[12]][b[8]];i=2Q((1O-1)/2S)+1;Z[u]=i};u++};1x 2T(S){1g=S[b[11]][b[12]][b[8]];1B=S[b[11]][b[9]][b[8]];K(b[13]1m S[b[11]][b[14]][0]){1C=S[b[11]][b[14]][0][b[13]][b[8]]};1D=S[b[11]][b[14]][0][b[16]][b[15]];1W(g=0;(g<1A)&&(g<1g);g++){c=S[b[11]][b[10]][g];K(g==S[b[11]][b[10]][b[17]]){2U};V=c[b[18]][0][b[4]];V=V[b[20]](b[19]);1X=V[4];1s=V[5];1I=V[8];d[g]=c[b[21]][b[4]];K(y!=-1){d[g]=d[g]+b[5]};1y[g]=c[b[23]][0][b[22]];1z[g]=c[b[23]][1][b[22]];p[g]=1I;K(b[24]1m c){U F=c[b[24]][b[8]]}O{K(b[25]1m c){U F=c[b[25]][b[8]]}O{U F=b[26]}};F=F[b[28]](/<2P \\/>/g,b[27]);F=F[b[28]](/@<a.*?a>/g,b[29]);F=F[b[28]](/<[^>]*>/g,b[29]);K(F[b[17]]<1E){1i[g]=F}O{F=F[b[30]](0,1E);U 1l=F[b[31]](b[27]);F=F[b[30]](0,1l);1i[g]=F+b[32]};Q=c[b[14]][0][b[33]][b[8]];K(Q[b[17]]<1P){a[g]=Q}O{Q=Q[b[30]](0,1P);U 1l=Q[b[31]](b[29]);Q=Q[b[30]](0,1l);a[g]=Q+b[32]};K(b[13]1m c[b[14]][0]){1o[g]=c[b[14]][0][b[13]][b[8]]};K(c[b[14]][0][b[16]][b[15]]==b[34]){Y[g]=2m;1h[g]=b[35]}O{Y[g]=c[b[14]][0][b[16]][b[15]];1h[g]=a[g]};K(d[g][b[6]](b[7])!=-1){1k[b[1r]](b[36]+1X+b[37]+1s+b[38])}O{1k[b[1r]](b[1T]+1U+b[2V]+1s+b[2X])}}};K(2R==b[2Z]+1S+1R+1Y+1Q){1k[b[1r]](b[1T]+1U+b[2O]+1A+b[2l])};1x 2n(){U N=b[29];N+=b[2o];1W(z=0;(z<1A)&&(z<1g);z++){t[z]=t[z][b[28]](b[2r]+1B+b[2q],b[29]);U 1a=b[29];K(Z[z]==1){1a=b[1V]}O{1t=b[2p]+Z[z]+b[1V];K(y!=-1){1a=b[2a]+1t}O{1a=b[1Z]+1t}};N+=b[2d];K(((1o[z]==1C)&&(Y[z]==1D))||((1o[z]==2e)&&(Y[z]==2h))){N+=b[2g]}O{N+=b[2f]};N+=b[2s]+1h[z]+b[2t]+Y[z]+b[2H]+a[z]+b[2G]+d[z]+1a+p[z]+b[2F]+a[z]+b[2I]+t[z]+b[2J]+1i[z]+b[2M];K(1y[z]!=b[2L]){N+=b[2K]+1z[z]+b[2E]};N+=b[2D]};N+=b[2x];1k[b[2w]](b[2v])[b[2C]]=N};", "|", "split", "|||||||||||_0x965f|||x74|x61||x65||x72|x73|x6C|x63|x6E|||x69|x2F|x6F|||x70|x22|x20|||x6D|x3E|x3D|x3C|x64|_0x3126x5|x75|x66|x2D|x67|if|x76|x68|_0x3126x8|else|x62|a2|x79|_0x3126x4|x26|var|lk|x78|x2E|im|pn|||||||||||_0x3126x9|x6A|x6B|x77|x3F|x24|tt|alt|j2|x32|document|_0x3126x6|in|x31|ur|x3A|_0x3126x2|39|pid|cp|x5F|x23|x33|function|pi|ti|nc|tb|ura|ima|length_content|x52|x4F|x3B|cid|x43|x34|x50|x49|a3|num|length_name|inf|ad|loc|40|home_page|49|for|bid|dot|52|||||||||||51|x48|x54|53|admin_uri|55|54|admin_avatar|x4D|x4C|x45|45|no_avatar|rc_avatar|46|50|48|47|56|57|x39|70|71|68|x35|x38|x30|x53|69|67|66|60|59|58|61|62|65|64|63|x42|44|br|parseInt|copyright_by_duypham_dot_info|200|rc_avatar1|break|41|rc_avatar2|42|location|43|||||||||", "", "fromCharCode", "replace", "\\w+", "\\b", "g"];
var copyright_by_duypham_dot_info = _0x5ef8[0];
nc = 40;
length_name = 15;
length_content = 100;
no_avatar = _0x5ef8[1];
home_page = _0x5ef8[2];
admin_uri = _0x5ef8[3];
admin_avatar = _0x5ef8[1];
var dp = [_0x5ef8[4], _0x5ef8[5], _0x5ef8[6], _0x5ef8[7], _0x5ef8[8], _0x5ef8[9], _0x5ef8[10], _0x5ef8[11], _0x5ef8[12], _0x5ef8[13]];
eval(function (_0xa9f9x3, _0xa9f9x4, _0xa9f9x5, _0xa9f9x6, _0xa9f9x7, _0xa9f9x8) {
_0xa9f9x7 = function (_0xa9f9x5) {
return (_0xa9f9x5 < _0xa9f9x4 ? dp[4] : _0xa9f9x7(parseInt(_0xa9f9x5 / _0xa9f9x4))) + ((_0xa9f9x5 = _0xa9f9x5 % _0xa9f9x4) > 35 ? String[dp[5]](_0xa9f9x5 + 29) : _0xa9f9x5.toString(36))
};
if (!dp[4][dp[6]](/^/, String)) {
while (_0xa9f9x5--) {
_0xa9f9x8[_0xa9f9x7(_0xa9f9x5)] = _0xa9f9x6[_0xa9f9x5] || _0xa9f9x7(_0xa9f9x5)
};
_0xa9f9x6 = [function (_0xa9f9x7) {
return _0xa9f9x8[_0xa9f9x7]
}];
_0xa9f9x7 = function () {
return dp[7]
};
_0xa9f9x5 = 1
};
while (_0xa9f9x5--) {
if (_0xa9f9x6[_0xa9f9x5]) {
_0xa9f9x3 = _0xa9f9x3[dp[6]](new RegExp(dp[8] + _0xa9f9x7(_0xa9f9x5) + dp[8], dp[9]), _0xa9f9x6[_0xa9f9x5])
}
};
return _0xa9f9x3
}(dp[0], 62, 195, dp[3][dp[2]](dp[1]), 0, {}))
//]]></script>
<script type='text/javascript'>rc_avatar();</script>
<script type='text/javascript'>
//<![CDATA[
function totalComments(json) {
document.getElementById('Stats1_totalComments').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\"><\/script>');
//]]>
</script>
<script type='text/javascript'>//<![CDATA[
function techybrains(json) {
document.getElementById('techybrains').innerHTML = json.feed.openSearch$totalResults.$t
};
document.write('<script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=techybrains\"><\/script>');
//]]></script>
You can edit the part that I marked https://www.insurancefinances.com with your Website url
Step 4- Adding Comment Icon in Blogger Theme
Copy following Comment icon code and put this Comment icon code where you want it, you can group it in the icon header section.
if you use the median-ui v1.5 template, you can put it after the <!--[ Profile button ]--> code, skip the first </b:if> code so that it doesn't get pinched by the conditional homepage tag.
<label for='techyCheckPop'>
<span id='techybrains' style=' 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; '></span>
<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><line x1='9.9304' x2='9.9394' y1='10.413' y2='10.413'></line><line x1='5.9214' x2='5.9304' y1='10.413' y2='10.413'></line><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' style='fill: rgb(128 138 157 / 47%);stroke: none;' transform='translate(1.000000, 1.400000)'></path>
<line x1='13.9394' x2='13.9484' y1='10.413' y2='10.413'></line><line x1='9.9304' x2='9.9394' y1='10.413' y2='10.413'></line><line x1='5.9214' x2='5.9304' y1='10.413' y2='10.413'></line><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'></path>
</g></svg>
</label>
Conclusion :-
I hope you liked this post a lot. This is a best tutorial on How To Add Multi Pop up Comment Widget in Blogger Website. if you have face any error and problem you can ask in the comment section without any hesitate. Thanks For Reading This Post.
Post a Comment
Post a Comment