Como poner un sistema de valoración en Blogger

Par poder hacer esto necesitamos recurrir a un sitio externo a blogger llamado OutBrain.

Vamos al icono de blogger y damos click.

Lo recomendable seria registrarnos para tener un control sobre las visitas y las valoraciones de los post; el registro puede ser tradicional o con OpenID.  

Llenamos los datos del registro y vamos a nuestro email a checar el link de confirmación y damos click en el, el cual nos regresara a la pagina de outbrain.

Vamos al final de la pagina y le damos donde dice:

 OK, take me to my dashboard:

Ahora vamos a donde nos dice : Claim your Blog here

Ahi rellenaremos nuetsros datos tal como lo muestra la imagen y pondremos: continue

Nos mandara a Blogger donde seleccionaremos el blog donde vamos a poner el sistema de valoración, y le damos click en aceptar.

Ahora confirmamos en la página de OUTBRAIN:

Listo nuestro blog ha sido confirmado:

Ahora el ranking ya esta listo, lo podrán ver abajo de los post como viene por defecto, esta opción la pueden cambiar en Manage Blogs / Settings:

Realizan cualquier cambio que quieran como el cambiar de posición el ranking, y guardan sus opciones:

Y eso es todo, ya tendrán funcionando un ranking bastante simple y efectivo, ahora pueden ir viendo los resultados en la misma pantalla de Manage Blogs o seleccionar directamente desde arriba en el menú el blog que quieren revisar.

 

Visto en : Ayuda Blogger

Seguir leyendo »

Como poner la fecha en tu blog de blogger

Este truco es para poner la fecha actual en una de las barras laterales de tu blog.

Tan solo añades un nuevo elemento de HTML y pones el siguente codigo:

<p align="center"><br /><font face="arial" color="black" size="-1"><br /><b><i><script language="javascript"><br /><!--<br /> nombres_dias = new Array("Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado")<br /> nombres_meses = new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre")<br /> fecha_actual = new Date()<br /> dia_mes = fecha_actual.getDate() //dia del mes<br /> strdia_mes = (dia_mes <= 9) ? "0" + dia_mes : dia_mes<br /> dia_semana = fecha_actual.getDay() //dia de la semana<br /> mes = fecha_actual.getMonth() + 1<br /> strmes = (mes <= 9) ? "0" + mes : mes<br /> anio = fecha_actual.getYear()<br /> if (anio < 100) anio = "19" + anio //pasa el año a 4 digitos<br /> else if ( ( anio > 100 ) && ( anio < 999 ) ) { //efecto 2000<br /> var cadena_anio = new String(anio)<br /> anio = "20" + cadena_anio.substring(1,3)<br /> }<br />document.write(nombres_dias[dia_semana] + ", " + dia_mes + " de " + nombres_meses[mes - 1] + " de " + anio)<br /><br />//--><br /></script><br /></i></b></font></p>

 

Visto en Recursos para tu blog

Seguir leyendo »

Como crear pestañas en Blogger: Tab View

 Tab View  es un pequeño script que nos permite agregar pestañas o solapas en blogger.

Agregamos los dos archivos antes de </head>:

<script type="text/javascript" src="URL_tab-view.js"></script>
<link rel="stylesheet" type="text/css"href="URL_tab-view.css"/>

Como detalle extra, este script usa la imagen tab-view.png así que deberemos alojarla en alguna parte.

El código HTML a utilizar sería este:

<div class="TabView" id="TabView">
  <div class="Tabs" style="width: anchopx;">
    <a class="Current">Pestaña 1</a>
    <a>Pestaña 2</a>
    <a>Pestaña 3</a>
  </div>
  <div class="Pages" style="width: anchopx; height: altopx;">
    <div class="Page" style="display: block;">
      <div class="Pad"> ... contenido Pestaña 1 ... </div>
    </div>
    <div class="Page" style="display: none;">
      <div class="Pad"> ... contenido Pestaña 2 ... </div>
    </div>
    <div class="Page" style="display: none;">
      <div class="Pad"> ... contenido Pestaña 3 ... </div>
    </div>
  </div>
</div>
<script type="text/javascript">tabview_initialize('TabView');</script>

Seguir leyendo »

Como crear pestañas en Blogger: DOMtab

DOMtab es otra forma de crear pestañas en Blogger.

Para hacerlo solo tenemos que descargar el ZIP y usaremos los dos archivos

domtab.js y domtab.css

Agregamos ambos antes de </head>:

<script type="text/javascript" src="URL_domtab.js"></script>
<link rel="stylesheet" type="text/css" href="URL_domtab.css"/>

El código HTML elemental tendría esta estructura:

<div class="domtab doprevnext">
  <ul class="domtabs">
    <li><a href="#t1">Pestaña 1</a></li>
    <li><a href="#t2">Pestaña 2</a></li>
  </ul>
  <div>
    <h2><a name="t1" id="t1">La Pestaña 1</a></h2>
    <p> ... contenido Pestaña 1 ... </p>
  </div>
  <div>
    <h2><a name="t2" id="t2">La Pestaña 2</a></h2>
    <p> ... contenido Pestaña 2 ... </p>
  </div>
</div>

Cuando en el bloque principal se agrega la clase doprevnext, en la parte inferior de cada pestaña aparecerá un enlace para avanzar o retroceder.


En el sitio del autor hay muchos más detalles de cómo configurar el script y personalizarlo.

Seguir leyendo »

Como crear pestañas en Blogger : SimpleTabs

SimpleTabs es un script que permite crear pestañas o solapas sencillas sin recurrir a nada externo. Por lo regular son muy eficaces a la hora de tener una sola sidebar, pues ahí puedes poner lo de tres sidebar.Incluye un control de cookies, así que se recordará la última solapa abierta ,al recargar la página, se volverá a mostrar.
El único defecto es que en Internet Explorer no funciona bien.

Descargamos el ZIP y  tenemos 2 archivos:

 simpletabs_1.1.js y simpletabs.css

Debemos agregar ambos archivos antes del </head> de la siguiente manera:

<script type="text/javascript" src="URL_simpletabs_1.1.js"></script>
<link rel="stylesheet" type="text/css" href="URL_simpletabs.css"/>

o tambien podemos agregar el CSS directamente a la plantilla en dado caso que queramos modificarlo:

div.simpleTabs {

  padding: 10px;


}


ul.simpleTabsNavigation {


  height: 24px;


  line-height: 24px;


  list-style-type: none;


  margin: 0;


  padding: 0;


  text-align: left;


}


ul.simpleTabsNavigation li {


  background-image: none;


  display: inline;


  list-style-type: none;


  margin: 0;


  padding: 0;


}


ul.simpleTabsNavigation li a {


  background-color: #1E252D;


  border: 2px solid #3E454D;


  color: #BBBBBB;


  margin: 0 1px 0 0;


  padding: 6px 10px;


  text-decoration: none;


}


ul.simpleTabsNavigation li a:hover {


  background-color: #3E454D;


  text-decoration: none;


}


ul.simpleTabsNavigation li a.current {


  background-color: #3E454D;


  color: #FFFFFF;


}


ul.simpleTabsNavigation li a.current:hover {


  cursor: text;


}


div.simpleTabsContent {


  background-color: #3E454D;


  display: none;


  font-size: 12px;


  margin-top: 1px;


  padding: 10px;


}


div.simpleTabsContent.currentTab {


  display: block;


}

El HTML lo insertamos donde queremos mostrar las pestañas, recordando que si es en un post, deberemos escribir todo en una sola línea:

<div class="simpleTabs">
  <ul class="simpleTabsNavigation">
    <li><a href="#">Pestaña 1</a></li>
    <li><a href="#">Pestaña 2</a></li>
    <li><a href="#">Pestaña 3</a></li>
  </ul>
  <div class="simpleTabsContent">contenido Pestaña 1 ... </div>
  <div class="simpleTabsContent">contenido Pestaña 2 ... </div>
  <div class="simpleTabsContent">contenido Pestaña 3 ... </div>
</div>

Seguir leyendo »

Como poner código en los post de Blogger

 

Algo que siempre había querido hacer era poner el código en los post de blogger, pero sin tener que recurrir a modificar mi plantilla.

Eso es precisamente lo que hace esta pagina Escape HTML

Tan solo pones el código y le das en “Parse” ; y te lo convertirá en un código que insertándolo dentro de los post, quedara como código.

Así de fácil.

Seguir leyendo »