Comment Function--Learn more about plugin

First enter the official website: http://duoshuo.com/, select I want to install, fill in the good information after the assignment code to the project is OK

Here is the code I copied:

<!--comment Box start-and-<!--please replace this here with the article id--> in your site <divclass="Ds-thread"data-thread-key="MessageBoard2"data-title="Please replace the title of the article"Data-url="Please replace the article URL"></div> <!--comment Box End---<!--say public JS code start (one page only needs to be inserted once)--<script type="Text/javascript">varDuoshuoquery = {short_name:"Shuai7boy" }; (function () {vards = Document.createelement ('Script'); Ds.type='Text/javascript'; Ds.Async=true; DS.SRC= (Document.location.protocol = ='https:'?'https:':'http:') +'//static.duoshuo.com/embed.js'; Ds.charset='UTF-8'; (document.getElementsByTagName ('Head')[0]             || document.getElementsByTagName ('Body')[0]). appendchild (DS);    })(); </script> <!--say public JS code end---

View Code

Comments display style background can be controlled, you can also customize CSS style, below is my custom style implementation of an effect:

Implementing CSS:

#ds-reset. Ds-avatar{background:none!important; Box-shadow:none!important;} #ds-reset. Ds-avatar img, #ds-thread #ds-reset ul.ds-children. Ds-avatar img{width:50px!important;height:50px!important; -webkit-transition:. 8s;-moz-transition:. 8s;-o-transition:. 8s;-ms-transition:. 8s;padding:3px;border:1px solid #ddd; background: #fff;}. DS-post:hover. Ds-avatar img{transform:rotate (720deg);-webkit-transform:rotate (720deg);-moz-transform:rotate ( 720DEG);-o-transform:rotate (720deg);-ms-transform:rotate (720deg); border-radius:30px!important;} #ds-reset. Ds-avatar img:hover{transform:rotate (720deg);-webkit-transform:rotate (720deg);-moz-transform:rotate ( 720DEG);-o-transform:rotate (720deg);-ms-transform:rotate (720deg); border-radius:30px!important;} #ds-thread #ds-reset ds-comment-body, #ds-thread #ds-reset ul.ds-children. ds-comment-body{padding-left:70px!important;} #ds-thread #ds-reset ds-comment-body, #ds-thread #ds-reset ul.ds-children. ds-comment-body{padding-left:70px!important;}. DS-post:hover{background: #eee!important;} #ds-thread #ds-reset ul.ds-children. ds-avatar{width:50px!important;} #ds-thread #ds-reset. Ds-replybox{padding:0 0 080px!important;} #ds-reset #ds-ctx. ds-ctx-entry. ds-ctx-body{margin-left:68px!important;} #ds-recent-comments Li.ds-comment:nth-of-type (1) {Border:none!important;}

View Code

ZJ ...

Comment Function--Learn more about plugin