Delicious LinkedIn Facebook Twitter RSS Feed
Showing posts with label Post. Show all posts
Showing posts with label Post. Show all posts

Sección comentarios en Blog Blogger cambio de posición y diseño de imagen desde plantilla

Actualización de este tema: Sustituir "Comentarios".

Este tema es muy sencillo si seguís los pasos,y queda muy vistoso,podéis ver un notable cambio del modelo básico que puede ofrecer una plantilla,a las grandes posibilidades que tenemos al poder mostrar tanto "el numero de comentarios"(con tamaño editable),como poner la imagen que queramos "gif",que pondremos según el diseño del blog y que indicará mas visualmente cual es la sección para comentar en un blog.

Pasos:

1ºEste paso se hace por que si no se hace,salen los comentarios arriba del post y abajo del post " 2 veces ", si lo borramos solo salen en un lado como debe quedar,vamos a nuestra plantilla "Edición html" y "expandimos artilugios"... localizamos con las teclas de nuestro teclado "Control+F"buscamos lo siguiente: <span class="post-comment-link"> "Incluido este código y hasta: </span> ¡Lo borramos! ,(Son unos 10-12 renglones "cuidado no borrar más,ver imagen).2ºAhora una vez borrado esa pequeña parte:Buscamos ahora: <b:includable id='post' var='post'> justo detrás "Si no hay espacio damos a Enter",ponemos el siguiente código:
<span class='post-comment-link'>
<
b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<
a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<
b:if cond='data:post.numComments == 1'>1 <b:else/>
<
data:post.numComments/> </b:if></a>
</b:if>
</b:if>
</span>

3ºAhora buscamos: ]]></b:skin> y justo "antes" ponemos:
.comment-link {
font-size: 150%;
background: url( "URL de la Imagen que se quiera" ) no-repeat top right;
height: 50px;
width: 53px;
text-align: center;
float: right;
margin: 5px 0 0 0;
padding:5px 2px 0 5px;
}

4ºDamos a vista previa,y nos aseguramos que no hay errores y guardamos.
* Los valores de tamaño del numero de comentarios "font-size: 150%;"podéis ajustarlos para el efecto deseado,y en:background: url( "URL de la Imagen que se quiera" ) ,hay ponemos entre los paréntesis la dirección de la imagen que queramos(una vez modificado se previsualiza la plantilla y se guarda).

-Estas son algunas imagenes para poner:

*Aquí dejo las "url" o direcciones de algunas imagenes que están muy bien para este motivo,para ver la animación,tamaño y la calidad de la imagen pulsar sobre el enlace de cada imagen,una vez elegida la direccion de imagen copiar y pegar sobre el código anterior "entre los parentesis ("AQUI LA URL DE LA IMAGEN") y comillas:Ejemplo:background: url( "http://www.gifmania.com/email/buzonesrojos/bnm.gif" )

Imagen

Url de la Imagen
http://www.gifmania.com/email/buzones/mailh.gif
http://www.gifmania.com/email/buzones/cartab.gif
http://www.gifmania.com/email/buzonesmarillos/buzon2.gif
http://www.gifmania.com/email/buzonesrojos/bnm.gif
http://www.gifmania.com/email/buzonesazules/O_mail01.gif
http://www.gifmania.com/email/cartas/981.gif
http://www.gifmania.com/email/cartas/animai44.gif
http://www.gifmania.com/email/cartas/val008.gif
http://www.gifmania.com/email/cartas/roule-env.gif
http://www.gifmania.com/email/cartas/email.gif
http://www.gifmania.com/email/cartas/correo6b.gif
http://www.gifmania.com/email/cartas/teroi.gif
http://www.gifmania.com/email/cartas/mailme2.gif

Widget para ver temas relacionados para Blogs,muy sencillo y útil.

Bueno esto mas que un "Gadget" es un servicio GRATIS que nos da esta pagina; LinkWithin;

*Historias Relacionadas Bajo Cada Post(vinculándose a historias relacionadas de su archivo de blog.)
*Recuperan e incluyen en un índice todas las historias de su archivo de blog, no historias solamente recientes, haciéndolos accesible a los lectores nuevos u ocasionales de su blog que de otra manera no los encontraría.
*Diseño elegante, Discreto, labrada y armoniza con su diseño de sitio.
*Despreocupado Instalar
*Es libre y sin anuncio. ¡Esto toma un minuto y controlando el Gadget desde su blog, ningún signup requerido!

Pasos:
1º Rellenar: Email,url del Blog,plataforma del Blog por ejemplo "Blogger",y si queremos que se vean 2,3 o 4 historias relacionadas...(la casilla se marca si tenemos un fondo de Blog oscuro).
2ºEn la pagina que se habre le damos "Click" a donde dice; "Install Widget"...(desde hay accedemos a nuestro Blog,donde elegimos el Blog,y el "titulo"...le damos a "añadir artilugio" y ¡ya lo tenemos!.

*Si el Widget donde debería poner; "Quizás también le interese",sale en Inglés,una vez instalado (según los pasos anteriores),vamos como muestra la imagen de abajo,a Diseño/Elementos de pagina/donde veremos el "Widget" y procederemos a "EDITAR" para poner el Titulo en Español,guardamos y ya lo tenemos.

Texto e imagen en movimiento con unas simples etiquetas

Hoy os diré como poner mensajes en movimiento con "unas simples etiquetas" de html,donde en este mismo mensaje podéis añadir una imagen ya sea animada o estática,podréis verlo ir de lado a lado , y es muy útil para dar alguna noticia o un mensaje de bienvenida.

Os digo como se hace, vereis que fácil,no vais a tardar ni 20 segundos:
1-Primer paso "solo mensaje":
CÓDIGO:
<marquee>AQUÍ EL TEXTO</marquee>

2-Ahora si queréis introducir una imagen + texto seria así:
CÓDIGO:
<marquee img="AQUI LA IMAGEN">AQUÍ EL TEXTO</marquee>

*Podéis ponerlo en post o en barra lateral-cabecera.Según sea la necesidad.

Cambiar el Nombre del autor en los Post de Blogger "Diseño personalizado".

- Estas imagenes ya generadas "de nombres" sirven para en nuestros Blogs "cambiar el nombre del autor" como podéis ver AQUÍ Podéis buscar vuestro nombre a ver si aparece "y os gusta el diseño",si vuestro nombre no aparece,y necesitáis dicha imagen,os la puedo generar yo rápidamente,solo decirme el "Color" y elegid un "Tipo de letra" o "Imagen", en los cuadros que faltan las pondré para "las peticiones":
Libre Libre Libre Libre

*Pulsar sobre la imagen "Botón derecho" y "Guardar como..." para subir la imagen ir AQUÍ La "url" de la imagen es la que os hace falta.

Cambiar el nombre del autor por una imagen "otros usos de imagen" Blog Blogspot.

1-Debemos primero que generar la imágen que sustituirá el nombre del autor del post o entrada...

y lo haremos ingresando AQUI , donde comenzaremos a fabricar nuestra imágen.

2-Luego de generada la imágen la subimos al hosting de imágenes,si quieres saber donde subir tu imagen generada gratuitamente ve AQUÍ para después poder obtener la URL de la misma .

3- Ahora vamos a nuestra plantilla en EDICION HTML (Guardamos una copia de seguridad siempre) y, expandiendo artilugios, ubicamos con nuestro localizador de códigos (CTRL+F) el siguiente código:
<data:post.author/>
4-Ahora una vez localizado,lo borramos y sustituimos por esto otro:
<img src="Aquí la URL de la imágen"/>
5-Guardamos.Comentar que este código sirve para sustituir varios "iconos" o "imagenes" las cuales se pueden buscar en la plantilla,poniendo imagenes de nuestro gusto.
*Alguien me pregunto en el chat que "queria sustituir el enlace (Comentarios) por una imagen",debo decir que demomento creo saber como se hace pero "parece que blogger no lo permite" seria de la siguiente manera:
-Pulsa "Ctrl + F" busca en tu plantilla html... <data:postCommentMsg/> y este código es el que se tiene que sustituir por el que mas abajo viene en "Rojo" el "Azul" es solo para que te sitúes.
<p class='comment-footer'>
<
a expr:href='data:post.addCommentUrl' expr:onclick='data: post.addCommentOnclick'
><img src="url-de-la-imagen"/></a>
</p>

-Si el elemento "Comentarios" tiene "icono" al lado ese icono se cambia encontrando esto:

.comment-link {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAUm1nCjHwsO-TEqKk1VpyIhzcqewQtMRwsbu5KAnBeqE8BLH_WvKdVBWcNHA-_v49CB9Xx5UfV5GrKm4cWTvt8eAZ03mGZ7dsTki7THoJcqmPdq_ntzl9Ha-e1b6FXoSOZM47UmSiGY/s1600/commbg.gif) no-repeat left center;
padding-left: 20px;
float: right;
}

-Simplemente se cambia la "url" de la imagen por otra que queramos ico=16x16.
*Investigaré el caso mas a fondo...

Mostrar Post expandibles "Leer más",para Blog Blogger

*(Imagen sacada de http://www.motogpmotor.blogspot.com/ )
La página principal de tu blog generalmente muestra todo el contenido de cada unos de tus posts. Si estos son mayores a 2 párrafos, tus visitantes se verán en dificultades para encontrar rápidamente algún tema de interés para ellos dado que van a necesitar desplazarse hacia abajo en la página,además demasiados Post ralentizará la carga del mismo,incluso habrá gente que se cansará de esperar e irá a otra parte. Aquí es donde los post con resúmenes expandibles ayudaban en el viejo blogger. Este hack sirve para el nuevo blogger,la página principal sólo mostrara los resúmenes de los posts y cuando den click en "leer más", el post completo aparecerá en la página principal ...
(Antes de empezar guarden una copia de seguridad de su plantilla)
-Paso 1: Vamos a "Diseño","Edición de html",(sin expandir plantilla) a continuación de <head> pegamos el siguiente código: <script src="'http://www.anniyalogam.com/widgets/hackosphere.js'" type="'text/javascript'/"> a continuación este otro

CODIGO:

-Paso 2: Guardamos y ahora damos "Expandir plantillas y artilugios", Ahora buscamos "de la mitad de la plantilla hacia abajo" : <b:includable id='post' var='post'> y después de: <div class='post" "vemos que no esta acabado" ponemos esto: expr:id='"post-" + data:post.id'>

-Paso 3: Ahora a partir de hay en unas 12 lineas mas o menos copiamos detrás de: <div class='post-body'>ponemos esto: <b:if cond='data:blog.pageType == "item"'>
-A continuación vemos otro código: <p><data:post.body/></p> y detrás de este ponemos todo lo siguiente:
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>LEER MÁS...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>CERRAR LECTURA...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

-Paso 4: Damos a guardar,"habiendo comprobado antes que todo está bien",y nos dirigimos a "Configuración",y "Formato",abajo del todo hay un cuadrito,hay intruducimos lo siguiente:
Escribe tu resumen aquí.
<span id="fullpost">
Escribe el resto de tu post aquí.
</span>

-Paso 5: Damos a guardar,y ya a la hora de escribir un "Post" saldrá automaticamente,la zona en la que poner el "resumen" y la zona "donde poner el Post completo",si no la necesitas la borras y escribes el Post sin "Leer más".

-Si usas algunas de estas ayudas ofrecidas gratis "se agradece agreguen el banner de Ayuda Blog" en la barra lateral derecha,disfrutenlo.si quereis ver un ejemplo de como queda ir AQUÍ podeis ver y probar que funciona correctamente "lo que si noté es que a la hora de introducir los codigos en la plantilla en html,al guardar "a veces" da "error de elementos html",(Solo teneis que decirmelo ¡y os lo soluciono!).




Design, Post and Share by Shadowness.Com

CLICK PARA ENTRAR Y VER MAS FOTOGRAFIAS
No te conformes con una imagen, entra aquí y míralas todas!