Menu Estilo Acordeon - CSS3 - Wortit

>Menu Estilo Acordeon - CSS3 - Wortit

Read More

Editor De Texto HTML...

Editor De Texto HTML

El dia de hoy les traigo este magnifico editor de html Gratuito el cual podras editar tus textos html y agregarle estilo a todos Tus Textos HTML, Una Idea De Andy Gomez .

y Desarrollado Por Andy Gomez

Entra Haciendo Click Aqui

Muestra En Imagen...      

Si quieres dar una idea para el editor de texto para agregar una nueva opcion solo manda un mensaje por medio de nuestro  FORMULARIO DE CONTACTO

 [Un proyecto De Andy Gomez]

Read More

Nueva Edicion HTML de Blogger

Nuevo Estilo A La Edicion HTML de Blogger

y nuevas opciones.

La Nueva Edicion HTML De Blogger Nose Si Ya Le Has Hechado Un Vistazo pero bueno aqui te muestro una imagen de como es la nueva edicion html que blogger acaba de actualizar  blogger y que bueno en mi parecer este nuevo estilo que blogger nos brinda bueno esta super organizado para todo aquel que le gusta editar su plantilla por medio de HTML lo cual ahora esta un poco mas facil de edita ya que puedes encontrar un busscador y una barra de desplazamiento en la cual ves los widgets que puedes editar, Vista previa  en la misma en el mismo cuadro Donde aparece El HTML y ya no esa molesta pagina que se abria automaticamente al ir a vista previa y bueno muchas mas opciones que blogger le ha añadido a la nueva edicion HTML, Bueno esto es lo que les traigo y espero le hechen un vistazo a las nuevas opciones que puedes encontrar en este editor HTML 

Gracias por leer este post.

Read More

iBox ventanas modales.

ibox es un script que te permite crear ventanas modales, yo no se mucho sobre las ventanas modales para poder hacerles una reseña de que son y  su desarrollo .

en una ventana modal pudes mostrar, texto,imagenes,videos y otras cosas mas , segun lo que sepas sobre ventanas modales.

lo primero que deves hacer es poner estos codigos javascript 
antes de < / head>

<script src='https://sites.google.com/site/archivosdeelblogandy/ibox.js' type='text/javascript'/> <link href='https://sites.google.com/site/archivosdeelblogandy/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>

Y lo unico que deveshacer de ahora en adelante sera poner rel='ibox'  a todo lo que quiera pones en una ventana modal.

Algunos Codigos para mostrar elementos en una ventana modal.

Imagenes.
<a href="URL_imagen" rel="ibox" title="Texto optativo">ENLACE O TEXTO</a>

Documentos.
<a href="URL_pagina" rel="ibox" title="Texto optativo">ENLACE o TEXTO</a>

Videos.
<a href="http://www.youtube.com/watch?v=XXXXXXXXXXX" rel="ibox">ENLACE o TEXTO</a>

Ejemplos de iBox

iBox Imagen
iBox Texto
iBox Video

Gracias por leer este Post.

Read More

Mostrar Foto De Google+ En Los Resultados De Busqueda De Google

Bueno El dia de hoy les traigo esta magnifica idea, 
¿Como mostrar la foto del  autor en los resultados de busqueda de gogle?
es una pregunta que he visto en los comentarios en demas blogs, y no los queria dejar a ustedes con esa pregunta.

para poder poner esto deves sequir los siquientes pasos.

Vincular tu cuenta de google+ con la de blogger
Click Aqui para vincularla.
si ya la tienes vinculada omite este paso.

luego deves asegurarte de que en tu perfil de google+ aparezca en informacion
"colaborador en" [tus blogs] sino aparecen edita tu informacion de cuenta.

EXPANDE LA PLANTILLA DE ARTILUGIOS.
luego revisa que tengas el codigo del autor en la edicion HTML de tu plantilla.

Si no lo tienes, agregrega  Debajo de la siquiente etiqueta. el codigo.


<div class='post-footer'>

Codigo Del Autor, que deves tener.
sino tienes este, borra el que tienes y agrega este.



<span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <b:if cond='data:post.authorProfileUrl'> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta expr:content='data:post.authorProfileUrl' itemprop='url'/> <meta expr:content='data:blog.blogId' itemprop='articleBody/aiaBlogId'/> <meta expr:content='data:post.id' itemprop='articleBody/aiaPostId'/> <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'> <span itemprop='name'><data:post.author/></span> </a> </span> <b:else/> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta expr:content='data:blog.blogId' itemprop='articleBody/aiaBlogId'/> <meta expr:content='data:post.id' itemprop='articleBody/aiaPostId'/> <span itemprop='name'><data:post.author/></span> </span> </b:if> </b:if> </span>


Gracias Por Leer Este Post.

Read More

Contador De Usuarios En Linea.

Quieres tener este maravilloso contador de usuarios en linea en tu blog bueno en esta ocacion te enseñare como.

lo primero que deves hacer es ingresar a usuarios-online.com 
ahi te aparecera un cuadro de texto donde pondras el URL de tu pagina o blog

Luego cuando allas llenado ese cuadro de texto con el URL de tu pagina o blog . Vas a Crear Contador!

Luego te aparecera un codigo Javascript el cual solo deveras copiar y pegar en un elemento HTML/JAVASCRIPT en tu blog, en la parte que tu quieras.

Gracias por leer Este Post.

Read More

Elegir cuantos post mostrar en la portada.

¿quieres definir cuantos post mostrar?

bueno ahora te muestro un pequeño tutorial en el cual no tendras que ver tantos codigos para poder definir un solo numero.

bueno normalmente en algunas pagina te muestran como definir cuantos post quieres mostrar en tu portada con varios pasos. en los cuales intervienes en la edicion HTML de tu blog pero en esta ocacion te enseñare la forma mas facil.

primero deves entrar al inicio de la edicion de tu blog, luego entras a DISEÑO.

luego deves encontrar el gadget Entradas del Blog, y te vas a Editarlo.

Luego ya dentro de la edicion encontraras en una de las primeras opciones lo que buscabas.

luego solo defines con un pequeño numero cuantas entradas quieres que aparezcan.

Gracias por leer este post.

Read More

Etiquetas Estilo taringa

Etiquetas estilo Taringa.
en esta ocacion les dejare un estilo de etiquetas que podran añadirle a su blog, y es el estilo de etiquetas taringa
es un estilo color gris que muestra las etiquetas en forma de una etiqueta de compra
es facil de añadir y espero les funcione.

Primero debes poner las etiquetas en forma nube.

luego busca este codigo:


<span class='post-labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'>,</b:if></b:loop> </b:if> </span>

Elimina Este Codigo.


<b:if cond='data:label.isLast != "true"'>,</b:if>

Y Por ultimo colocas este codigo Antes de la etiqueta ]]>


.post-labels { margin: 0; padding: 0; } .post-labels a { float: left; position: relative; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjBJExdqapMcgkbqwB-Jph35pSJ2nRA1CtqRcctKIIX5ZTfU-IVlSfmLhvW3Q7_1Z4xpcQGqEuIbhEuBHZdoLzfummdj8vgIq1rM00InN0lw5gDt5PsOou3jN9yUnYROjBGgq9HYP4DYU/s400/tag-taringa-ajmrdesign.com.png") no-repeat bottom right; height: 24px; line-height: 24px; padding:0 10px 0 8px; margin: 0 0 0 25px; color: #333; font-size:13px; font-family: "Helvetica Neue",Arial,Helvetica,sans-serif; text-decoration: none; } .post-labels a:before { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjBJExdqapMcgkbqwB-Jph35pSJ2nRA1CtqRcctKIIX5ZTfU-IVlSfmLhvW3Q7_1Z4xpcQGqEuIbhEuBHZdoLzfummdj8vgIq1rM00InN0lw5gDt5PsOou3jN9yUnYROjBGgq9HYP4DYU/s400/tag-taringa-ajmrdesign.com.png") no-repeat; content: ""; width:15px; height: 24px; float: left; position: absolute; top: 0; left: -15px; } .post-labels a:hover { text-decoration: underline; }


Gracias por leer este Post.

Read More

Numerar Comentarios

Comentarios Numerados

Como Vez en la imagen muestra comentarios los cuales estan numerados
y las respuestas estan numerados pero de una diferente manera.

bueno supongo que te preguntas pero como estan numerados y si los numero con codigos
bueno esto es un codigo que mas o menos es un sistema de numeracion distinto a los que algunos blogs tienen y bueno este codigo el dia de hoy selos dejo para que sus visitantes no se pierdan en buscar un comentario y para demas cosas que les pueda servir.


.comment-thread ol { counter-reset: contarcomentarios; } .comment-thread li .comment-header:after { content: counter(contarcomentarios,decimal); counter-increment: contarcomentarios; float:right; font-size: 20px; color: #000; margin-top: -4px;} .comment-thread ol ol { counter-reset: contarbis; } .comment-thread li li .comment-header:after { content: counter(contarcomentarios,decimal) "." counter(contarbis,decimal); counter-increment: contarbis; float: right; font-size: 16px; color: #000; margin-top: -4px; }

Bueno En el codigo puedes encontrar varias etiquetas las principales que puedes editar son:
Color:#codigo de el color; en esta puedes definir el color de los numeros
la primera etiqueta color:; defines el color del numero de los comentarios
y la segunda etiqueta color:; defines el color del numero de las respuestas

font-size:12px; defines el tamaño de el numero en pixeles
al igual que la etiqueta color:; aparece 2 veces
la primera numero de los comentarios
la segunda el numero de las respuestas


Gracias por leer este post.

Read More

Comentarios Aniados Tipo comic

Comentarios Aniados Tipo Comic        

Como veran en la imagen muestro los comentarios tipo comic los cuales son los que trae todo blog los comentarios aniados a los cuales seles agrego un poco de estilo con CSS y ahora les dejo el codigo Les dejare las intrucciones como agregar el estilo a estos:

/* Estilo bocadillo comic ----------------------------------------*/ .comments .comment-block { position: relative; margin-top: 10px; margin-left: 60px; padding: 10px; color: #333333; background: #eeeeee; border: 4px solid #ccc !important; border-radius:10px; } .comment-thread li .comment-block:before { position: absolute; left: -26px; content: "\25C4"; color:#cccccc; } .comments .avatar-image-container { width: 70px; height: 70px; max-height: 60px; margin:0 0 0 -22px; padding: 5px; border-radius: 60px; } .comments .avatar-image-container img { overflow:hidden; width: 60px; height: 60px; max-width: 60px; border:0 !important; border-radius:60px; }

agrega este codigo entre  <![CDATA[/*  y   
entre los demas titulos que encontraras ahi como por ejemplo:


/* Cabecera
----------------------------------------------- */

Puedes poner este codigo en la terminacion de este u otros codigos.

Gracias por leer este post.

Read More

Cambiar El Tamaño De Las Imagenes HTML

Para Cambiar El Tamaño De Una Imagen, Normalmente Tendriamos Que Entrar A Ciertos Programas y luego dentro de ellos cambiar el tamaño luego guardarla y bueno es algo costoso pero ahora hay una nueva forma en la cual no tienes que hacer tantos pasos solo debes pegar este pequeño codigo html definir el Alto [height] y ancho [widht] de tu imagen. Bueno Este Es el codigo que deveras pegar, definir ciertas partes etc... <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL DE EL ENLACE"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 193px;" src="URL DE TU IMAGEN" border="0" alt=""id="BLOGGER_PHOTO_ID_5437914528676382722" /></a> Con La Etiqueta widht defines el ancho y Con la etiqueta height defines el alto Luego define el url de el enlace de tu imagen y el url de tu imagen.

Read More

Nueva Imagen Blossh.

Nueva Imagen De Blossh...

Como veran este blog acaba de empezar hace unos dias y bueno al principio usabamos una plantilla que no mucho me parecia buena, y me propuse crear una plantilla que les gustara y que sea mas ordenada y bueno esto es lo que pienso una plantilla ordenada y bueno lo unico que espero es que les guste, y que con esta nueva plantilla pueda organizar mejor las etiquetas y los archivos que proximamente subire, por ahora vamos empezando no llevamos muchas publicaciones de hecho casi nada pero con paciencia lograremos tener todo lo que necesites para poder desarrollar tu web y Respuestas a todo lo que necesites.

Gracias por visitar Blossh.




LLevanos En Tu Web:

<a href="http://blossh.blogspot.com"><img alt="Blogger|Blossh" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnNn9WrYAc8K7VxPWGVBoO58agdiK0KmhBvbJQdUeicaMEUefmAdXD7UeH1sKqeouDULq64Ub-sukaC_pEjsa6TL3b8hdumt-Rya8Z93hAcuOSE0n_g8aCw6gHjs75oQtS1SbNRQEEtH8/s1600/blossh-blog.png"</font><font face="Georgia, 'Times New Roman', serif"></a><div style="font-family:cursive; font-size="10px"">Blossh Ayuda Web</div>

Blossh Ayuda Web

Read More

Menu Desplegable.

El Menu Que Hoy Les Dejare Es Un Menu Parecido Al Que Tenemos Aun En El Blog Pero Por Defecto El

Read More

Buscador Deslizante.

Como Muestra La Imagen, El Buscador Que Les Brindare Se Desliza Al Poner El Mause Encima De El Con Una "B" que significa Buscar Y Alavez El El Icono De Blossh.

Read More

Texto 3D

Texto 3d Para Los Titulos o Portada De Tu Blog.
Bueno Conforme Va Pasando El Tiempo Hay Mas Cosas Que Aprendes Sobre El Mundo De El Desarrollo Web Y En Esta Entrada Aprenderas Sobre Como Crear Un Texto 3D

Read More

Musica En Tu Blog. [no personalizable]

CADENATOP En Tu Blog.
Cadena Top 
Web: Cadenatop.com 
Cadenatop Es Una Pagina Web Que Trata Sobre Musica Etc...

Read More

Chat De Google Talk' Para Tu Blog

Google Talk
hoy en dia hay variedad de redes sociales que podemos haceder y 

Read More

Twitcker, Mostrar Tweet Tipo Marquesina

Twitcker Es Un Nuevo Servicio Gratuito que te permite Mostrar Tus Tweets Tipo

Read More

Reproductor Para Tu Web

Quieres Un Reproductor De Musica En Tu blog?

Read More