NearVillalobos

Crear un blog exitoso no es fácil. Pero tampoco es imposible. Muy a menudo ves bloggers tratando de hacer algo con sus blogs, pero hay muchos de ellos que no encuentran el éxito con sus blogs.Aquí hay algunos de los pasos más importantes que debes efectuar de forma que puedas crear un blog exitoso:

1. Escoge una temática para tu blog:

Es la primera decisión que debes tomar. Escoge una temática que ames -no quiero decir AMOR!- Solo que no te debe ser difícil escribir contenido de calidad en tu blog.

2. Escoge un buen nombre para tu blog:

Supón que quieres escribir acerca del “Basketball”. Y entonces escoges un nombre que esta muy relacionado con este tema. Por ejemplo, “SuperBasket” podría ser un buen nombre para este blog. Por supuesto, debes mirar si este nombre ya lo tiene otro blog, si no es así, regístralo lo más pronto posible.

3. Escoge una plataforma para tu blog:

Es muy importante que te instruyas sobre las plataformas para blogs. Hay varias plataformas que puedes escoger, solo observa: Consejos para bloggers novatos Parte 2: ¿Como comienzo?.

Míralas todas y escoge la que más te guste.

4. Escoge una plantilla para el blog:

Cuando hayas escogido la plataforma para el blog, debes escoger una plantilla para el blog. Hay una gran cantidad de plantillas disponibles en toda la Internet que hacen de esta parte, la más divertida de todas -a mi parecer  .

5. Escoge tu frecuencia de publicación:

Este es uno de los factores más importantes a decidir. Cuando tu empiezas a publicar, debes hacerlo de forma regular así tus lectores sabrán que esperar de ti. Si empiezas a publicar como un loco por un tiempo y después no publicas nada por algún tiempo, te encontrarás con la dificultad de hacer que tus lectores sigan regresando.

6. Sé siempre activos en la blogósfera:

Visita otros sitios, si tienes que decir algo en otros blogs, dilo, no solo lo piensas y te vas, únete a comunidades sociales en internet (recomiendo para comenzar: MyBlogLog y Technorati) interactúa con otros bloggers alrededor de la web.

7. Escribe artículos interesantes y de calidad en tu blog:

Si puedes hacer esto, tienes un futuro en la blogósfera. Un artículo que te explica más este paso y el quinto paso es: Cantidad vs Calidad: ¿qué es más importante?.

Si piensas que existen otros pasos que pueden ayudar a que un blog sea exitoso, solo ponlos aquí mediante un comentario.

Fuente: Trazos-web

7 pasos importantes para crear un blog exitoso

Leer +

NearVillalobos

Hace ya algunos dias, me preguntaron, Cuales son los primeros pasos de como crear tu propio blog ( WEB)

Bueno, este tutorial es propio, donde yo mismo, subire las imagenes demo para mostrarles a ustedes..

Los pasos que se deben de seguir para crear un blog, o al menos lo basico!

Para empezar, deben de saber que un blog de blogger es de el proovedor www.blogger.com

Asi que primero que nada entrar a la pagina web www.blogger.com

Debes tomar en cuenta, que debes estar registrado en Google para poder acceder...

Si no tienes cuenta Gmail o google, registrate una, Es muy facil...

Registrar cuenta Google

una vez iniciada la sesión , simplemente, debes dar clic en el botón NUEVO BLOG que esta a la izquierda de la pagina principal de blogger!:

ejemplo de boton!

Luego de dar clic en Nuevo blog, se abrira esta ventanita:

Una vez clic en crear blog , debes ingresar el titulo de tu blog...

luego la url que desearias..

En mi caso es " Codigoblogger"

luego selecciono la plantilla deseada ( sencillo como recomendado )

una vez echo esto, clic en crear blog, y saldra algo como este ejemplo:

Algo asi es como aparece para darse cuenta que el blog esta creado, en mi caso, use un ejemplo real..

Aqui esta la url ejemplo: http://democds.blogspot.com/

Listo, para crear una entrada nueva, simplemente clic en donde esta el lapiz en color naranja...

Tal vez te interese:

en construccion!

Pasos de Como crear un blog de blogger?

Leer +

NearVillalobos

Bueno, esta vez e actualizado mi primera plantilla que desarrolle, a long time! .. le puse el bloque de generos con esa flechita para colocar mas generos .. ! las entradas ya tienen un estilo definido, se le agrego los idtabs + commentbox de facebook y botones sociales, para compartir las entradas, descarguenla!!! esta rebuena! ( Panchisweb ) 

Click en la Imagen para Descargar

PLANTILLA BLOGGER ANIMEID ( panchisweb )

Leer +

NearVillalobos

Bueno después de un largo tiempo de ocupaciones vuelvo a publicar algo, se trata de otro álbum para los que usan muchas imagenes en una sola entrada pero la peculiaridad de este es que muestra por cada sección 3 imagenes, puede ser útil para muchas cosas como por ejemplo si tienen un blog de imagenes pueden hacer una sección con este álbum y por cada elemento colocar tres imagenes correspondiente a esa categoría, si es naturaleza entonces de plantas, si es de fauna entonces animales, de esa forma al darle click llevara a sus usuario a una entrada con todas las imagenes correspondiente a esa categoría, pero en fin, el uso que le den corre por cuenta de cada webmaster, yo solo les comparto mis creaciones n_n

Si lo vas a incluir dentro de una misma pagina en html recuerda incluirlo dentro de las etiquetas corresponientes, ejemplo:

<style type="text/css">

...aqui el codigo...

</style>

  Si usas blogger no incluiremos estas etiquetas, nos vamos a dirigir a Plantilla > Edición html y buscaremos ]]></b:skin>ensima de eso ponen esto:

#multi-img {
    clear: both;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px;
    width: 910px;
}

.corte-img {
    background: #222;
    float: left;
    height: 184px;
    margin: 2px;
    overflow: hidden;
    position: relative;
    width: 222px;
}

.corte-img img {
    left: 0;
    margin-left: -25px;
    margin-top: -25px;
    position: absolute;
    top: 0;
    opacity:1;
    z-index:10;
}

/******* Todas las propiedades que usan transition para regresar *******/
.corte-img img, .corte-img:hover img.zc, .corte-img > a, .corte-img span {
    transition: all 500ms ease-in-out 0s;
    -moz-transition: all 500ms ease-in-out 0s;
    -o-transition: all 500ms ease-in-out 0s;
    -webkit-transition: all 500ms ease-in-out 0s;
}
/**********************************************************/


.corte-img:hover img.zc, .corte-img:hover img.zb, .corte-img:hover img.za {
    opacity:0;
}

.corte-img:hover img.zb {
    transition: all 500ms ease-in-out 1s;
    -moz-transition: all 500ms ease-in-out 1s;
    -webkit-transition: all 500ms ease-in-out 1s;
    -o-transition: all 500ms ease-in-out 1s;
}

.corte-img:hover img.za {
    transition: all 500ms ease-out 2s;
    -moz-transition: all 500ms ease-out 2s;
    -webkit-transition: all 500ms ease-out 2s;
    -o-transition: all 500ms ease-out 2s;
    margin-left: -100px;
    margin-top: -70px;
}

.corte-img > a {
    display: block;
    height: 184px;
    line-height: 184px;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index:50;
}

.corte-img span {
    color: #AFAFAF;
    font-family: Arial,Helvetica;
    font-size: 18px;
    font-weight: bold;
    opacity: 0;
    position: relative;
    top: -60px;
}

.corte-img:hover span {
    opacity:1;
    top:0;
    transition: all 500ms ease-in-out 2.3s;
    -webkit-transition: all 500ms ease-in-out 2.3s;
    -o-transition: all 500ms ease-in-out 2.3s;
    -moz-transition: all 500ms ease-in-out 2.3s;
}

por ultimo la estructura html, ubiquenla en donde deseen el efecto:

 <div id="multi-img">


<div class="corte-img">
<a target="_blank" href="#">
<span>Click para ver mas</span>
    <img class="za" src="url de la imagen 1" />
    <img class="zb" src="url de la imagen 2" />
    <img class="zc" src="url de la imagen 3" />
</a>
</div>

<div class="corte-img">
<a target="_blank" href="#">
<span>Click para ver mas</span>
    <img class="za" src="url de la imagen 1" />
    <img class="zb" src="url de la imagen 2" />
    <img class="zc" src="url de la imagen 3" />
</a>
</div>

<div class="corte-img">
<a target="_blank" href="#">
<span>Click para ver mas</span>
    <img class="za" src="url de la imagen 1" />
    <img class="zb" src="url de la imagen 2" />
    <img class="zc" src="url de la imagen 3" />
</a>
</div>


</div>

Eso seria Todo! 

Multi fade album CSS3

Leer +

NearVillalobos

Pues paso rapido a dejarles estos botones que diseñe hace un rato, estan disponibles en 5 colores, tienen efectos hover y active, los desarrolle usando solo CSS3 y es compatible con todos los navegadores exceptuando versiones viejas, bueno es muy sencillo, solo tienen que hacer esto:

Si lo vas a incluir dentro de una misma pagina en html recuerda incluirlo dentro de las etiquetas corresponientes, ejemplo:

<style type="text/css">

...aqui el codigo...

</style>

  Si usas blogger no incluiremos estas etiquetas, nos vamos a dirigir a Plantilla > Edición html y buscaremos ]]></b:skin>ensima de eso ponen esto:

 

/*botones GZero*/

.nw-btn {
    border-image: none;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-block;
    font-size: 13px;
    font-family: Arial;
    line-height: 20px;
    margin: 0;
    padding: 4px 12px;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-style: solid;
    border-width: 1px;
    color: #FFF !important;
    text-decoration: none !important;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.nw-btn:hover {
    text-decoration: none !important;
}
.nw-btn:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}
/*Blanco*/
.nw-btn.white {
    background: #F5F5F5;
    background-image: linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
    background-image: -o-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
    background-image: -moz-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
    background-image: -webkit-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
    background-image: -ms-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E6E6E6),color-stop(1, #FFFFFF));
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75) !important;
    color: #333 !important;
}
.nw-btn.white:hover {background:#E6E6E6;}

/*Azul*/
.nw-btn.blue {
    background: #49AFCD;
    background-image: linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -o-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -moz-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -webkit-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -ms-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #2F95B4),color-stop(1, #5BC0DE));
}
.nw-btn.blue:hover {background:#2F96B4;}

/*Verde*/
.nw-btn.green {
    background: #5BB75B;
    background-image: linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -o-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -moz-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -webkit-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -ms-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #51A351),color-stop(1, #62C462));
}
.nw-btn.green:hover {background:#51A351;}

/*Naranja*/
.nw-btn.orange {
    background: #FAA732;
    background-image: linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -o-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -moz-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -webkit-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -ms-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F89306),color-stop(1, #FBB450));
}
.nw-btn.orange:hover {background:#F89406;}

/*Rojo*/
.nw-btn.red {
    background: #DA4F49;
    background-image: linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -o-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -moz-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -webkit-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -ms-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #BD362F),color-stop(1, #EE5F5B));
}
.nw-btn.red:hover {background:#BD362F;}

/*Fin botones GZero*/

y listo, ya tienen los botones en su web, ahora para hacer uso de ellos simplemente a una etiqueta "a" le agregan el atributo "class" de la siguiente manera:

 

<a class="nw-btn white" href="#">Boton Blanco</a> 

 "white" lo cambian por el color que quieran entre uno de estos:

white
blue
green
orange
red

 

 por ultimo les dejo una vista previa de los botones:

Botones GZero CSS3

Leer +