7 de julho de 2012

CANDY COMMENTS

Olá pessoal! Irei ensinar para vocês a como colocar candy comments no blog.
Primeira ParteRevertendo o html (tirar o threaded comments) 
 1-Encontre: 
<b:includable id='threaded_comment_js' var='post'>

.......
</b:includable>

Substitua por 
<b:includable id='threaded_comment_js' var='post'/>
2-Encontre: 
<b:includable id='threaded_comments' var='post'>
....
</b:includable>
 Substitua por 
<b:includable id='threaded_comments' var='post'/>


3-Encontre:
<b:includable id='main' var='top'>
.....

</b:includable>

Substitua por 
<b:includable id='main' var='top'>
<b:if cond='data:mobile == &quot;false&quot;'>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='dataosts' var='post'>
<b:if cond='dataost.isDateStart'>
<b:if cond='dataost.isFirstPost == &quot;false&quot;'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
</b:if>
<b:if cond='dataost.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='dataost.dateHeader'>
<h2 class='date-header'><span><dataost.dateHeader/></span></h2>
</b:if>
<b:if cond='dataost.isDateStart'>
&lt;div class=&quot;date-posts&quot;&gt;
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
</div>
<b:if cond='dataost.includeAd'>
<b:if cond='dataost.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<data:adEnd/>
</div>
<b:include name='nextprev'/>
<b:if cond='data:top.showStars'>
<script src='//www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
<b:else/>
<b:include name='mobile-main'/>
</b:if>
<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</b:if>
</b:includable>
4-Encontre: 
<b:includable id='threaded-comment-form' var='post'>
....
</b:includable>
Substitua por 
<b:includable id='threaded-comment-form' var='post'/>


Segunda parte
 Essa parte é para adicionar o HTML editado por min que terá estilos diferentes para comentários de anônimos, autor do blog, respostas e comentários normais.

 Encontre: 
<b:includable id='comments' var='post'>
....
</b:includable>
Substitua por
<b:includable id='comments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>var flagItem = 0;</script></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script type='text/javascript'>var flagItem = 1;</script></b:if>
<script type='text/javascript'> var indexa = '<data:top.id/>';var indexb = '<dataost.id/>';
//<![CDATA[
flagItem="0"==flagItem?"&postID=":"&pageID=";
function replyOriginal() {
var b = document.getElementById("comment-editor").getAttribute("src"), a = b.indexOf("#"), b = b.substring(a), a = document.getElementById("comment-editor");
a.parentNode.removeChild(a);
a = document.getElementById("replypost");
a.parentNode.removeChild(a);
b = "http://www.blogger.com/comment-iframe.g?blogID=" + (indexa + flagItem + indexb + b) + "";
a = document.createElement("iframe");
a.setAttribute("id", "comment-editor");
a.setAttribute("name", "comment-editor");
a.setAttribute("src", b);
a.setAttribute("height", "250px");
a.setAttribute("width", "100%");
a.setAttribute("frameBorder", "0");
a.setAttribute("allowtransparency", "true");
document.getElementById("comment-form-thread").appendChild(a)
}
function reply(b) {
var a = document.getElementById("comment-editor").getAttribute("src"), c = a.indexOf("#"), a = a.substring(c), c = document.getElementById("comment-editor");
c.parentNode.removeChild(c);
a = "http://www.blogger.com/comment-iframe.g?blogID=" + (indexa + flagItem + indexb) + "&parentID=" + (b + a) + "";
c = document.createElement("iframe");
c.setAttribute("id", "comment-editor");
c.setAttribute("name", "comment-editor");
c.setAttribute("src", a);
c.setAttribute("height", "250px");
c.setAttribute("width", "100%");
c.setAttribute("frameBorder", "0");
c.setAttribute("allowtransparency", "true");
document.getElementById("contenedorreply-" + b + "").appendChild(c);
document.getElementById("replypost") || (b = document.createElement("a"), b.innerHTML = "Deixe seu comentario", b.setAttribute("id", "replypost"), b.setAttribute("href", "javascript:void(0)"), b.setAttribute("class", "LoadMore"), document.getElementById("comment-form-thread").appendChild(b));
var clickOn = document.getElementById("replypost");
clickOn.addEventListener ? clickOn.addEventListener("click", replyOriginal, !1) : clickOn.attachEvent("onclick", replyOriginal);
}
//]]></script>
<div id='feedback'>
<b:if cond='dataost.allowComments'>
<h3><b:if cond='dataost.numComments == 0'> Comentar <b:else/> <b:if cond='dataost.numComments == 1'>1 Recadinho <b:else/> <dataost.numComments/> Recadinhos</b:if></b:if></h3>
<div class='comment-feed'><a class='feed' href='/feeds/comments/default' title='Assinar feed'>Assinar Feed dos Comentarios</a></div><div class='clear'/>
<dl id='comentarios'><b:loop values='dataost.comments' var='comment'><b:if cond='data:comment.inReplyTo'><!--FIX--><b:else/>

<!--AUTOR DO BLOG COMENTS-->
<b:if cond='data:comment.author == dataost.author'>
<div id='comentei'><div class='center'><div expr:id='data:comment.id'>
<a expr:name='&quot;comment-&quot; + data:comment.id'/>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/></b:if><a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'><data:comment.authorAvatarImage/>
</b:if>
<span class='nome'><b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='follow'><data:comment.author/></a><b:else/>
<data:comment.author/></b:if> 
<p>no comando :)</p>
</span></dt><p><data:comment.body/></p>
<span class='data'><a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'><data:comment.timestamp/></a></span></div></div></div><b:else/>
<!--COMENTARIOS-->
<div id='comentou'><div class='center' expr:id='data:comment.id'><a expr:name='&quot;comment-&quot; + data:comment.id'/><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'><img expr:src='data:comment.favicon'/></b:if>
<a expr:name='data:comment.anchorName'/><data:comment.authorAvatarImage/>
<span class='nome'><b:if cond='data:comment.authorUrl'><a expr:href='data:comment.authorUrl' rel='follow'>
<data:comment.author/></a><b:else/><data:comment.author/></b:if>
<p> comentou...</p>
</span>
</dt><p><data:comment.body/></p><span class='data'><a expr:href='&quot;#comment-&quot; + data:comment.id' title='Permalink'><data:comment.timestamp/></a></span></div></div></b:if>
<!--RESPOSTAs-->
<div class='reply'><b:loop values='dataost.comments' var='comentariohijo'>
<b:if cond='data:comentariohijo.inReplyTo == data:comment.id'><b:if cond='data:comentariohijo.author == dataost.author'>
<!--AUTOR DO BLOG RESPOSTAS-->
<div id='respondi'><div class='center'>
<div expr:class='&quot;comment-author-thread &quot; + data:comment.authorClass' expr:id='data:comentariohijo.anchorName'>
<b:if cond='data:comentariohijo.favicon'><img expr:src='data:comentariohijo.favicon'/>
</b:if><a expr:name='data:comentariohijo.anchorName'/><b:if cond='data:blog.enabledCommentProfileImages'><data:comentariohijo.authorAvatarImage/>
</b:if></div>
<span class='nome'> <b:if cond='data:comentariohijo.authorUrl'>
<a expr:href='data:comentariohijo.authorUrl' rel='follow'><data:comentariohijo.author/></a><b:else/>
<data:comentariohijo.author/></b:if>
<p> comandando... ♥</p>
</span>
<p><data:comentariohijo.body/></p>
<span class='data'><a expr:href='data:comentariohijo.url' title='Permalink'><data:comentariohijo.timestamp/></a></span></div></div><b:else/>
<!--RESPOSTAS-->
<div expr:id='data:comentariohijo.id'><div id='respondeu'><div class='center'><div expr:class='&quot;comment-author-thread &quot; + data:comment.authorClass' expr:id='data:comentariohijo.anchorName'>
<b:if cond='data:comentariohijo.favicon'><img expr:src='data:comentariohijo.favicon'/>
</b:if><a expr:name='data:comentariohijo.anchorName'/><b:if cond='data:blog.enabledCommentProfileImages'>
<data:comentariohijo.authorAvatarImage/></b:if></div>
<span class='nome'>
<b:if cond='data:comentariohijo.authorUrl'><a expr:href='data:comentariohijo.authorUrl' rel='follow'>
<data:comentariohijo.author/></a><b:else/><data:comentariohijo.author/></b:if>
<p> respondeu...</p>
</span>
<p><data:comentariohijo.body/></p>
<span class='data'><a expr:href='data:comentariohijo.url' title='Permalink'><data:comentariohijo.timestamp/></a></span>
</div></div></div></b:if></b:if></b:loop></div>
<b:if cond='dataost.numComments &lt; 200'><a class='reply-action' expr:onclick='&quot;reply(&apos;&quot; + data:comment.id + &quot;&apos;);return false;&quot;' href='#'>Responder</a><br/>
<b:else/><script type='text/javascript'>var indexc = '<dataost.numComments/>'var indexcomment = '<data:comment.id/>'
//<![CDATA[
var indexpage = indexc/200;
indexpage = Math.ceil(indexpage);var indexl = window.location.href;indexl = indexl.indexOf("commentPage=" + indexpage + "");
var replyAction = "<a class='reply-action' onclick='reply(&quot;" + indexcomment + "&quot;);return false;' href='#' style='margin-top:-20px !important'>Responder</a><br/>";
if(indexl!=-1)if(indexc<indexpage*200)document.write(replyAction);
//]]></script></b:if><div class='contenedorreply' expr:id='&quot;contenedorreply-&quot; + data:comment.id'/></b:if></b:loop></dl><div class='clear'/>
<p class='comment-footer'><b:if cond='dataost.embedCommentForm'><b:if cond='dataost.allowNewComments'><b:include data='post' name='comment-form'/>
<b:else/><dataost.noNewCommentsText/></b:if><b:else/><b:if cond='dataost.allowComments'><a expr:href='dataost.addCommentUrl' expr:onclick='dataost.addCommentOnclick'>
<dataostCommentMsg/></a></b:if></b:if></p></b:if>
</div>
</b:includable>


Agora vamos ao estilo,hoje fiz apenas um (outro dia faço mais modelinhos pra vcs ok?),podem editar a vontade!

Copie e cole acima de ]]></b:skin>
/*------- COMENTARIOS INICIO ----------------------------------------- */

#feedback {/* AREA GERAL DOS COMENTARIOS */
background:#fee;/* cor do fundo */
padding:5px
}
#feedback h3,#comment-post-message{/* TITULOS- 1 comentário, deixe seu comentario... */
color:#f9b;
text-align:center;
line-height:1.4em;
font:italic 20px georgia;
letter-spacing:0;
margin:1em 0;
text-transform:none
}
#feedback .comment-feed a{/* ICONE DE FEED */
width:91%;
margin-bottom:20px;
line-height:15px;
font:normal 11px verdana;
color:#888;
background:#fdd url(http://3.bp.blogspot.com/-diSngjYnBWI/T0q3wrXS4DI/AAAAAAAAC1I/7UE_cclJcrE/s1600/rss.png);
background-repeat:no-repeat;
display:block;
height:15px;
padding:5px 27px
}
.center{/* CORPO DE CADA COMENTARIO */
width:99%;
background:#FFF;
padding-bottom:15px;
color:#777
}
#comentou,#comentei,#respondeu,#respondi{padding:5px;margin:5px}
#comentei p,#respondi p,#comentou p, #respondeu p{line-height:20px;margin:5px;overflow:hidden}
.nome a, .nome{/* NOME DO COMENTARISTA */
font-size:15px;
line-height:22px !important;
color:#fff !important;
display:block
}
.nome p{/* TEXTO-comentou, respondeu...pode por 'display:none' se não quer q apareça */
color:#faa;
padding-right:16px;
font:italic 14px georgia;
text-align:right;
margin-top:-19px !important
}
.data a{/* DATA DOS COMMENTS */
color:#fcc !important;
font:normal 10px verdana;
float:right;
margin-right:6px
}
#comentou .nome a,#respondeu .nome a,#comentou .nome,#respondeu .nome{/* BACK DO NOME - GERAL */
background:#fcc;
border-top:7px #faa solid;
}
#respondi .nome,#respondi .nome a,#respondi .avatar-image-container,#comentei .nome a,#comentei .avatar-image-container{/* COMENTARIO DO DONO DO BLOG */
background:#f9a;/* background do nome */
color:#fff !important;/* cor do nome */
}
.reply-action{/* BOTAO RESPONDER */
font-size:13px;
color:#fff !important;
padding:0 6px;
line-height:24px;
text-shadow:0 1px 1px rgba(0,0,0,.3) !important;
border-radius:15px;
box-shadow:0 1px 2px rgba(0,0,0,.2);
background:#fdd;
border:4px #fcc solid;
margin-right:20px;
float:right;
}
.reply-action:hover{/* BOTAO RESPONDER HOVER */
text-decoration:none !important;
background:#ffdc50
}
.contenedorreply{/* ESPAÇO ENTRE RESPOSTAS */
margin-bottom:30px;
padding:0
}
.avatar-image-container {/* AVATAR */
position:static !important;
float:left !important;
height:70px;/* tamanho-altura */
width:70px;/* tamanho-largura */
background:#fff;
box-shadow:0 0 2px #aaa;
border-radius:60px !important;/* arredondamento */
padding:5px;
margin-left:-12px !important;/* afasta pra esquerda */
margin-top:-11px !important;/* sobe */
margin-right:10px !important;/* espaço pra direita */
overflow:hidden
}
.avatar-image-container img {/* IMAGEM EM SI DO AVATAR */
margin:0;
height:70px;/* tamanho-altura */
width:70px;/* tamanho-largura */
padding:0;
border-radius:60px !important;/* arredondamento */
overflow:hidden;
border:0 !important;
display:block
}
.avatar-image-container.avatar-stock {/* AVATAR PERSONALIZADO- caso anonimo ou open-id */
background:#fdd url(COLOQUE-AQUI-UMA-IMAGEM) no-repeat 50% 50%
}
.avatar-image-container.avatar-stock img {display:none}
img.delayLoad {height:70px;width:70px;border:0 !important;border-radius:100px;padding:0;position:relative;overflow:hidden;display:block}
.reply .center{/* RESPOSTAS */
margin-bottom:15px !important;
margin-top:18px;
margin-left:63px !important;
width:87%
}
/* FORMATAÇÃO DOS COMMENTS */
#comentarios p a{}
#comentarios p em{}
#comentarios p strong{}
#comentarios p b{}

/* EDITOR */
#comment-editor {
width:130%;/* diminua se ficar grande */
height:250px;
padding:10px;
margin:0 auto;
border:0 !important
}
Bjoos:                     

Espero que tenham gostado ^^

Um comentário:

Comente a vontade, desde que saiba respeitar ;)
Ah, e não é necessário fazer uma conta para comentar, basta colocar como anônimo.

Emoticons:

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡ ( ͡° ͜ʖ ͡°)