Anuncios de Google AdSense y los Blogs

Si tienes un blog, o estas pensando en abrir uno blog, entonces definitivamente debes leer este articulo. Esta trata sobre como obtener para tu bolsillo sin trabajar tan duro.

No solamente los blogs es lo mas caliente en la ‘red ahora mismo,pero estan hechos adecuados para el  programa de  Google AdSense. Porque? Esto es simple. Los Blogs represenan un constante cambio de añadir contenido fresco para los buscadores de Google. Alimentandolo con nuevo contenido para esos rastreadores es como echarle carne fresca a un tigre. Estos se lo tragaran. Mientras mas paginas tenga tu blog indexadas, mas trafico conseguiras. Y mientras mas trafico consigas , mas exposicion tendran tus anuncios de AdSense. Estas notando lo que trato de decir?

No es solo Google el que le gusta nuevo contenido, la mayoria de los motores de busqueda tambien . De hecho, alguno expertos en la web blogeros prueban con un anuncio de Google en una pagina y el resto en otra.No toma tanto tiempo en ver cual anuncio rinde mejor cuando miras las estadisticas de adsense. Solo no cometas el error de poner anuncio de Google y anuncios de Overture en la misma pagina. Mientras no se maten unos a otros como un par de peces seameses en la misma pesera , estaras violando los terminos de servicio de ambos sitios’ y no vale la pena matar la ganza de huevos de oro.

Es muy sencillo acomodar anuncios de Google AdSense en tu blog. Todo lo que debes saber esta justo en el panel de Google. Lo que no es facil figurar que anuncios van aparecer en cada pagina. Desde que Google busca tus key words, y tus articulos de tu blog articles posible podría vagar hacia cualquier tema, nunca se sabe lo que vas a obtener.

Ok, “nunca” es una palabra fuerte por que actualmente es una manera de probar los anuncios de tu blog antes de poner una nueva edicion. Que hacer:

• Escribe un articulo en tu blog articulo como acostumbras
• Pon tu codigo de AdSense  en tu nueva pagina newest en un subdirectorio que no sea parte de tu  blog.
•Da Click en refresh una cuantas veces hasta que salga el anuncio de Google .
• Si no te gusta lo que ves afina el articulo hasta que veas el tipo de anuncio que buscas.

Con algunos anuncios que pagan tanto como $5 por click o mas,facilmente emplearia 30 minutos afinando  el blog. de seguro.
Si estas trabajando duro para conseguir que tu blog sea visible, entonces no existe motivo en no usar Google AdSense para beneficirte.

Read More

Como Optimizar Contenido de Tu Blog

La Importancia de Crear contenido util y de calidad  es el factor mas relevante  que decidira cuanto dure tu carrera como blogero.

Optimizar el contenido, tanto para tus lectores como para los motores de busqueda. En este articulo, te mostrare como optimizar tu contenido
Chequea Como Utilizar Seo en Blogger

Consejos para Optimizar el Contenido de tu Blog de Blogger

1# Crea contenido fresco y de calidad: Dale a tus lectores algo nuevo cada vez que estos visiten tu sitio web . Actualiza y dale la importancia a las mas recientes tendencias ,noticias que tengan que ver con tu nicho.

2# Enfocate en tu topico: Por ejemplo si estas esbribiendo sobre consejos de blogger, manten tu contenido en ese topico o tema. Provee en detalles completos informacion que cubra ese topico. Pues sino los visitantes se iran, una vez vean que el tema no les enteresa. Puedes utilizar imagenes y videos que hagan tu tema mas claro y disfrutable.

Puedes  sub-dividir tu contenido en parafos debajo de diferente sub-temas.

3# Evita Errores: Dale a tus lectores una manera simple de entender tu articulo son errores de gramatica . Perderas credibilidad debido a los pequenos errores.


4# *Importante* No escribas para los motores de busqueda: Optimizar tu contenido para los motores de busqueda es diferente . Manten en mente. Insertar palabras claves innecesarias en un intento de obtener mejor posicion en los motores de busqueda puede molestar a tus lectores.


Estos son los pasos claves de como optimizar tu contenido. La Optimizacion no se limita a buscar palabras claves. El Contenido son el texto y imagenes que ayuden atraer la atencion de los visitantes de tu blog.

Los Textos Ancla o Anchor Text para optimizar tu contenido

Los Anchor text son textos que le das click y te dirigen a otros enlaces. El formato es <a href=”#”>Tu texto</a>. Este simplemente mostrara“Tu texto” dirigiendose al enlace mencionadoen vez de #. Este texto le dice al lector y a los motores de busqueda sobre el contenido al que lo dirigiras.

 Existen dos tipos de enlaces- Interno y External . El enlace interno esta dirigido a una pagina de tu propio blog. La mayor ventaja del enlace interno es que sigues mostrandole temas de interes a los lectores de tu blog. Las visitas que vienen a tu blog leeran tu articulo y lo dejaran a menos que le muestres algo mas. Al hacer enlaces internos, les estas dando opciones – de descubrir mas contenido en tu blog. Aun mejor, los enlaces internos ayudaran a los motores de busqueda a rastrear tus paginas mas rapido y por ende mejoraran tu posicion en los motores de busqueda.

Optimizacion de Imagenes y la importancia de texto alterno (Alt text)

La optimizacion de imagenes incluye la optimizacion para tus lectores y para los motores de busqueda. Cuando Google busca  imagenes  te ayudara a atraer mas trafico si las optimizas adecuadamente.

Ok entendiendo que es el texto alterno y cual es su importancia?

Alt text es un texto alternativo que le indica a los motores de busqueda sobre de que trata la imagen. Los motores de busqueda no pueden adivinar de que se trata la imagen. Estos son ciegos a la informacion  que no contenga texto alguno.

La importancia del Alt textestriba en el hecho de que si la imagen no baja completamente, en el navegador del visitante, entonces el texto alternativo mostrara en lugar de la imagen y le indica al visitante de que trata esa imagen.
Chequea articulo como proteger tu contenido de tu blog

Optimizando el alt text o texto alternativo

1. La mejor practica es poner tus mejores palabras claves en el texto alternativo teniendo presnte el contexto de la imagen.
2. Provee un texto descriptivo breve.
3. Si estas usando la image como un link o enlace , entonces el texto alternativo funcionara como texto ancla.

Espero que estos paso basicos te ayuden para optimizar tu contenido en tu blog.

Read More

Como Añadir Bordes a Titulos de Articulos En Blogger

Añade Border al Tit Articulos En Blogger: En este tutorial de ciudad blogger estaremos jugando un poco con CSS para cambiar los bordes de articulos(Post) en Blogger.Tal vez habras notado que titulo de blog viene con "text-decoration:none" por defecto , en palabras sencillas no hay un estilo para los titulos de tus articulos en Blog. .

Chequea articulo como hacer rotar imagenes con css3

Pero no te preocupes podemos cambiar el titulo de los articulos y decorarlos con difrentes propiedades de CSS properties Ok aqui como aplicar el borde ! el cual puede ser "puntos" , "Solido" , "lineas" , ademas añadiremos color especifico y el numero de pixels.No te confundas es muy simple.

  Como Añadir Borde a Titulo de Post (Articulos)

• Entra en Blogger
• Da Click en Plantilla
• EDITAR HTML
• Busca el siguiente codido post-title o .post o solamente  "post"
• Busca hasta que encuentres el selector "Post Title" como se muestra aqui abajo

• Mira la imagen de arriba  donde añadi la propiedad de borde Ejemplo: "border:groove 1px y color" Cambia estos valores por tu valores deseados y guarda la plantilla.Tambien puedes cambiar el color de el titulo de tus articulos o post simplemente cambiando el codigo de color o la propiedad de "COLOR" en el script.
• No Obstante aqui he selecionado el color de borde Groove de color gris y un ancho 'width' de un 1pixel.
•  Eso es todo !!

 Nota : En algunas Plantillas el Selector de POST TITLE es .post-title pero si no lo puedes encontrar o si el selector no estuviera disponible entonces deberas encontrar el selector exacto o igual ejemplo el selector que machea con la class o ID definido en las etiquetas de div ! 
Chequea Articulo Como Hacer Menu Iluminado con Css
 

Que sucede : Realmente  este truco anadira un color gris al borde de todos los titulos de articulos de un 1 pixel de ancho ,esto hace que tu blog brille le doy 5 estrellas de elegancia y estilo a tu plantilla.Que lo disfrutes!

Read More

Como Hacer Tu Blog de Blogger Privado

En este tutorial de ciudad blogger hablaremos de hacer tu blog privado existen varias razones por la cual los blogueros les gustaria hacer su blog privado o darle permiso a ciertos lectores. Razones son multiples para hacer un blog exclusivo o pertinente a cierta circulo de seguidores . Como caso de blogs que son creaodos para los desarolladores o webmasters de un blog. Pero aqui te muestro como hacer que tu blog de blogger ivado o de acceso exclusivo.


Chequea Articulo Como Hacer Copia de Seguridad de Tu Blog

Haz tu Blog de Blogger  Privado o de Acceso a usuarios Especificos

Por defecto tu blog esta configurado para ser visto publicamente. Lo que significa que cualquiera en la internet pueda ver tu blog. Mantente atento con los siguientes pasos.

Entra en tu blog de blogger ,luego ve a configuracion >> Configuracion Basica >> Lectores del Blog  y da click en editar

.

Haz Tu  Blog privado

Una vez hayas dado click en editar, selecciona el boton Privado –solamente lectores del blog  y da clic en Guardar Cambios esto hara tu blog de blogger privado y visible solamente al administrador del blog admin y autores. Mira la sigueinte imagen como guia.

Chequea Articulo Sobre Redireccion 404 en Blogger

Dar Acceso a Usuarios Especificos

Para dar acceso a usuarios en especifico a tu blog selecciona privado –Solo estos lectores’ y da click en enlace +Anadir lectores este abrira una area o espacio en blanco. En ese espacio en blanco, entre la direcciones de email de aquellos a los que das acceso a tu blog, mira la  imagen para una idea mas clara. Recuerda estos deberan estar registrados antes de entrar.

.Espero que este tutorial te haya servido de ayuda .

Read More

Como Mostrar Estado Tiempo En Blog De Blogger

Hoy en Ciudad Blogger un widget del estado del tiempo para tu blog de Blogger pues creo que resultaria interesante para los visitantes. El widget del Weather forecast que muestra datos sobre el tiempo basado en el lugar o localizacion del visitante.En este post te mostrare como instalarlo en blog de blogger .

Chequea Articulo Añadir Efecto Luz en Blockquotes

Demostracion de este widget lo podras ver aqui.

Pasos para Instalar Widget de Pronostico Del Tiempo:

Paso 1:Entra en tu cuenta de blogger. Luego ve a Plantilla >> Editar HTML >> y busca por la siguiente etiqueta</ skin>, justo arriba de esta pega el siguiente codigo de  CSS coding (puedes personalizar el codigo si asi lo deseas , pero estoy seguro que como esta es justo lo que necesitas).

 .MyWeatherDiv .centerContainer {

    width: 300px;

    text-align: left;

    margin-bottom: 200px;

}

.green {

    color: #a6e22d;

}

.teal {

    color: #66d9ef;

}

.purp {

    color: #ae81ff;

}

.pink {

    color: #f92772;

}

.yellow {

    color: #e6db74;

}

.white {

    color: #f8f8f2;

}

.grey {

    color: #616161;

}

.f12 {

    font-size: 12px;

}

.MyWeatherDiv img {

    height: 64px;

    width: 64px;

}

.weatherInfoRight {

    z-index: 999;

    position: fixed;

    top: 10px;

    right: 10px;

}

.weatherInfoLeft {

    z-index: 999;

    position: fixed;

    top: 10px;

    left: 10px;

}

.weatherInfoBottomRight {

    z-index: 999;

    position: fixed;

    bottom: 10px;

    right: 10px;

}

.weatherInfoBottomLeft {

    z-index: 999;

    position: fixed;

    bottom: 10px;

    left: 10px;

}

.MyWeatherDiv {

    display: none;

    background-color: #272822;

    padding: 5px;

    -webkit-border-radius: 10px;

    border-radius: 10px;

}

.MyWeatherInfo {

    text-align: center;

    font-family: 'Segoe UI',Tahoma,Helvetica,Sans-Serif;

    color: white;

    font-size: 14px;

}

#divMyImage {

    display: none;

}

.MyWeatherClose {

    font-family: 'Segoe UI',Tahoma,Helvetica,Sans-Serif;

    cursor: pointer;

    position: absolute;

    right: 10px;

    color: white;

    font-size: 20px;

}

.MWTemperature {

    display: block;

}

.MWPlace {

    display: block;

}

.MWIP {

    display: block;

}

#clear-day {

    display: none;

}

#clear-night {

    display: none;

}

#partly-cloudy-day {

    display: none;

}

#partly-cloudy-night {

    display: none;

}

#cloudy {

    display: none;

}

#rain {

    display: none;

}

#sleet {

    display: none;

}

#snow {

    display: none;

}

#wind {

    display: none;

}

#fog {

    display: none;

}

Paso2:Lo segundo que haremos es añadir el archivo de Javascript ( JavaScript file) que funciona de maravilla. Ahora dentro de la Plantilla de blogger busca por la etiqueta </head> y justo antes de la misma pega el siguiente Codigo de JS .

 Chequea Articulo Como Añadir Pajarito Flash a tu blogger

(Te recomiendo que hospedes o alojes el script por ti mismo ya sea en Google Drive o en cualquier otro servicio debido a que nuestro  script podria irse debido a la cantidad de bandwidth llena el hospedador del archivo).

 <script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/weather.js"></script>

Paso 3:Por ultimo, añade el siguiente archivo de estilo en javascript arriba o antes de la etiqueta </body> . Puedes cambiar la posicion de este gadget emplazando  posicion: "right" (derecha) a left (Izquierda) o center (centro). Hay otras opciones para personalizarlo, cuales son utiles para machearlas con la configuracion de tu pagina o website.

 <script type="text/javascript">

$.MyWeather({

    position: "right",

    showpopup: true,

    temperature: "c",

    closeicon: true,

    showicon: true,

    showtemperature: true,

    showlocation: true,

    showip: true,

    size: 80,

    iconcolor: "white",

    fontcolor: "white",

}, function (e, f, g, a, d, b, c) {

    $("#txtCity").html(e);

    $("#txtCountry").html(f);

    $("#txtIP").html(g);

    $("#txtLatitude").html(a);

    $("#txtLongitude").html(d);

    $("#txtTemperature").html(b);

    $("#picTemp").attr("src", c)

});

</script>;

Espero que este tutorial te haya ayudado en aprender como mostrar un widget de estado del Tiempo (weather forecast) en tu blog de  Blogger .

Read More

Como Abrir Enlaces de Page List En Una Nueva Ventana

En el tutorial de ciudad blogger explicare como abrir cada enlace de tu Widget de PageList en una nueva ventana.

Solo sigue estos sencillos pasos:
1. Entra en tu cuenta de Blogger y ve a "Plantilla"--> "Editar HTML" de tu blog.
2. Ahora encuentra el codigo de PageList widget . (Nota importante : Tambien puedes encontrarlo buscando <b:widget id='PageList)
Tu codigo de widget PageList  sera similar al codigo de abajo. Pero el id widget  (PageList1) podria ser diferente :

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
  </b:includable>
</b:widget>

3. Luego coloca el siguiente codigo azul blue ( target='_blank' ) como el ejemplo de abajo en el codigo de Link list .

b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href' target='_blank'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href' target='_blank'><data:link.title/></a></li>
          </b:if>
        </b:loop>
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
  </b:includable>
</b:widget>

Nota Importante : Debes incluir el espacio  antes de la palabra target='_blank' como muestra el ejemplo de arriba.
Para finalizar ahora da click en boton de Guardar Plantilla y listo.

Read More

Como Activar Notificacion de Comentarios en Blogger

Tutorial de CiudadBlogger digamos que necesitas recibir notificacion en tu email entonces no te preocupes te mostrare Como Activar Notificaciones de Comentarios en Blogger. La Notificacion en el Email en Blogger por defecto esta desactivado asi que no recibiras ninguna aviso en tu Email cuando alguien deja comentarios en tu articulo del blog. Blogger permite activar o desactivar comentarios segun desees. Te mostrare como activar el aviso de comentarios en  blogger.

Como Activar la Notificacion de Comentarios en Blogger

Favor de seguir estos pasaso para activar la Notificacion de Comentarios en Blogger:

Paso 1

Entra en Blogger y selecciona el blog donde deseas la notificacion de comentarios.

Paso 2

Ahora ve a Configuracion da click en Mobile y Email como muestro abajo en la Imagen.

 

Paso 3

Favor de introducir tu direccion de email en espacio y puedes anadir 10 direcciones de email separadas por coma. Blogger te enviara una notificacion de email cuando alguien deje un comentario debajo de tu articulo.

Paso 4

Despues de introducir tu email en la caja de texto da click en boton de Guardar Configuracion que esta en la parte superior derecha.

Listo ahora cuando alguien en tu website utilice comentario recibiras una notificacion en tu emails. Si  recibes comentarios de spam entonces activa enable la moderacion de comentarios en tublog. Tu apruebastodos los comentarios manualmente para evitar el spam en tu blog.

Read More

Esta Tu Nombre de Dominio Costandote Trafico?

Hoy en Ciudad Blogger, tal vez hayas visitado un excelente website varias veces porque tiene informacion fantastica en el mismo.Pero resulta que no te acuerdas del nombre de dominio pues no es facil de escribir pues es muy largo. El problema es que la url esta escrita de esta manera clave-clave-clave.com.

Suena etico o no? Eso podria ser de ayuda a el posicionamiento en los motores de busqueda pero para muchos visitantes puede ser un dolor de cabeza.

Sabiendo que muchas personas les encanta lo simple y otros no saben escribir ni una coma y cuando no pueden escribir un nombre de dominio tan largo terminan yendose a buscar otros ,lo que conlleva menos trafico de visitantes a tu website.

Los usuarios de internet en nuestros tiempos buscan lo simple y rapido de realizar. Por eso es que existen los keyboard shortcuts. Para completar las tareas mas ligeras.

Has pensado por que Googles, Yahoos, Amazons y Ebays en el mundo online son tan exitosos? Es por que el nombre de su dominio juega un papel significante para su marca.

 Cada dia se suman mas personas que buscan por primera vez en la busqueda de informacion y es mandatorio que el nombre de dominio juegue un papel principal en crear un apego con tus visitantes.

Por un tiempo utilice un website gratis que estuvo alojado en Geocities. Resulta que mi nombre de dominio se deletreaba asi Geocities.com/Mi nombre, lo que hacia sentirme como si tubiera una cadena atada a mis piernas. No podia imaginar la cantida de trafico y credibilidad que perdi debido a eso.

Trabaja? Ese metodo puede trabajar en ocasiones.Yo creo que tener un dominio con demaciadas palabras podria ser de mal gusto como tener un sitio como Geocities.Luce un tanto no profesional para una compañia tener un nombre que contraste con la credibilidad que estan tratando de crear.

Algunos de los nombre de dominio son como una carga . Por que? Pues algunos motores de busqueda no le dan importancia alguna a las etiquetas de palabra clave , algunos webmasters rellenan su dominio con sus palabras claves.

Un buen dominio no garantiza exito. Pero una experiencia inolvidable y un nombre de dominio facil de recordar puede ser beneficioso para ti y tus visitantes. Puedes localizarlo facilmente y tus visitantes les sera facil de escribir este en los motores de busqueda.

Read More

Ideas Para Buscar Un Nicho Adecuado Para Crear Un Blog

Hoy en Ciudad Blogger hablare sobre uno de las cosas más populares y uno de mejores métodos para hacer dinero en línea con 'los Blogs'. Como todo el mundo quiere ganar dinero en Internet  , muchas personas buscan en los blogs y comienzan su propio blog . Atraves experiencia se que alguien nuevo en los blogs no se puede hacer su blog exitoso debido a que no tienen mucho conocimiento acerca de los blogs . Blogging es  como tomar  clases en la escuela, primero los novatos tiene que aprender todo sobre blogs , tomando en consideracion  tres clases principales , la primera como hacer un blog , segundo clase SEO  como dirigir el tráfico y la tercera clase como monetizar ese blog .

Lo primero y de suma importancia sobre  los blogs es la elegir un niche adecuado. Niche conoce como que  "Categoría" o " Tipo" de blog.  Debido a que escojen nichos equivocados, muchos bloggers fracasan en su carrera, algunos perdieron energias en poner contenido en lugar equivocado y algunos también han renunciado a su carrera como blogger . Así que , vamos a discutir y descubrir su nicho de mercado ideal.

Varios Tipos De Nichos .

    Nicho de Tecnología: En este tipo de nicho , debes de  escribir  contenido de la tecnología en la que viene ordenadores, portátiles , tabletas, iPads , móviles, juegos, aplicaciones, softwares.

    Blogging Categoría: Aquí hacemos un blog sobre los blogs. Debes escribir guías de blogs como Ciudad Blogger . Anade subcategorias de Consejos sobre el blogs , SEO , como ganar dinero, marketing de afiliados y todos los relacionados con el blog .

    Nicho de Salud: Aquí bloggers escriben artículos sobre la salud humana. Este es el nicho más rentable que hace más dinero, pero también un lugar difícil para que usted debe ser experto en vivir un blog sano. Un solo error puede hacer que su lector no se interese.

    Nicho de cocina: ¿Es usted un cocinero experimentado ? Esto puede ser su nicho ideal pues aquí se puede escribir fácilmente fantásticos consejos de cocina que pueden generar dinero para usted.


    Otros ejemplos son los nichos de Negocios, Deportes, Medios de Comunicación Social , Noticias , Mundo y muchos más.

Tiene usted experiencia en cualquier campo especial ?
Todo el mundo en este mundo es bendecido con ningún conocimiento especial. Tal como algunas personas les encanta estudiar, algunos aman hacer la cocina, mientras que algunos también están interesados ​​en la exploración de la tecnología en la que los móviles , ordenadores y otros aparatos , Piensa  , ¿qué es esa cosa eres experto y haces con regularidad. Eso puede ser su nicho o categoria y un mercado ideal para ser exitoso en el campo de blog. Si Tienes experiencia en el nicho o categoria te ayudara ademas en servir mejor a la gente.
¿Se puede escribir siempre sobre ese nicho ?
Tener experiencia  no es suficiente ,  también hay algunos puntos que usted debe tener en cuenta. Otro punto es que se puede escribir siempre sobre ese nicho ? Mira, quieres hacer un blog que tenga éxito, y dure un mínimo de 10 años, y que te genere dinero para siempre o siempre que exista pora eso tendrás que actualizarlo regularmente y por que el tener demasiadas ideas locas sobre contenido importante . Consiga una libreta en la mano y empieze a escribir varias ideas de contenido sobreel campo en que eres experto. Si obtiene multiples  ideas de contenido en una sola vez que puede ser su nicho perfecto.

Busca la gente de ese nicho en Internet?
Después deanadir la experiencia  y también demasiadas ideas de contenido , también es importante saber si hay gente interesada en ese nicho o categoria ? ¿La gente está buscando ese nicho en internet. Si empezamos un blog , con contenido de calidad en el mismo y si las personas no están en busca del tema de el blog es inútil. Recuerde, antes de escribir sobre algo trate de hacer la investigación que es lo que las personas están buscando. Usted puede utilizar el google adwords keyword tool para averiguarlo la busqueda o tendencia de nicho o no .

¿Es ese nicho rentable ?
Si usted tiene un blog solo por hacer dinero. Hay algunos nichos que tiene poco dinero y también hay algunos nichos que hacen dinero increíble. Por lo tanto, antes de empezar un blog sobre cualquier nicho debemos analizar el valor de ese nicho. Hay muchas maneras de averiguar el valor de cualquier nicho .

Averigüe si ese blog en Google es popular popular. Luego, busquen qué tipo de anuncios se están mostrando allí. Si ese blog está usando BuySellAds que abrir ese blog en BuySellAds y mirar los precios de anuncios por linea. Los altos precios de los espacios publicitarios no desaparecen , pero también se debe averiguar si los espacios publicitarios son de compra o no .

En segundo lugar , se puede analizar algunas palabras clave de ese blog que impulsa la mayor parte del tráfico de ese blog y guardarlos en el bloc de notas o cualquier otro lugar. A continuación, vaya a Palabra (Planner google adwords keyword tool) y busque las palabras clave para cada uno. Habrá columna " Oferta sugerida " en el que precio se mostrará para esa palabra clave . Si aparece un Bid a alto precio ese nicho es más rentable.

¿Cuál es su blog de nicho ideal ? Actúa como blogger profesional , aprende todo sobre blogs con regularidad , escribe en el blog regularmente para que puedas tocar el éxito en muy menos tiempo .

Read More

Como Añadir un Widget en la Cabecera En Blogger

Como añadir un widget en la cabecera de pagina de blogger en la parte superior o cabecera del blog, uno de los formatos mas famoso es el anuncio de  AdSense 468×60  – ejemplo:

Pero como añadir algo en la cabecera de blogger ,ya sea un anuncio de Adsense , una barra de busqueda, botones de social media  o un widget? Pues sencillamente añadiendo una seccion en la cabecera. Primero que nada, añadir un espacio extra para acomodar el widget,para esto nuestra cabecera de blogger debe ser ampliada.
 Ampliar la Cabecera de blogger
Paso1: Entrar en Panel de Blogger  > Plantilla > Editar HTML y hacer una copia de seguridad o backup de tu plantilla
Paso 2: Da Click en cualquier area del codigo y abrir caja de busqueda usando teclas CTRL + F :

Paso 3: Buscar este pedazo de codigo:

/* Header
———————————————– */

Nota: Si no lo encuentras, busca solo por primera linea:

/* Header

Paso 4: Reemplacelo con este codigo:

/* Header
———————————————– */
.header-left{
display: inline-block;
height: 35px;
width: 350px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}

Cambia los pixels en rojo por el alto y el ancho de la imagen de la cabecera de blogger y cambia float: left; por float: right;si deseas cambiar la posicion de tu logo.
Paso 5: Encuentra el siguiente codigo:

<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>

Paso 6: Reemplazalo con el siguiente codigo:

<b:section class=’header header-left’ id=’header’ maxwidgets=’1′ showaddelement=’no’>

Ahora “Preview” tu plantilla, notaras que el color de fondo de la cabecera de Blogger no es visible o no se encuentra. Para recuperarlo o reestablecerlo, necesitas añadir algunos codigos:
Paso 7. Encuentra el siguiente codigo:

    </div>
</div>
<div class=’header-cap-bottom cap-bottom’>
<div class=’cap-left’/>

Paso 8. Ahora antes del codigo anterior, pega lo siguente:

<div style=’clear:both;’/>

Nota: Si no puedes hallar el codigo del paso  7, busca el siguiente en su lugar:

      <b:include name=’description’/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>

…y pega el codigo del paso 8 debajo de este.

Añadir una seccion extra para acomodar un gadget/widget a la Cabecera de Blogger
Let’s go one step forward and add an extra gadget section within Blogger header in new template designers.
Paso 9. Justo debajo del codigo del paso  8,pegue el siguiente codigo justo antes/arriba de este:

<b:section class=’header-right crosscol’ id=’header-right’ maxwidgets=’1′ showaddelement=’yes’/>

Paso 10. Ahora encuentra esta etiqueta:

]]></b:skin>

Paso 11. Pega arriba de ]]></b:skin> , este codigo de CSS :

.header-right {
display:inline-block;
float:right;
width:400px;
}

Cambia el ancho que esta marcado en color rojo.Aumenta o disminuye los pixels de acuerdo a tu necesidad y posicionamiento de la nueva seccion de la cabecera.
Paso 12. Guarda la Plantilla.
Paso 13. Luego todo lo que debes hacer es ir a Diseño y Añadir un Gadget  a la nueva seccion de cabecera en Blogger.

Que te entretengas.

Read More

Como Añadir Imagen de Fondo a Barra del Lado en Blogger

Hoy te mostrare en super trucos como añadir una imagen a la barra del lado en Blogger . Este es un sencillo procedimiento  que hara que tu blog luzca estilizado.Cuando añadimos una imagen o un color de fondo en la barra del lado hace que llame la atencion del lector o visitante,seria ademas una oportunidad de añadir una imagen publicitaria y ganar asi dinero.

Es muy sencillo solo sigue estos pasos.

Paso #1 Ve a Blogger selecciona Editar HTML

Entra en panel de blogger >>Plantilla >> Editar HTML .Importante que hagas una copia de seguridad o backup antes de continuar  Una vez estes en  Editar HTML , busca el siguiente codigo:

#sidebar-wrapper {

Nota: Podrias encontrar otras versiones del ID para el Sidebar o barra del lado tales como (#sidbar o #sidebar-right etc)

Ahora una vez hayas encontrado el codigo de CSS de arriba para sidebar, simplemente pega el siguiente codigo debajo de esta.

background-image:url(‘EL URL de Imagen de Fondo‘);
background-repeat: repeat;
background-attachment: scroll;
background-position: right top;}

  Asi una vez añadida, el codigo lucira o se vera asi:

 #sidebar-wrapper {
.algun otro codigo…
.
.
background-image:url(‘EL URL de Imagen de Fondo‘);
background-repeat: repeat;
background-attachment: scroll;
background-position: right top;
}

Luego simplemente reemplaza EL URL de Imagen de Fondo con el enlace de la imagen de fondo para la barra del lado. Puedes buscar imagenes de fondo para el sidebar o barra del lado en Google,Yahoo ,etc

Read More

Añadir Galeria de Entradas Populares Antes de Entradas de Blogger

En este tutorial de Super trucos blogger te traigo un slider o Carousel  que hara que tu blog de blogger luzca al dia,este es un fantastico slider horizontal y hara que tu webside sea facil de navegar e aumentara las vistas a las paginas del mismo Este widget muestra los 10 articulos mas populares de tu blog en la parte superior del mismo. Puedes ver la Demostracion del mismo en mi web aqui.

 Pasos para Añadir Carousel a Blogger

Antes de añadir este widget sepa que no es compatible con todas las plantillas,asi que haga una coipa de seguridad o backup antes de hacerle cambio a tu plantilla de blogger . Luego siga estos pasos:

1. Si estas usando la antigua interface de Blogger : 

• Ve al Blogger- Diseño - Editar HTML - (haga una copia de seguridad backup) Expandir el Widget de plantilla

Si en cambio estas utilizando la nueva interface de Blogger : 

• Ve a Blogger - Plantilla - Editar HTML - Proceda - (haga copia de seguridad o backup)

2. Busca (CTRL + F) este codigo:

]]></b:skin>

3. Luego arriba o antes de este ]]></b:skin> añade el siguiente codigo:

#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrxTXITpR6HA18eSe_5C4r9dHcIKpD88-lkDciJ4H4ZM7kRNboANkpLTHgNXfwojG6TUM8XXYI44Cjg5t3OzIAky_ATeOEVyOHB8ETRNeFVGJOag1jHwYKBJPkS81BJhYo5DTff8GHKLY/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

Nota Importante: puedes ajustar el tamaño de la galeria, cambiando los valores en rojo (590 y 126).

4. Ahora busca el siguiente codigo:

</head>

5. Inmediatamente arriba o antes de este </head> añade el siguiente codigo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxkukG-Xu6Tv_TkCD3NVACI_VWm6A0VzOL_qNKnUBF8_flcgA4x40KT05LbLY8BJycXycjw9nQvHNas1mL052YFRl7h-y3c2TJtciLFy9LDJop5UzUAgzrnVajTB-piIMpNsmxG-3oPl8x/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo067BKQIMQHV3CcMe0rQ3E2s7wI0MDLtmfUO3bTaEhlms76FcFv8XbSpD20HMS14EF4ruY1LoYXi8le_N9VBuyWE97LVEDRdugtMMuXIGCwzrQnwNjLiTMY3B3MjeAvxB3S5o-uB8H32m/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Lo proximo que haremos es colocar el widget antes de las entradas de blogger .

6. Busca el: siguiente codigo

<b:section class='main' id='main' showaddelement='yes'>

...o sino lo puedes encontrar, busca el siguiente:

<b:section class='main' id='main' showaddelement='no'>

7. Justo despues del codigo anterior, añade el siguiente codigo:

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXlHbP2BxkYLhIrY1lHhUaU1LEUhEbREAG5QLqNnSzEi2TtH6hiYq7zHcaIQqvka-U256W9gnY_t0K3xRb8N3bIkJHNuSx_TFLik4gC-YUZG06Km7JpXidCsTbOwCcW_MSNKDHlfIlprq/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>

Nota Importante: Borra la parte del codigo en azul si deseas que este widget se muestre en las paginas de entradas tambien y no solo en pagina principal.

8. Chequea ahora si todo esta funcionando adecuadamente, por ultimo Guarda la Plantilla.Que lo disfrutes!

Read More

Apagar Luces Para Ver Video Con JQuery en Blogger

En super trucos blogger hoy te mostrare especial para los que les encanta disfrutar de videos en la internet, este es un sencillo script creado con  jQuery por Janko.

Preguntaras que es lo que este script hace? Este apaga la luz  asi todo lo que esta alrededor del video quedara en oscuras evitando que te veas distraido por otros elementos en la pagina mientras disfrutas de tu video favorito.

Bueno para ver un ejemplo de lo que estoy hablando dale click al enlace o link "Apaga las Luces".

Apaga las Luces

 Como Añadir el efecto de Luces Apagadas a Blogger

Para poner este efecto de "luces" en el blog, sigue estos pasos:

Paso 1. Entra a tu Plantilla > Editar HTML

Paso 2. Da Click en cualquier area del codigo y busca la siguiente etiqueta ,utiliza las teclas CTRL + F :

    </head>

Paso 3. Despues que lo encuentres, pega el siguiente script arriba de este:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){
    $("#darkness").css("height", $(document).height()).hide();
    $(".lightSwitcher").click(function(){
    $("#darkness").toggle();
    if ($("#darkness").is(":hidden"))
    $(this).html("Turn off the lights").removeClass("turnedOff");
    else
    $(this).html("Turn on the lights").addClass("turnedOff");
    });
    });
    //]]>
    </script>

Nota Importante:Si ya tienes instalado una version de jquery en tu Plantilla, entonces remueva la linea roja.

Paso 4. Ahora busca la siguiente etiqueta ]]></b:skin>  (Da click en la flecha de la izquierda si fuese necesario (podria usarand despues de expandirse, usar las teclas CTRL + F )

Paso 5. Justo arriba de ]]></b:skin> , añade el siguiente estilo de CSS :

    /* Apagado de Luces
    ----------------------------------------------- */
    #lightsVideo {
    position:relative;
    z-index:102;
    }
    #switch {
    max-width:640px;
    text-align:left;
    position:relative;
    height:25px;
    display:block;
    margin: 25px 0 0 60px;
    }
    .lightSwitcher {
    position:absolute;
    z-index:101;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjahGA5E6CIAIRE7lcNHFDPK_B_qOF9e7jGjYeS2SJyaogcfE0f9PFLy7jSL4Ul_HNAVdY8FQveLmX6KeJKmrV2Dwc0jwU7ngocZrVYpFXCgn88OsNCa_zi-HphUtd4kHilse95aED95QWt/s1600/lights-on.png);
    background-repeat:no-repeat;
    background-position:left;
    padding: 0 0 0 20px;
    outline:none;
    text-decoration:none;
    }
    .lightSwitcher:hover {text-decoration:underline;}
    .turnedOff {
    color:#ffff00 !important;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivQ-i997i2_Q2YNxyOnZtVSsSDmB1f0ThHCR_pmV0PI0YyLeZOgohnMCi04hsfD8WINVGKyd9UKqPJtBqwRnH-1Mn6ltlP8pD5IcCyOgI5YYb8SJKcuZQQyz51wIOjqyZ70dpu4CUmCApm/s1600/lights-off.png);
    }
    #darkness {
    background:#000;
    opacity:0.8;
    filter:alpha(opacity=80);
    position:absolute;
    left:0;
    top:0;
    width:100%;
    z-index:100;
    }

Paso 6. Busca la siguiente etiqueta </body> y añade el siguiente codigo de html arriba o antes de este:

<div id='darkness'/>

Paso 7. Da Click en boton de Guardar Plantilla para guardar cambios.

Luego, cuando desees añadir un video, sea en una entrada o articulo o en un Gadget como HTML/Javascript , usa el siguiente codigo:

<center>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Apagado de Luces</a></div>
<div id="lightsVideo">
...Aqui va el codigo del video...
</div>
</center>

Añade el codigo del video donde indica y Listo. Puedes ahora disfrutar de tus videos con las luces apagadas!
Recuerda que este super truco utiliza jQuery, si tienes instalado Scriptaculous o Mootools debes aplicar un parcho , o si utilizas otras versiones de jQuery,  debes usar una sola version.Que lo disfrutes.

Read More

Que es el Black Hat Seo

En este articulo hablare sobre el conocido como "black hat seo"  en terminos de la optimizacion en los motores de busqueda se define como una tecnica que es utilizada para conseguir mas altas posiciones en los motores de busqueda de una forma no etica. Estas tecnicas de "black hat SEO" usualmente incluye una o mas de las siguientes caracteristicas:


  

1.Esta tecnica viola las reglas y regulaciones de los motores de busqueda
2.Directamente crea una experiencia pobre para el usuario de las tecnicas de SEO ,sin etica
    presenta contenido de una forma no normal,tanto a los rastreadores de la web asi a los visitantes.

 Lo que se conoce hoy en dia como "black hat SEO" fue utilizado legalmente, pero algunos se aprovecharon de eso y hoy en dia a consecuencia no son aceptadas por la mayoria de los motores de busqueda. Estas practicas ayudaban al dueño de una pagina web a posicionarse en los primeros lugares de los motores de busqueda, pero en la actualidad si eres cachado utilizando esas tecnicadas conocidas a su vez como "spam techniques" en tu pagina web o blogger, corres el riesgo de ser penalizado por los motores de busqueda.

Esta tecnica de Seo es una solucion inmediata de corta duracion que a la larga es un problema,por lo tanto te mostrare que tecnicas debes evitar para no caer en "black hat seo".

   1. Rellenar un Articulo de Palabras Claves: Lenar un articulo de multiples palabras claves y sin nada adicional hara que eventualmente seas penalizado por los motores de busqueda.

   2.Texto Invisible:  Esto significa poner una lista de palabras claves en un texto blanco en un fondo blanco con la esperanza de atraer los buscadores o spiders.

   3. Paginas de entradas: Conocido en ingles como "doorway page" que es basicamente una pagina "falsa" que el usuario no ve. Esta es hecha meramente para los buscadores de los motores de busqueda , un atentado de hacer que el sitio web o blogger se posicione en las priomeras posiciones.
Chequea Directorio de Backlinks
Estas tecnicas black hat seo se les conoce como no eticas,engañosas ;aun cuando funcionan temporalmente,pues al final son penalizadas y hasta erradicados de los motores de busqueda ,mas bien no vale la pena. Lo que si debes hacer es utilizar con eficiencia las tecnicas de optimizacion en los motores de busqueda para que asi tu sitio web o blogger este en los primeros lugares de una forma etica y normal.

Read More

Barra de Navegacion Con Iconos Con Efecto Hover Para Blogger

Diseñar una pagina web es un proceso de aprendizaje y en este articulo te mostrare como usar codigo Css3  especialmente una barra de navegacion con iconos con efecto hover  sin la necesidad de usar JavaScript . El codigo de Css3 facilita el trabajo en la animacion de este.

Por otro lado la barra de Navigacion es importante para los bloggers. Podemos navegar cada pagina, categorias sin problemas.Hay beneficios al usar el codigo de Css3 en una barra de navegacion de Iconos con efecto hover,ayuda al visitante al navegar paginas importantes como  contacto , Sobre Mi, Anuncios etc.

Chequea Articulo Añadir Menu Iluminado en Blogger

Para finalizar, es una barra de navegacion bastante elegante, lo que hara de tu pagina o blog uno mas elegante. Puedes darle un vistazo de demostracion en:http://fixcd.blogspot.com/

Para insertar este barra de navegacion de css3 solo sigue estos pasos:

1. Entra en tu cuenta de Blogger > Plantilla
2. Haga una copia de seguridad
3. Da Click en Editar HTML
4. Encuentre luego la etiqueta  ]]></b:skin>   y añade el codigo de abajo antes de ]]></b:skin>

/* El Codigo CSS del menu empieza aqui ciudadblogger */ #super-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#super-nav li {float: left;}
#super-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#super-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#super-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#super-nav li a:hover {cursor: pointer;}
#super-nav li a:hover img {top: -85px;}
#super-nav li a:hover .aname {top: 85px;}
#super-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#super-nav li:nth-child(2) a {background: #9bc704;}
#super-nav li:nth-child(3) a {background: #0dc3ff;}
#super-nav li:nth-child(4) a {background: #51a2ec;}
#super-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

5. Entra en blogger y da click en Diseño
6. Da Click Añadir un Gadget y selecciona 'HTML/Javascript'
7. Pegue el codigo de abajo.

<div id="super-nav">
<li> <a href="#"><span class="aname">Home</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsB1apIak3JrhSxw0i6gfnBdMgr5D_Vom58-5A-NMFX4tD9CjOH5eQHJqLNyQTJzLnbBPkcYEzQu1-BaPfS66TY2cwigI4kEGKiF7a9acjt1p8AhPWCVNWux_K8MXG_2LBogfL02JxCDc/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLrW2pIaJx76z2no8fnuDXZNesJm59X5AgUmOeZD8dAGfK5ZJyDis2_CNxthhicdKgWTjyjgDsXIhzhgMkiXk6BX64V5U3009oW2Zm-kH_jAQxLD3TqIjzbrD7kECBXEv-TVIXIm6eZt4/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKew9uXtbYH2v7_J8DK-ofPFskYOpYm7nG4xIpRCT5qark4PUmKk2epICgNCeb4vbCaC4Ih3Eaepwm5k3bKuaQ1gzFK8nmqOKry_PYF_CwKzWXTfXi6d__sNB25SP4RPJZKp7FBd51fTE/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1_GflT_Om5L1O-9PPlsAdoMNhbFz8wuRx8qY0uIzwb8oTnLe8k8Miwk_2xaoFgZ6-xTdSXvWTmYa8500PWiiQPo7H5StZGKF_F9N36gFSDBH14XWa-NgDanRqE7xcOgt_k_pfQgoziD0/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxd8BWMlP_MnE3On-et8Mj58qMiz0H_d9DPtiAV3MsFBJrOAJwv8mAezCwV67-lYWKnX2hOZsKpZqaBA8vFwOUqYADEeOjrY3r4gvCprZAutiIgJ5ZmC4POdVhSl3Aex0AiynCyBR7Ql8/s1600/btrix-contact.png" /> </a> </li> </div>

Reemplace # con tus enlaces.

8. Ahora guarda tu HTML/Javascript'.

Todo listo.

Read More

Tab Widget Animado Con JQuery Para Blogger

En super trucos te traigo un "Tab widgets" o "Widget Pestaña" que es muy comodo de aplicar a tu blog de blogger y ocupa muy poco espacio. Te  mostrare como añadir este tab widget especial a tu blogger.jQuery tabs son estilizados y bastante conocido entre los blogeros.Este widget es hecho con codigo como Css y jQuery.Este tab widget trabaja en cada navegador moderno.Pero no con IE.

Demo en http://fixcd.blogspot.com/

Como Añadir el Widget Jquery Animado a Blogger

1. Entra en Blogger > Plantilla

2. Encuentra el siguiente codigo ]]></b:skin>
3. Pega el codigo de abajo antes de etiqueta]]></b:skin>

<style>

.b, .c{ display:none;}

.buttons{

    border-bottom:solid #d1c8b8 4px;

    display:block;

    padding:8px;

    width:80px;-moz-border-radius: 1em 4em 1em 4em;

    border-radius: 1em 4em 1em 4em;

    text-align:center;

    margin:1px;

    background:#4b7975;

    text-decoration:none; color:#FFFFFF;

    float:left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px

}

.buttonHover{background:#86b8b4;border-bottom:solid #FF0000 4px;}

a.buttons:hover{background:#86b8b4;border-bottom:solid #FF0000 4px;}

#multitab {

    background:#919b9d;

    text-align:justify;

    overflow:hidden;

    color:#fff;

    padding:20px;

    -moz-border-radius: 1em 4em 1em 4em;

    border-radius: 1em 4em 1em 4em;    height:200px;

    width:272px;

}

#multwrap{

    text-align:left;

    overflow:hidden;

    width:350px;

    height:380px;

}

  </style>



<script type='text/javascript'>

// <![CDATA[

$(document).ready(function() { 

    $("#first-tab").addClass('buttonHover');

});

function navigate_tabs(container, tab)

{   

    $(".b").css('display' , 'none');

    $(".c").css('display' , 'none');

    $(".a").css('display' , 'none');

   

    $("#first-tab").removeClass('buttonHover');

    $("#second-tab").removeClass('buttonHover');

    $("#third-tab").removeClass('buttonHover');

   

    $("#"+tab).addClass('buttonHover');

    $("."+container).show('slow');

}

// ]]>

</script>

<script charset='utf-8' src='https://bloggertrixcode.googlecode.com/files/jquery1.2.6.js' type='text/javascript'/> 

4. Entra en Diseño en blogger
5. Da Click Añadir un Gadget y selecciona 'HTML/Javascript'
6. Pegue el codigo de abajo.

<div id="multwrap">
 <a href="javascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">Tab 1</a>
<a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">Tab 2</a>
<a href="javascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">Tab 3</a>
   <br clear="all" />
      <div id="multitab" align="center">
          <div class="a">
                <em>B</em>logger Es Un Servicio publicode publicacion que permite blogs privados o multi-usuario con las entradas con fecha y hora. Fue desarrollado por Pyra Labs, que fue comprado por Google en 2003. En general, los blogs están alojados por Google en un subdominio de blogspot.com. <br /> <br /> Gracias!
                </div>
                <div class="b"><em>L</em>orem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500

                </div>
                <div class="c"><em>E</em>mpezando en febrero de 2013 se inició la integración de blogs Blogger de usuario con múltiples URL específica de cada país aborda decir exampleuserblogname.blogspot.com será redirigido automáticamente a exampleuserblogname.blogspot.ca en Canadá, exampleuserblogname.blogspot.co.uk en el Reino Unido, etc </ div >
</ div> </ div>
</ div>

Note:  Puedes pegar cualquier texto o codigo,reemplazando las tres lineas de texto presente. 

7. Luego guarda tu HTML/Javascript'.
Todo listo

Read More

Como Añadir Una Linea Divisoria Entre las Entradas En Blogger

En el dia de hoy te traigo otro interesante super truco para tu blog de Blogger titulado Como Añadir una Linea Divisoria Entre las Entradas.Añadiendo unj divisor entre los articulos no es nada mas que añadir una imagen cual clarifica tu articulo .

 Divide los post facilmente.Realmente por defecto la plantilla Blogger tiene una Linea la cual divide el articulo pero no tiene ese atractivo especial. Pero si deseas hacerlo atractivo y creativo sigue estos pasos.

Chequea Como Añadir Efecto Nieve en Blogger

Lo primero que debes hacer es encontrar una imagen que desees utilizar como divisor divider Ejemplo la siguiente imagen .

Puedes hospedar tu imagen de divisoria en cualquier hospedador tales como tinpic o Photo Bucket etc.

Como Añadir Linea Divisoria Entre Entradas en Blogger

• Entra cuenta de Blogger >> Plantilla >> Editar HTML
• Busque el siguiente codigo

.post { margin:.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; }

• Luego Reemplace el codigo de arriba con el Script de abajo y si estas interesado en Cambiar la imagen divisoria solo cambia la URL y siga este paso.

.post {
background: url(http://i36.tinypic.com/xqid55.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:3.6em;
}

•  Reemplace la  URL roja mencionada arriba con tu propia URL imagen divisoria
• Si deseas cambiar el "Padding-Bottom" aumenta o baja el valor que esta en Bold Script negro.(padding-bottom:3.6em).

El 2nd Metodo para Añadir un Divisor entre entradas en Blogger

Si el metodo de arriba no trabaja en tu Plantilla,entonces utiliza este metodo el cual es facilisimo.

• Entra en tu cuenta Blogger
• Da Click en Plantilla
• Editar HTML
• Ahora busca el Script de abajo

<div class='post-footer-line post-footer-line-3'/>

• Luego Copie el Script de abajo y añadelo arriba del Script de arriba

<center><img height='30' src='Url de Imagen Divisoria'/></center> 

Nota:- Si deseas aumentar la altura del divisor Divider cambia el 30 por el valor deseado,y Añade la Url de Imagen Divisoria en el codigo y Listo!

  Sin duda este es un super truco excelente,ideal para bloggers ,de seguro ayudara al lector a navegar el contenido de tu blog facilmente.
Chequea Articulo Como Añadir Descarga Lenta de Imagenes en Blogger

Read More

Atractivo Texto Anunciate Aquí con Efecto Hover en blogger

Te mostrare como añadir un Atractivo Texto Anunciate Aquí con Efecto Hover en blogger: Mantener a los afiliados y vendedores de enlaces atentos a un diseño llamativo.A los Visitantes les gusta mucho la creatividad y la genialidad de cualquier cosa en la Web , es un problema común en estos día para algunos blogeros que ponen anuncios aburridos.

Esta relación, ayudara a agregar un estilo significativo de Publicidad de un Banner que sin duda le ayudará a conseguir un poco de generosidad de los visitantes y obtendrá una gran cantidad de posibilidades de obtener publicidad de diferentes empresas.

Ejemplo:

⇝ Aqui un espacio disponible.
Contacte αdмїη para mas informacion⇜

Como Añadir un Atractivo texto" Anunciate Aqui" con efecto Hover

• Entra en tu cuenta Blogger .
• Da Click en Diseño
• Da Click Añadir un Widget en la barra de la derecha
• Un Cuadro emergente abrira
• Selecciona HTML/JavaScript
• Copia el Script de abajo y pegalo en el espacio provisto.

<style>#text{-moz-transform:rotate(-5deg);-o-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);color:#FFF!important;font-family:arial;font-size:60px;font-weight:300;letter-spacing:-5.5px;line-height:45px;text-align:center;margin:20px 10px}#text a{color:#333;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 7px #AAAAAA, -1px -1px #000;text-transform:lowercase;-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0}#text a:hover{-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 100px transparent, -1px -100px transparent;color:transparent}inf{color:#d2a}#text a:focus,#text a:active{color:#eee!important;-moz-transition:all 0 ease-in-out!important;-o-transition:all 0 ease-in-out!important;-kmoz-transition:all 0 ease-in-out!important;-webkit-transition:all 0 ease-in-out!important}</style><br />
<div class="rent" id="text">
<a href="http://www.blogger.com/URL" target="blank"><blink>⇝</blink> Aqui un espacio disponible.<br />Contacte <inf>αdмїη para mas informacion</inf><blink>⇜</blink></a></div>

Note: Cambia la "URL" por el enlace de la pagina donde deseas redirigir a los visitantes cuando den click al anuncio.Ahora presione Guardar html/javascript y eso es todo!

Read More

Como Encuadernar las Articulos Separadamente En Blogger

Te mostrare como encuadernar los articulos separadamente en blogger podras notar que en la mayoria de las plantillas ,los articulos no estan encuadernadas separadamente Realmente este truco puede ser aplicado usando CSS.

Aplicar este super truco mostrara un cuadro separado que cuando el visitante o lector apunte el mouse sobre el borde este cambiara de color .
Para aplicar este truco siga estos simples pasos:

Como Añadir un Cuadro Separado a cada entrada en blogger

• Entra en tu cuenta de Blogger.com
• Da Click en Plantilla
• Luego da Click en Editar Html
• Ahora Copia el codigo de abajo y pegalo antes de la siguiente etiqueta </b:skin>.

.post { background:#FFFFFF; border: 2px solid #000000; padding-right:7px; padding-left:7px; } .post:hover { border: 2px solid #FF0000; } .post:active { border: 2px solid #0004FF; }

Eso es todo ahora chequea tu blog en vivo.
Nota:Para Personalizarlo :-Si te interesa cambiar los colores por ejemplo para cambiar el color de fondo entonces reemplaza #FFFFFF con el codigo de color que desees,.Y si deseas cambiar el color del Borde entonces cambia  #000000 #FF0000 #0004FF  con el codigo de color que desees.

Read More

Atractiva Barra de Menu Vertical Para Blog De Blogger

Es fundamental añadir una barra de navegacion a cada sitio web o blog de blogger.Este widget se utiliza como ya hemos visto anterirmente para enlazar las paginas principales.Siendo asi de gran ayuda para los visitantes de tu pagina ,facilita la navegacion de tu sitio,los temas asociados y articulos concernientes.
 Si a todo esto le añadimos una barra de  menu que sea bien diseñada y atractiva claramente llamara la atencion y mas tiempo un lector estara en tu sitio para saber de los temas que incluye el mismo.

Pues hoy te explicare como añadir una barra de menu vertical a tu blog.
Para ver ejemplo da click Demo
1. Entra en cuenta de blogger

2.Selecciona Plantilla

3. Ahora veras en blog en vivo , dale Click en boton EDITAR HTML"

5. Encuentra esta etiqueta   ]]></b:skin> usando Ctrl+F 

6. Pega el codigo de abajo antes de etiqueta ]]></b:skin>

/* El Codigo CSS para el menu comienza aqui ciudadblogger.info */

ul.svertical{
width: 200px; /* width of menu */
overflow: auto;
background:white;/* background of menu */
margin: 0;
padding: 0;
padding-top: 7px; /* top padding */
list-style-type: none;
}

ul.svertical li{
text-align: right; /* right align menu links */
}
ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background:#35BEFF; /* initial background color of links */
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 7px; /* spacing between links */
color: black;
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.svertical li a:hover{
padding-right: 30px; /* add right padding to expand link horizontally to the left */
color: black;
background: #0B55F1;
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}
ul.svertical li a:before{ /* CSS generated content: slanted right edge */
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */
border-color: transparent transparent transparent white; /* change black to match the background color of the menu UL */
}

7. Entra en blogger y da click en Diseño

8. Da Click Añadir un Gadget y selecciona 'HTML/Javascript

9. Pega el codigo de abajo.

<ul class="svertical">
<li><a href="http://www.ciudadblogger.info/">Home</a></li>
<li><a href="http://www.ciudadblogger.info/">CSS </a></li>
<li><a href="http://www.ciudadblogger.info/">JavaScript </a></li>
<li><a href="http://www.ciudadblogger.info/">HTML</a></li>
<li><a href="http://www.ciudadblogger.info/">Trucos</a></li>
<li><a href="http://www.ciudadblogger.info/">Tutoriales</a></li>
</ul>

10. Ahora Guarda HTML/Javascript'.

   Listo..

Read More