Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock


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:

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;http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png&#39;);
 $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/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;http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png&#39;);
 $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/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;http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/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;http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/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;http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/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;http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/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://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png' title='view Blogger comments'/>
   <div class='commentwith'><h5><b>O</b></h5></div>
<image id='comments-gplus' src='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/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




- - 4 Comentarios
Tag

Comentarios (4)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar