Inicio > Ejemplos, IE, IE8, Tips, WebSlices > [IE8] WebSlice del blog del Nor xD

[IE8] WebSlice del blog del Nor xD

Después de la platica de Aceleradores y WebSlice de hace un par de días en la UNEVE, aquí el WebSlice de mi Blog. No les voy a decir como hacer un WebSlices, les recomiendo el post de mi  buen amigo Ivan en donde describe como hacer un WebSlice con acceso a datos, aquí la dirección:

http://sqlpsykrest.wordpress.com/2009/05/15/asp-net-creando-una-webslice-con-datos-de-una-bd-y-un-repeater-sql-2008/

Bien, como seguramente ya saben como hacer un WebSlices y saben que es muy fácil aquí tip, para poner un poco más chulos los WebSlices. (aunque el mío no se ve tan chulo xD). El punto es que voy a mostrar los RSS de mi blog en un WebSlice, como saben esto se hace con el microformato:

feedurl

y la instrucción sería más o menos así:

<a rel="feedurl" href="https://mspnor.wordpress.com/feed/" style="display:none;"></a>

Pero, aquí hay un problema es un poco complicado pornerle un estilo a nuestro WebSlices pa’ ponerlo chulo, así que la respuesta a esto es hacer referencia a una página que será la que se mostrará en el WebSlices, para esto usamos lo solucionamos haciendo referencia a dicha página htm:

<a href="display.htm" rel="entry-content" style="display:none"></a>

Como se dan cuenta tiene referencia al entry-content, en esta página podemos ponerle diseño para que se vea chulo nuestro WebSlice😀. Vale mi código para que se muestre mis RSS en un WebSlice con un poco de diseño es el siguiente:

<div id="topten"class="hslice">
  <h1 class="entry-title">WebSlices del Blgo del Nor</h1>
  <div class="entry-content">
    <script language="JavaScript" src="http://www.hoteljuice.com/conversor/feed2js" type="text/javascript"></script>
      <noscript>
         <a href="http://www.hoteljuice.com/conversor/feed2js.php?">Ver Feed RSS</a>
         </noscript>
  </div>
  <a href="display.htm" rel="entry-content" style="display:none"></a>
 </div> 

Aquí mi script es el que hace la magia para mostrar los RSS y si se dan cuenta es lo que muestro en el entry-content y al final hago referencia a la misma página, es decir en display.htm tengo este código dentro del body😀, y por ultimo un poco de css para poner una imagen de fondo y alinear al centro todo este rollo:

body
{
    width: 500px;
    margin: 0 auto;
    background: url(https://mspnor.files.wordpress.com/2009/06/webslice.png) no-repeat center top;
}

h1
{
    font-family: 'Comic Sans MS';
    font-size: large;
    color: #000080;
    text-align: center;
}

Con esto todo esta listo para mi WebSlices que cuando lo agrego a mi página se ve más o menos así:

image

Solo un pequeño detalle con esto de redireccionar a una página, es que los WebSlices se agregan con el titulo, cosa que con los otros, no, pero vaya que el hecho de poder poner chulos nuestros WebSlices ya es bastante😀. Espero que les ayude esto y no olviden votar por el Blog😛

 

Etiquetas de Technorati: ,,,,
Categorías:Ejemplos, IE, IE8, Tips, WebSlices
  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: