[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:
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="http://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(http://mspnor.wordpress.com/files/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í:

Solo un pequeño detalle con esto de re direccionar 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




