.png)
Hello, today I bring you a great style of comments that you can add to your Wapkix blog without any hassle, follow the tutorial.
First, go to your style page and add this CSS code.
margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { color: #03658c; text-decoration: none; } body { font-family: 'Roboto', Arial, Helvetica, Sans-serif, Verdana; } /-** ==================== * Lista de Comentarios =======================*/ .comments-container { padding: 8px 16px; background: #dee1e3; } .comments-container h3 { font-size: 36px; color: #283035; font-weight: 400; } .comments-container h3 a { font-size: 18px; font-weight: 700; } .comments-list { margin-top: 30px; position: relative; } /-** * Lineas / Detalles -----------------------*/ .comments-list:before { content: ''; width: 2px; height: 100%; background: #c7cacb; position: absolute; left: 32px; top: 0; } .comments-list:afterX { content: ''; position: absolute; background: #c7cacb; bottom: 0; left: 27px; width: 7px; height: 7px; border: 3px solid #dee1e3; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .comments-list li { margin-bottom: 15px; display: block; position: relative; } .comments-list li:after { content: ''; display: block; clear: both; height: 0; width: 0; } /-** * Avatar ---------------------------*/ .comments-list .comment-avatar { width: 65px; height: 65px; position: relative; z-index: 9; float: left; border: 3px solid #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2); box-shadow: 0 1px 2px rgba(0,0,0,0.2); overflow: hidden; } .comments-list .comment-avatar img { width: 100%; height: 100%; } .comment-main-level:after { content: ''; width: 0; height: 0; display: block; clear: both; } /-** * Caja del Comentario ---------------------------*/ .comments-list .comment-box { max-width:90% ; margin-left: 80px; position: relative; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15); box-shadow: 0 1px 1px rgba(0,0,0,0.15); } .comments-list .comment-box:before, .comments-list .comment-box:after { content: ''; height: 0; width: 0; position: absolute; display: block; border-width: 10px 12px 10px 0; border-style: solid; border-color: transparent #FCFCFC; top: 8px; left: -11px; } .comments-list .comment-box:before { border-width: 11px 13px 11px 0; border-color: transparent rgba(0,0,0,0.05); left: -12px; } .comment-box .comment-head { background: #FCFCFC; padding: 10px 12px; border-bottom: 1px solid #E5E5E5; overflow: hidden; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .comment-box .comment-head i { float: right; margin-left: 14px; position: relative; top: 2px; color: #A6A6A6; cursor: pointer; -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; } .comment-box .comment-head i:hover { color: #03658c; } .comment-box .comment-name { color: #283035; font-size: 14px; font-weight: 700; float: left; margin-right: 10px; } .comment-box .comment-name a { color: #283035; } .comment-box .comment-head span { float: left; color: #999; font-size: 13px; position: relative; top: 1px; } .comment-box .comment-content { background: #FFF; padding: 12px; font-size: 15px; color: #595959; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } .comment-box .comment-name.by-author, .comment-box .comment-name.by-author a {color: #03658c;} .comment-box .comment-name.by-author:after { content: 'autor'; background: #03658c; color: #FFF; font-size: 12px; padding: 3px 5px; font-weight: 700; margin-left: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
Then, on your blog page, add this little code and that's it.
<div class="comments-container"> <h3>Comments (<a href="https://tipsandtricksfor.wapkiz.com/">Tips And Tricks</a>)</h3> <ul id="comments-list" class="comments-list"> [*blog_cmt]to=:url-1:,o=u,l=6,s=:to-page:,no=nothing ||<li> <div class="comment-main-level"> <div class="comment-avatar"><img src="https://i.extraimage.info/pix/2020/08/28/img_avatard50fe.png" alt="%name%"></div> <div class="comment-box"> <div class="comment-head"> <b class="comment-name">%name%</b><span> %*date%</span> <i class="fa fa-reply"></i> <i class="fa fa-heart"></i> </div> <div class="comment-content"> %text% </div> </div> </div> </li>[/blog_cmt] </ul> </div>
Remove all asterisk (*) in code. See demo page here.
NOTE: In this theme, the blog url must be in the format /page-xxx/%id%/%lname%.html, if your url is /page-xxx.html?to-id=%id% you must change the value of to=:url-1: to to=:to-id:, learn more at bla bla bla
.jpg)
.jpg)
