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

Hola amigos, hoy vengo a compartir con ustedes una plantilla que encontré en la red y como realmente me encantó quiero compartir con ustedes, la plantilla en cuestión se llama "donface" y pueden ver un demo del mismo

DEMO

DESCARGAR

Si les pide contraseña para descomprimir es ésta

(ajmrdesign)Qh3^L8h=-)12m*|4f(C1Oiyx$}fYLg

Para los íconos sociales hay que entrar en diseño y añadir estos enlaces de abajo, los enlaces a la redes sociales.

<a class='iconos icono1' href='javascript:void(0);'>Twitter</a>
<a class='iconos icono2' href='javascript:void(0);'>Pinterest</a>
<a class='iconos icono3' href='javascript:void(0);'>Google plus</a>
<a class='iconos icono4' href='javascript:void(0);'>Facebook</a>

Eso es todo, por favor respeten los el CopyRight que puso el creador de la plantilla, repito, no son míos sino del creador del tema,

Plantilla para imagenes de Facebook!

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

Una modificacion mas de IdTabs, ahora con el estilo de AnimeID.Tv... veamos como agregarlo:

1. Buscamos la etiqueta </head> y antes de ella agregamos las siguientes librerias:

<script src='http://dl.dropbox.com/u/23616660/ihojosestudios/FUTUdownloads/js/tipsy/jquery.tipsy.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {

 //Default Action
 $(".tab_content").hide(); //Hide all content
 $("ul.tabs li:first").addClass("active").show(); //Activate first tab
 $(".tab_content:first").show(); //Show first tab content
 
 //On Click Event
 $("ul.tabs li").click(function() {
  $("ul.tabs li").removeClass("active"); //Remove any "active" class
  $(this).addClass("active"); //Add "active" class to selected tab
  $(".tab_content").hide(); //Hide all tab content
  var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
  $(activeTab).fadeIn(); //Fade in the active content
  return false;
 });

});
</script>

2. Agregamos las siguientes lineas antes de la etiqueta ]]></b:skin>

/* CSS Tabs AnimeID.Tv jQuery */
.tab_container {
display:table;
width:100%;
padding:10px 5px 05px;
margin:0;
table-layout:fixed;
margin-top:-23px;
}
.tab_content {
width:568px;
height:340px;
background:black url('http://dl.dropbox.com/u/6188287/files/template/load-cap.gif') no-repeat 50% 325px;
box-shadow:0 1px 1px #BBB;
overflow:hidden;
margin:0 auto;
position:relative;
text-align:center;
}
ul.tabs {
margin-left:-35px;
margin-right:-1px;
}
ul.tabs li:first-child:last-child{border-radius:4px 4px 0 0}
ul.tabs li:first-child{border-radius:4px 0 0 0}
ul.tabs li:last-child{
border-left:1px solid #4b6170;
border-right:1px solid #4b6170;
border-radius:0 4px 0 0;
}
ul.tabs li {
list-style:none;
padding:10px;
margin:0;
display:table-cell;
text-align:center;
box-shadow:inset 0 1px 0 0 #8da4b3,0 1px 2px rgba(0,0,0,0.2);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#6c899c),color-stop(1,#4b6170));
background:-moz-linear-gradient(center top,#6c899c 5%,#4b6170 100%);
background-color:#6c899c;
border-top:1px solid #4b6170;
border-bottom:1px solid #4b6170;
border-left:1px solid #4b6170;
border-right:0;
color:white;
font-family:arial;
font-size:9px;
text-transform:uppercase;
text-decoration:none;
text-shadow:0 1px 0 #354752;
opacity:.9;
line-height:8px;
cursor:pointer;
position:relative;
-webkit-transition:opacity 300ms ease-in-out;
-moz-transition:opacity 300ms ease-in-out;
width:128px;
}
ul.tabs li a {
text-shadow:0 -1px 0 #233641;
color:white;
}
ul.tabs li:hover {
color:white;
}
html ul.tabs li.active, html ul.tabs li.active  {
background:-webkit-linear-gradient(#3e5664,#a7a7a7);
background:-moz-linear-gradient(#3e5664,#a7a7a7);
box-shadow:none;
opacity:1;
text-shadow:0 -1px 0 #233641;
border:0color:white;
}

3. Agregamos lo siguiente en la entrada donde se mostrara la caja de videos modificando lo resaltado en verde:

<ul class="tabs">
<li><a class='tip' title="Servidor 1" href="#tab1">Opcion 1</a></li>
<li><a class='tip' title="Servidor 2" href="#tab2">Opcion 2</a></li>
<li><a class='tip' title="Servidor 3" href="#tab3">Opcion 3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div align="center">
AQUI CODIGO REPRODUCTOR 1
</div>
</div>
<div id="tab2" class="tab_content">
<div align="center">
AQUI CODIGO REPRODUCTOR 2
</div>
</div>
<div id="tab3" class="tab_content">
<div align="center">
AQUI CODIGO REPRODUCTOR 3
</div>
</div>
</div>

IDtabs Animeid.TV | Editado por Danikallpa para blogger

Leer +

NearVillalobos

Algunos se preguntarán -¿para qué poner un buscador en mi blog? Bueno, piensa que si tienes muchos post publicados y aunque tengas todo bien etiquetado talvez se les dificulte a tus lectores encontrar alguna información que hayas publicado en el pasado.
Así que acá van tres formas de poner un buscador en el blog. El primero es muy simple, está basado en Javascript y el aspecto es muy sencillo.

Para agregarlo entra en Dieño | Elementos de la página | Añadir un gadget | HTML/Javascript. Y pega este código:

<center><form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form></center>

El resultado será este:

======Ejemplo======

 

======Ejemplo======

Para el segundo buscador entra en Diseño | Elementos de la página | Añadir un gadget y eligeCuadro de búsqueda. Ahí selecciona las opciones, por si quieres que las búsquedas sean sólo en el blog o en la web. Cabe señalar que los resultados los mostrará en el área de los post, al igual como las opciones de búsqueda en el blog o en la web.

Agregar Buscador a tu pagina de blogger

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 +