CÓMO PONER LOS COMENTARIOS RECIENTES EN EL LATERAL DE TU BLOG

Perdón por haber estado tanto tiempo sin escribir, pero con los exámenes, los trabajos y demás no he podido. Pero prometo compensar el tiempo perdido con el mega tutorial que te traigo hoy.

 

Pensaba hacer este tutorial con el programa de Way2blogging, pero al ir a revisarlo he visto que el servidor ha dejado de funcionar. Y he pensado, ¿ y ahora cómo lo hago?

Muy fácil, con un código HTML. En serio, me he comido un poco la cabeza para que funcione pero ya está operativo. Puedes verlo en el lateral del blog, basta con bajar un poquito.

Queda bien y puede ser un truco para obtener más comentarios en tu blog.

Te lo voy a explicar paso a paso:

• Diseño
• Añadir gadget
• HTML/ Javascript

• Pones el titulo que quieras: últimos comentarios, comentarios recientes...

• Y pones este código:

<style type="text/css">
ul.latest_recent_comments{list-style:none;margin:0;padding:0}
.latest_recent_comments li{position: relative;background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none}
.latest_recent_comments li a{float:right;width:250px;font-size:12px;font-family:Trebuchet;color:#888;background:#transparent;margin-top:9px;padding:10px 7px 5px;border-right:3px solid #5390ad}
.latest_recent_comments li a:hover{color:#fff !important}
.latest_recent_comments li a:hover{color:#5390ad;background:#transparent}
.latest_recent_comments li .avatarImage{float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{width:34px;height:34px}
.latest_recent_comments li img{padding:0;position:relative;overflow:hidden;display:block}
.latest_recent_comments li span{position: absolute;left:42px;padding:1px 3px;color:#75d7ff;background:#transparent;display:block;font-size:16px;line-height:1.4}
.latest_recent_comments span{display:none}
</style>
<script type='text/javascript'>
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('8 z=z||5,2=2||1E,p=p||18,7=7||"17://14.13.6/-11-V/U-1y/1t/1b/12/10.w",x=x||" X &1d;",k="l"===m k?!0:k,n="l"===m n?!1:n,9="l"===m 9?!0:9,K="l"===m K?!1:9;16 M(h){8 c;c=\'<E B="M">\';A(8 e=0;e<z;e++){8 f,g,a,d;15(e==h.F.G.o)1c;c+="<H>";8 b=h.F.G[e];A(d=0;d<b.r.o;d++)"S"==b.r[d].T&&(f=b.r[d].y);A(d=0;d<b.v.o;d++)g=b.v[d].W.$t,a=b.v[d].Y$Z.I;-1!=a.3("/J/")?a=a.q("/J/","/s"+2+"-c/"):-1!=a.3("/D/")?a=a.q("/D/","/s"+2+"-c/"):-1!=a.3("/L-c/")&&0!=a.3("j:")?a="j:"+a.q("/L-c/","/s"+2+"-c/"):-1!=a.3("u.6/i/1a-N.C")?a="j://1.O.P.6/-1e/1f/1g/1h-1i/s"+2+"/1j.w":-1!=a.3("u.6/i/1k-N.C")?a="j://4.O.P.6/-1l/1m/1n/1o/s"+2+"/1p.w":-1!=a.3("u.6/i/1q.C")&&(a=-1!=7.3("1r.6")?7+"&s="+2:7);!0==k&&(d=!0==9?"1s":"",c+=\'<Q B="1u \'+d+\'"><i B="\'+d+\'" I="\'+a+\'" 1v="\'+g+\'" 1w="\'+2+\'" 1x="\'+2+\'"/></Q>\');c+="<R>"+g+"</R>";b=b.1z.$t.q(/(<([^>]+)>)/1A,"");""!=b&&b.o>p&&(b=b.1B(0,p),b+="&1C;",!0==n&&(b+=\'<a y="\'+f+\'">\'+x+"</a>"));c+=\'<a y="\'+f+\'">\'+b+"</a>";c+="</H>"}c+="</E>";1D.19(c)};',62,103,'||avatarSize|indexOf|||com|defaultAvatar|var|roundAvatar|||||||||img|http|showAvatar|undefined|typeof|showMorelink|length|characters|replace|link|||blogblog|author|png|moreLinktext|href|numComments|for|class|gif|s220|ul|feed|entry|li|src|s1600|hideCredits|s512|latest_recent_comments|rounded|bp|blogspot|div|span|alternate|rel|UPb7SL|32nw|name|More|gd|image|personal|5YeC_6|s80|googleusercontent|lh5|if|function|https|40|write|b16|QJRpUV7G9bc|break|raquo|NAMZejK41So|T0evV0_SSUI|AAAAAAAACso|ol6|PKkZipA|md_blogger_logo|openid16|k0U7v1WpNRs|T0euKMHQi_I|AAAAAAAACsg|DNqzinhvxt4|md_openid_logo|blank|gravatar|avatarRound|AAAAAAAABWE|avatarImage|alt|width|height|uGXI|content|ig|substring|hellip|document|34'.split('|'),0,{}))
</script>
<script type="text/javascript" src="http://lovelyandcrazi.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5"></script>

NOTA:

En naranja pones la URL de tu blog. ( o a lo mejor sale gris si es un enlace ya visitado).
Rojo tamaño de la letra del comentario.
Amarillo la fuente en la que quieres que esté escrito.
Verde, color de la letra del comentario
Azul, color del nombre del usuario que dejó el comentario.
Morado, tamaño del nombre del usuario.


¿Ves que fácil?

Ahora puedes dejarme un comentario para ver tu carita ahí :)

¡¡Espero que te haya gustado!!

Besos,

CÓMO AÑADIR UN BORDE ALREDEDOR DE LA COLUMNA EN BLOGGER

Lo advierto, hay blogs que quedan mejor sin el pero si te gusta y consideras que tu blog es menos soso con esto pos se lo pones y listo. Yo sólo te lo digo por si no quieres tener un blog muy recargado. 

Te lo voy a explicar paso por paso para que no te pierdas:

• Plantilla
• Editar HTML
• Y buscas pulsando (ctrl + f) (dentro del cuadro de los códigos, no fuera)

content-outer

Un poco más abajo verás que pone:

margin-bottom: 1px;
}

Esto sería un ejemplo, no es el definitivo. Sólo te digo que son en total 4 líneas pero no te apures, que es muy fácil.

border-right: 7px solid #000000

Ahora te lo explicaré paso a paso para que lo entiendas y puedas hacer tu misma tu código.

Quiere decir que me va a salir una línea de 7px de ancho en la derecha de la columna y en color negro.

1) border-right:

Significa obviamente que es el borde de la derecha.

En las siguientes líneas, una detrás de otra, deberías ir añadiendo los siguiente bordes.

Como la primera dice right (derecha).
La siguiente línea será igual pero diciendo left (izquierda).
La siguiente top (superior) - aunque si tienes barrita de Blogger arriba no hace falta.
Y la siguiente bottom (inferior).

2) 7px

Es el ancho de la línea. Obviamente cuanto mayor sea el número que le pongas, más gordita se verá la línea y viceversa.

3) solid

Quiere decir que es una línea sólida. Puedes cambiar esto por otras cosas.

En realidad se pueden poner bastantes cosas, pero yo recomiendo que si vas a poner un borde sea:

solid (línea lisa)
dashed (con guiones)
dotted (con puntitos)
double (doble)

4) #0000000

Es el color de la línea. Esto ya lo conoces. Y ya he explicado en post anteriores cómo saber el color que quieres. No lo repito porque es un tostón repetir siempre lo que ya he explicado varias veces. No te lo tomes a mal pero tienes que comprender que después de haberlo mencionado varias veces yo pienso que ya deberías saber cómo se hace.

Esto sería un modelo ya hecho. Ay, pillinas ;) cómo sé que algunas no os habéis enterado y que queréis un modelo para copiar y modificar a vuestro gusto. Pos no pasa nada porque aquí está vuestra solución.

border-right: 3px solid #fdb8b6;
border-left: 3px solid #fdb8b6;
border-top: 3px solid #fdb8b6;
border-bottom: 3px solid #fdb8b6;

No quites los puntos y comas porque si no el código no vale nada y no te sale.

Puedes ir probando diferentes combinaciones e ir dando a Vista previa hasta que tengas el reborde como te guste.

• Y una vez que ya te has decidido le das a guardar plantilla y listo.

Como ves es increíblemente fácil tener un diseño bonito y con apariencia profesional una vez de que has aprendido los básicos.

Besos,

CÓMO QUITAR "CON LA TECNOLOGÍA DE BLOGGER"

Me imagino que ya te habrás fijado en que Blogger tiene el gadget de attribution bloqueado, que quiere decir que no se puede eliminar.

Cuando entras en él te da la opción de escribir algo, pero siempre estará seguido con ese "con la tecnología de Blogger".

Blogger lo bloquea porque al ser un servicio gratuito tienen que hacer que se vea que ese blog es de blogger.

Te voy a explicar paso a paso cómo hacerlo:

• Plantilla
• Editar HTML
• Pulsas Ctrl y f y buscas:    Attribution
• En la línea en la que sale la palabra Attribution dos veces:
  Donde dice locked='true'
  Quitas true y pones false.
  Dejas todo lo demás igual. El false tiene que ir entre comas.
•  En la línea anterior:
  Donde dice al final showaddelement='no'
  Quitas el no y pones yes.
  Lo mismo, sólo esa palabra, todo lo demás igual.
• Guardar plantilla
• Cerrar

Ya está.

Ahora vas al gadget de attribution otra vez y te sale la opción de eliminar.

Si quieres poner el nombre de tu blog abajo como tengo yo, tendrías  que:

• Añadir gadget

• HTML
• Le escribes lo que quieras. Yo he puesto: 

Lovely and Crazy Blogs &copy; Cristina martinez

• Guardar

Si quieres centrarlo pon <center> al principio y </center> al final.

Besos,

CÓMO SUGERIR HISTORIAS SIMILARES AL PIE DE CADA POST

Seguro que has visto en algunos blogs como, debajo de cada post, nos sugieren historias similares.

Es una forma estupenda de que los demás vean que contenido sueles publicar en el blog. Te estarás preguntando ¿cómo se instala?. Porque no es un gadget de blogger. Es un servicio de Linkwhitin y debes instalarlo desde su página.

• Vas a su página web
• Escribes tu dirección de email
• La dirección de tu blog
• Eliges other porque si pinchas en blogger da error.
• Eliges el número de posts sugeridos que quieres que aparezcan.
• Y pinchas en Get Widget
• Te generará un código que tienes que pegar en tu plantilla HTML. Para eso pulsa ctrl y f al mismo tiempo, te saldrá el cuadrito de búsqueda en el que escribirás    </body>     das a enter, lo pegas justo encima y listo.

El problema es que en castellano pone "Quizás también le interese..."

Si quieres cambiarlo sólo tienes que seguir estos pasos:

• Editar HTML
• Buscas   <head>
• Justo debajo escribes   

 <script>linkwithin_text='Lo que queramos que salga'</script>

Quitas lo que yo te he puesto en azul por lo que quieras poner.

• Guardar plantilla
• Cerrar

Espero que te haya gustado este tutorial. No te olvides de comentar.

Besos,

COMO QUITAR SUSCRIBIRSE A: ENTRADAS (ATOM)

No me gusta que al final de los blogs ponga suscribirse a: entradas atom. Ya hay un gadget para suscribirse, así que no sirve de nada. Como puedes ver yo lo he quitado y mi pie de página está mucho más limpito. Te lo explico:

1. Ve a plantilla y luego pulsas en editar HTML.
2. Abre el cuadro de búsqueda pulsando al mismo tiempo las teclas (ctrl + f). Pero ojo, pulsa dentro del cuadro donde están todos los códigos como si fueras a escribir algo, pero no escribas nada. Si pulsas fuera te buscará las palabras en tu navegador en vez de en los códigos.
3. En el cuadro de búsqueda escribes: Blog feed links
4. Deberás ver algo como esto:

<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->

<b:if cond='data:feedLinks'>

<div class='blog-feeds'>

<b:include data='feedLinks' name='feedLinksBody'/>

</div>

</b:if>

 5. Tienes que borrar esta línea:

 <b:include data='feedLinks' name='feedLinksBody'/>

 6. Al borrarla queda un espacio entre la linea anterior y la siguiente. Borra    poco a poco los espacios de sobra, hasta que la línea anterior y la siguiente estén una debajo de la otra.

7. Aquí ves cómo se quedaría:

<div class='blog-feeds'>

</div>

8. Da a guardar plantilla y cierra el cuadro de búsqueda pulsando la x.

Besos,