Tutoriales Sobre Blogger: Instalar caja de Comentarios de Blogger y Google Plus en la plantilla Blogger

En este tutorial veremos como agregar en la caja de comentarios; los ya conocidos comentarios de blogger así también los comentarios de Google Plus en nuestra plantilla


Como muchos sabemos Blogger a agregado la posibilidad de agregar los comentarios Google Plus en los comentarios blogger, pero el único defecto que esto acarrea es que si o si los usuarios deben de tener una cuenta en Google para poder comentar.
Ahora tendremos la posibilidad de agregar las 2 cajas de comentarios en nuestro blog

Antes que nada veremos una demostración de como quedaría:

Demostración

Comencemos:

• Paso 1: Vamos a Blogger>> Plantilla>> Editar HTML>>
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

►<b:skin></b:skin>

• Paso 3: Desplegamos el código aquí dentro ►<b:skin></b:skin>  
• Paso 4: Dentro de ►<b:skin></b:skin> buscamos la siguiente linea 

]]></b:skin>

• Paso 5: Justo por encima de  ]]></b:skin> pegamos el siguiente código CSS.

///**** Comentarios Blogger & Comentarios Google+ - Tutoriales-Blogger.info****///
#comments-norm, #comments-gplus { cursor: pointer; padding: 0px 5px; float: left; } #comment-header { padding-left: 10px; float: left; width: 595px; border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; padding-top: 10px; margin-left: 25px; padding-bottom: 5px; margin-right: 25px; } #gcontainer { margin-left: 40px; margin-top:20px; float: left; } .commentwith h5 { text-transform: uppercase; font-family: 'Oswald', Arial, Helvetica, sans-serif; font-size: 24px; color:#1BA1E2; font-weight: normal; line-height: 25px; margin-bottom: 35px; float: left; margin: 15px; }
///**** Comentarios Blogger & Comentarios Google+ - Tutoriales-Blogger.info****///

• Paso 6: Todavia en la plantilla Buscamos la siguiente linea (Ctrol + F)

 <b:includable id='nextprev'>

• Paso 7: Justo debajo de <b:includable id='nextprev'> pegamos el siguiente código

<div id='gcontainer'><div id='gcomments'/></div>
<script src='http://apis.google.com/js/plusone.js'/>
<script>
gapi.comments.render(&#39;gcomments&#39;, {
    href: window.location,
    width: &#39;570&#39;,
    first_party_property: &#39;BLOGGER&#39;,
    view_type: &#39;FILTERED_POSTMOD&#39;
});
$(&#39;#comments-norm&#39;).click(function(){
 // switch to normal comments displaying
 $(&#39;#gcontainer&#39;).css(&#39;display&#39;,&#39;none&#39;);
 $(&#39;#comments&#39;).css(&#39;display&#39;,&#39;block&#39;);
 $(&#39;#comments-norm&#39;).addClass(&#39;comment-on&#39;);
 $(&#39;#comments-gplus&#39;).removeClass(&#39;comment-on&#39;);
 $(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiedZgWF6JTZhsKFDHoncoJLy3sdmkiYikwUftS7riCBQ186iui_rsIC5lCRalGecfYl1Iym_Ok_l3U9Lx6D0bY3pwSDx9_LNBNYbjmDCT9Cg0FL3OvuDVwzjYC9gZ9yqz_t2lh8AEdcos/s50/blogger_on.png&#39;);
 $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNkKEl6jkZ0K2_1ioVAwd7aPPhR_F_auqsYqB4aJynpLH9NV3uzCz-i-vNAC-SufeIk76SHP0Uk5hBfbaS3fsA7JDZx0uSUACvjUp8_KT7t9HCQhb2g_GVSy1NrL_qb_MKjNjlwzes-ZTC/s50/plus_off.png&#39;);
});
$(&#39;#comments-gplus&#39;).click(function(){
 // switch to google plus comments displaying
 $(&#39;#comments&#39;).css(&#39;display&#39;,&#39;none&#39;);
 $(&#39;#gcontainer&#39;).css(&#39;display&#39;,&#39;block&#39;);
 $(&#39;#comments-norm&#39;).removeClass(&#39;comment-on&#39;);
 $(&#39;#comments-gplus&#39;).addClass(&#39;comment-on&#39;);
 $(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRc6tZ1a_plPxv0aHqeWyDzJgH2HxMBAdkulHq1IFU-LKKjvFIuFvhtVZb87MF-KW_hV8S6LFQEoaCbBW2L1NdAdmuRmI-QzMRmr4AGQUHkvbHHUy8CLsbOfx6d1nRXC8Xw9XiqmcnYk_C/s50/blogger_off.png&#39;);
 $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7m6wE1T_8TV0A0PjTuu5de5Y8n0yHr_Xa_fOxXQPzHCwgsBasmg0waDdXdHd0E9qDZfj4Y_9X6U_a7DfLx2kf94oXIMbQZSHXZAr34UBRjYpqJ_hp4SFrLPVFqDbvvcMisMlhCnnwZsN/s50/plus_on.png&#39;);
});
$(&#39;#comments-norm&#39;).hover(
 // switch to normal comments displaying
 function(){
  if (!$(&#39;#comments-norm&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiedZgWF6JTZhsKFDHoncoJLy3sdmkiYikwUftS7riCBQ186iui_rsIC5lCRalGecfYl1Iym_Ok_l3U9Lx6D0bY3pwSDx9_LNBNYbjmDCT9Cg0FL3OvuDVwzjYC9gZ9yqz_t2lh8AEdcos/s50/blogger_on.png&#39;);}
 },  function(){
  if (!$(&#39;#comments-norm&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRc6tZ1a_plPxv0aHqeWyDzJgH2HxMBAdkulHq1IFU-LKKjvFIuFvhtVZb87MF-KW_hV8S6LFQEoaCbBW2L1NdAdmuRmI-QzMRmr4AGQUHkvbHHUy8CLsbOfx6d1nRXC8Xw9XiqmcnYk_C/s50/blogger_off.png&#39;);}
 }
);
$(&#39;#comments-gplus&#39;).hover(
 // switch to gplus comments displaying
 function(){
  if (!$(&#39;#comments-gplus&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7m6wE1T_8TV0A0PjTuu5de5Y8n0yHr_Xa_fOxXQPzHCwgsBasmg0waDdXdHd0E9qDZfj4Y_9X6U_a7DfLx2kf94oXIMbQZSHXZAr34UBRjYpqJ_hp4SFrLPVFqDbvvcMisMlhCnnwZsN/s50/plus_on.png&#39;);}
 },  function(){
  if (!$(&#39;#comments-gplus&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNkKEl6jkZ0K2_1ioVAwd7aPPhR_F_auqsYqB4aJynpLH9NV3uzCz-i-vNAC-SufeIk76SHP0Uk5hBfbaS3fsA7JDZx0uSUACvjUp8_KT7t9HCQhb2g_GVSy1NrL_qb_MKjNjlwzes-ZTC/s50/plus_off.png&#39;);}
 }
);
</script>
<style>
#gcontainer {
 display: none;
}
#comments-norm, #comments-gplus {
 cursor:   pointer;
 padding:  0px 5px;
    float: left;
}
  #comment-header {
padding-left: 10px;
float: left;
width: 595px;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
padding-top: 10px;
margin-left: 25px;
padding-bottom: 5px;
margin-right: 25px;
}
  #gcontainer {
margin-left: 40px;
    margin-top:20px;
    float: left;
}
</style>

• Paso 8: Ultimo paso buscamos la siguiente linea (Ctrol + F) 

 <div class='post-footer-line post-footer-line-1'>

• Paso 9: Justo debajo de  <div class='post-footer-line post-footer-line-1'> pegamos el siguiente código HTML 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='comment-header'>
   <div class='commentwith'><h5><b> Comenta con:</b></h5></div>
<img class='comment-on' id='comments-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiedZgWF6JTZhsKFDHoncoJLy3sdmkiYikwUftS7riCBQ186iui_rsIC5lCRalGecfYl1Iym_Ok_l3U9Lx6D0bY3pwSDx9_LNBNYbjmDCT9Cg0FL3OvuDVwzjYC9gZ9yqz_t2lh8AEdcos/s50/blogger_on.png' title='view Blogger comments'/>
   <div class='commentwith'><h5><b>O</b></h5></div>
<image id='comments-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNkKEl6jkZ0K2_1ioVAwd7aPPhR_F_auqsYqB4aJynpLH9NV3uzCz-i-vNAC-SufeIk76SHP0Uk5hBfbaS3fsA7JDZx0uSUACvjUp8_KT7t9HCQhb2g_GVSy1NrL_qb_MKjNjlwzes-ZTC/s50/plus_off.png' title='view Google+ comments'/>
   <div class='commentwith'><h5><b>Gracias!!</b></h5></div>
</div>
              </b:if>

ESPERO QUE LES HALLA SERVIDO ESTE TUTORIAL SOBRE Blogger Y NO OLVIDEN SUSCRIBIRSE PARA RECIBIR MAS tutoriales SOBRE ESTOS