La caja de Fanbox de Facebook flotante en blogger con efecto deslizante Seguimos con los tutoriales en esta ocación vamos hacer que el fanbok de facebook sea flotante en nuestro blog de blogger
Tutorial fanbox de Facebook con un efecto deslizante en blog de Blogger
- Vamos A Diseño
- luego Edición de HTML
</head>
Justo Antes del código anterior pegamos este otro código.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
Le damos Gurdar planilla.
- De nuevo Vamos a Diseño
- Después Añadir un Gadget
- seleccionamos donde dice HTML/JavaScript
Copia y pega esto código dentro del cuadro.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/Djdionicio.tk&width=251&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://besttricksblogger.blogspot.com/" target="_blank">+Creado por!</a></span></div></div>
Reemplaza donde dice http://www.facebook.com/Djdionicio.tk por la URL de tu página facebook y por ultimo le damos Guardar y listo verás una pestaña en un extremo del blog, eso seria todo si tienen alguna duda háganla saber con gusto les ayudaré ok.
¿Cómo Agregar la caja de seguidores de twitter en blogger? en este post vamos a aprender como añadir el Fan Bok o caja de seguidores de twitter en nuestro blog de blogger esta aplicación permite a nuestros usuarios o visitantes seguirnos en twitter sin salir de nuestro blog muy similar al Fan box de facebook, bueno veamos entonces
- primer paso entra Diseño
- luego Añadir un gadget
- seleccionamos donde dice HTML/JavaScript
Copia y pega esto código dentro del cuadro.
<!-- Twitter Follower Box -->
<script type='text/javascript'>
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 295px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("djdionicio");</script
type="text>
<!-- End Twitter Follower Box -->
Busca dentro del código donde dice djdionicio y sustituyelo por tu nombre de usuario twitter.
y por ultimo le damos Guardar y listo con eso ya tendremos la caja de seguidores de twitter en nuestro blog .
y por ultimo le damos Guardar y listo con eso ya tendremos la caja de seguidores de twitter en nuestro blog .
Colocar o Agregar la caja de comentarios de facebook en blogger, en este tutorial vamos a ver como insertar o añadir caja de comentarios de facebook en nuestro blog de blogger esto lo debemos de colocar debajo de las entradas del blog, porque cada dia son más los usuarios que utilizan facebook y se les hace más facil comentar en la caja de comentarios de facebook que en la caja de comentarios de blogger.
Veamos entonces como agregar la caja de comentarios de facebook en blogger sigue los pasos a continuación.
como primer paso entra Diseño subpestaña Edición HTML del blog y marca la casilla Expandir plantillas de artilugios, luego busca lo siguiente.
<body>
- Justo debajo Agregamos el siguiente código
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Después busca lo siguiente
<b:includable id='comment-form' var='post'>
Justo debajo pegamos este otro código
<div id='comentariosFacebook'>
<div class='fb-comments' data-num-posts='5' data-width='500' data-colorscheme='light' expr:href='data:post.url'/>
</div>
Otros detalles caja de comentarios facebook
donde dice width 500 pudes modificarlo por otro número mayor para aumentar el ancho del contenedor y ajustarlo conforme a tu planilla, sino puedes dejarlo así como esta no pasa nada.
- Y por ultimo Guarda tu planilla
para ver la caja de comentario de facebook debes de ingresar en alguno de tus post, ya con esta opción tus visitantes se les harán más facil comentar tus artículos. Además facebook ofrece un aplicación para informarnos acerca de quién comenta en nuestros post pero lo explicaré en otro tutorial más detalla pero ya tenemos lo básico.
Habilitar comentarios anidados en blogger con la nueva función responder comentarios, blogger ha lanzado oficialmente la nueva función de comentarios rosca,(anidados) similar a las caracteristicas de wordpress con la opción responder un comentario y en este tutorial vamos a ver como habilitarlo en nuestro blog de blogger.
Vemos entonces ¿cómo habilitar la nueva función responder de blogger en nuestro blog?
paso (1) Vamos a la pestaña >>configuración<<
Damos click en la subpestaña Comentarios
1.1 Activa la opción mostar como se va en la imagén.
1.2 mas abajo marca la opcion de bajo de las entradas como se ve en la imagén.
Paso (2) vamos la la subpestaña de Feed del sitio
Alli donde dice permitir feed del blog seleccionamos Completo
¿cómo Habilitar la nueva función responder los cometarios anidados en la planilla blogger?
Antes de hacer este proceso es recomendable que descargues tu planilla por si algo sale mal OKPaso (3)
1. Vamos a pestaña diseño
2. Subpestaña Edición de HTML
3. Selecciona Expandir planillas de artilugios
4. busca el siguiente código tienes que encontar dos veces este código te recomiendo buscar la primera linea del código para mi es más facil.
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
5. reemplazalo por este otro código
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
Paso (5) Guada tu planilla y listo
Ahora entra en alguno de tus post y notarás ya la nueva función Responder. bueno eso sería todo bien explicado para que no tengan ningun problema en aplicarlo, bueno si tienen alguna duda hagánlo saber que con gusto les ayudo ok.
Nota importante: Talvez en algunos navegadores no les funcioné el boton responder al hacer click encima porfavor esperen la nueva actulización, este problema ya fue notificado a blogger esten pendientes.
En este tutorial vamos a solucionar el problema de las etiquetas meta description duplicadas en blogger este problema que nos presenta blogger de duplicar la meta description en todos los post de nuestro blog que deberia mostrar un fragmento del texto inical, este problema nos informa las herramientas de web master de google >>Diagnóstico >>HTML sugerencias y nos aparece esto como se mustra en la imagen.
Estos errores nos causan muchos problemas primero perdemos posionamiento en los buscadores porque hay muchos post con la misma meta description para comprobar si tienes este problema solo tienes que introducir en el buscador google lo siguiente site:nombredetublog.blogspot.com te tiene que salir todos tus post observa si tienen las mismas descripciones, si es así no te preocupes aquí lo vamos a solucionar.
Solución: Meta etiquetas meta description duplicadas blogger
Antes de empezar debemos tomar en cuenta esto, vamos a configuración y borramos la descripción del blog te preguntarás ¿porqué? bueno porque lo vamos a poner en nuestra planilla para indicarle a los buscadores que afecte solo a la pagina principal.
empezemos entonces siga los pasos a continuación.
1) Nos vamos a diseño
2) Subpestaña Edición de HTML
3) Busca el siguiente código
Reemplaza lo que está en rojo por tus palabras claves separadas por comas y la segunda por la descripción de tu blog.
Si ya tienes en tu planilla las etiquetas meta Keywords y meta description solo tienes que agregar el condicional que esta en negrita en caso contrario debes agregar todo el código.
Con esté codigo lograremos que la meta description afecte solo a la página principal y todos nuestros posts se tomará las primera lineas de su contenido evitando asi la duplicación.
Estos errores nos causan muchos problemas primero perdemos posionamiento en los buscadores porque hay muchos post con la misma meta description para comprobar si tienes este problema solo tienes que introducir en el buscador google lo siguiente site:nombredetublog.blogspot.com te tiene que salir todos tus post observa si tienen las mismas descripciones, si es así no te preocupes aquí lo vamos a solucionar.
Solución: Meta etiquetas meta description duplicadas blogger
Antes de empezar debemos tomar en cuenta esto, vamos a configuración y borramos la descripción del blog te preguntarás ¿porqué? bueno porque lo vamos a poner en nuestra planilla para indicarle a los buscadores que afecte solo a la pagina principal.
1) Nos vamos a diseño
2) Subpestaña Edición de HTML
3) Busca el siguiente código
<b:include data='blog' name='all-head-content'/>
4) justo debajo del anterior pegamos esto
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='palabraclave1, palabraclave2, palabraclave3' name='keywords'/>
<meta content='Descripción del blog' name='description'/>
</b:if>
Si ya tienes en tu planilla las etiquetas meta Keywords y meta description solo tienes que agregar el condicional que esta en negrita en caso contrario debes agregar todo el código.
5) Guada tu planilla y listo
Con esté codigo lograremos que la meta description afecte solo a la página principal y todos nuestros posts se tomará las primera lineas de su contenido evitando asi la duplicación.
Nota importante: para ver los resultados tienen que esperar 5 días por lo menos, hay que esperar a que google actulize los datos de tu blog. esto lo puedes consultar en la herramientas de web master. suerte espero les sea de gran ayuda.
Palabras claves blogger lugares del post para colocarlo siguiendo con el tema de optimizar nuestro blog en la plataforma de blogger. Hoy vamos tratar otro punto clave para optimizar nuestro blog el tema se llama Lugares del post para colocar las palabras claves (keywords) muchas páginas dan información respecto a este tema pero solo mencionan que son y su importancia pero no mencionan en donde colocarlo exactamente por esa razón he decidido hacer este tutorial para darles las pautas en donde deben de colocar exactamente las keywords (palabras claves) en nuestro blog al redactar un post o entrada.
Veamos entonces donde colocar las keywords en blogger lo voy ir explicando con ejemplos para que me entiendan OK.
Que son las Keyworsds (Palabras claves) son las palabras que introduce un usuario en los buscadores Google, yahoo, Bing etc., cuando realiza una búsqueda Por eso es importante colocar las palabras claves en nuestros post para que los buscadores nos indexen fácilmente si no estan optimizado tus post de nada te servirá si en tu blog tienes un buen contenido.
SEO (Optimizacón para buscadores) se refiere al posionamiento orgánico de un blog mediante algunas técnicas claro aquí lo encontraras. En otras palabras consiste en en pequeñas modificaciones de partes concretas de un sitio web o blog
Bueno dejémoslo hasta allí solo me interesaba explicar esos dos términos veamos entonces las partes mas importantes de post para colocar las keywords o palabras claves
- en el titulo de la entradas
- en el cuerpo o contenido
En el titulo del post: sin duda el lugar más importante para colocar las frases claves es en el titulo del post siempre tu titulo debe de empezar con tu palabra clave (no en medio y no al final del titulo del post) veamos algunos ejemplos de cómo debemos de redactar nuestra entrada. Supongamos que vamos a publicar un post con el titulo de 10 Cosas curiosas de Google que tu no sabias, pon mucha atención en esto.
Titulo: 10 Cosas curiosas de Google que tu no sabias.
Frase clave: Cosas curiosa Google.
Ósea que nuestro titulo sería esta. Cosas curiosas Google que tu no sabias.
De esta manera como ves en el permanlink la frase clave esta primero que apunta a nuestro post después de publicar podremos modificar el titulo a esto 10 Cosas curiosas de Google que tu no sabias esto ya no afectará el permanlink que ya se genero.
En el cuerpo o contenido del post.
Es importante mencionar frase clave en la redacción del contenido en este caso Cosas curiosas Google dos o tres veces también es recomendable agregar otras palabras relacionadas a la frase clave original ejemplo.
Frase clave original: Cosas curiosas Google
Palabras relacionadas: frases Google, trucos google, herramientas Google etc.
Las palabras claves siempre las pondremos en negrita ya que los buscadores consideran importante las palabras en negrita.
Bueno creo que es todo respecto a las keywords en blogger si tienen alguna duda hazlo saber.
Tutorial optimizar titulos blog en blogger importancia de las etiquetas ayuda blogger paso a paso.
seo blogger Cómo cambiar la etiqueta partida para un mejor SEO en Blogger
en el posionamiento de un blog son muchas las pautas que debemos tomar en cuenta para los buscadores y en este tutorial seo blogger voy a explicar la importancia de las etiquetas y como se debe de utilizar adecuademente estas etiquetas tienen seis tamaños (h1,h2,h3,h4,h5,h6).
Etiqueta h1: Es la etiqueta más importante y terminado con la etiqueta h6 la menos importante pero que tiene que ver esto con optimizar los titulos de blogger mucho porque si la etiqueta h1 es la más importante los titulos de las entradas tendrían que estar dentro de esta etiqueta pero lamentablemente no lo esta lo que si esta es el titulo del blog pero hay un problema no podemos pasar los titulos de las entradas en la etiqueta h1, ¿Porqué? porque estariamos duplicando esa etiqueta entonces lo que hariamos en este caso es pasarlo en la etiqueta h2 que es más importante para los buscadores que si estubierá en la etiqueta h3 ya con esto ya no tendremos ese problema de duplicación. no te preocupes si no me entendiste lo voy a ilustrar con ejemplos.
Ejemplos Seo blogger optimizar etiquetas blogger
De esta manera esta blogger solo vamos a ver dos aspectos de nos interesa.
<h1>Titulo de tu blog <h1> Los buscadores lo considerán importante
<h3>Titulo de las entradas <h3> menos importancia para los buscadores
Lo que haremos en este tutorial es cambiar de etiqueta los titulos de las entradas pasandolas h2 que es la mas impostante despues de la etiqueta h1 veamos entonces.
1.Ingresar a Blogger> Diseño> Edición de HTML
2.click
3: Buscar el siguiente código
4.cambia donde h3 por h2 hecho esto procedemos a agregar el estilo css
5.busca
justo antes pegamos este otro código
5. por ultimo Guardamos nuestra planilla
bueno eso seria todo para optimizar los titulos de las entradas en blogger espero que les sea de gran ayuda comenten si les gusto gracias.
Actualizado 26/05/2012
seo blogger Cómo cambiar la etiqueta partida para un mejor SEO en Blogger
en el posionamiento de un blog son muchas las pautas que debemos tomar en cuenta para los buscadores y en este tutorial seo blogger voy a explicar la importancia de las etiquetas y como se debe de utilizar adecuademente estas etiquetas tienen seis tamaños (h1,h2,h3,h4,h5,h6).
Etiqueta h1: Es la etiqueta más importante y terminado con la etiqueta h6 la menos importante pero que tiene que ver esto con optimizar los titulos de blogger mucho porque si la etiqueta h1 es la más importante los titulos de las entradas tendrían que estar dentro de esta etiqueta pero lamentablemente no lo esta lo que si esta es el titulo del blog pero hay un problema no podemos pasar los titulos de las entradas en la etiqueta h1, ¿Porqué? porque estariamos duplicando esa etiqueta entonces lo que hariamos en este caso es pasarlo en la etiqueta h2 que es más importante para los buscadores que si estubierá en la etiqueta h3 ya con esto ya no tendremos ese problema de duplicación. no te preocupes si no me entendiste lo voy a ilustrar con ejemplos.
Ejemplos Seo blogger optimizar etiquetas blogger
De esta manera esta blogger solo vamos a ver dos aspectos de nos interesa.
<h1>Titulo de tu blog <h1> Los buscadores lo considerán importante
<h3>Titulo de las entradas <h3> menos importancia para los buscadores
Lo que haremos en este tutorial es cambiar de etiqueta los titulos de las entradas pasandolas h2 que es la mas impostante despues de la etiqueta h1 veamos entonces.
1.Ingresar a Blogger> Diseño> Edición de HTML
2.click
3: Buscar el siguiente código
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if> 4.cambia donde h3 por h2 hecho esto procedemos a agregar el estilo css
5.busca
lo siguiente
]]></b:skin>
justo antes pegamos este otro código
h1.post-title, .post h2 #Blog1 h2, #Blog2 h2 {border-bottom:0px Dotted #000000;border-top:0px Dotted #000000;margin:.25em 0 0;padding:0 0 4px;font-size:150%;font-weight:normal;line-height:1.4em;color:#1c3c6f;}
5. por ultimo Guardamos nuestra planilla
bueno eso seria todo para optimizar los titulos de las entradas en blogger espero que les sea de gran ayuda comenten si les gusto gracias.
Actualizado 26/05/2012
