6 ago 2009 - 02:23 PM
Como ya muchos de vosotros sabreis los artículos de Gem@ Blog van dirigidos en su gran mayoría a la plataforma Blogger, pues bien, para poder trabajar con la utilidad que nos ofrece en este artículo, en La Coctelera recuerda que los post no admiten javascipt solo el Sobre mi, con lo cual, de las tres formas de mostrar a nuestras visitas un documento que verás más abajo, en los post solo podrás utilizar la opción Embed y en el Sobre mi, Thumbs y Links ya que estas dos últimas utilizan javascript.
Esperemos que a alguien se le ocurra la manera de utilizar javascript en los post, ¿o ya la hay y no lo han desvelado?, si tienes alguna idea compártela por favor ;)
Josep me ha informado sobre un servicio muy interesante, se llama Embedit.in nos permite subir archivos proporcionado un código para mostrarlos en un reproductor flash sin vernos en la necesidad de descargarlos para visualizarlos.
Podemos subir archivos de hasta 20 MB, los formatos permitidos son:
|
- Documentos: Word (DOC/DOCX), Excel (XLS/XLSX), PowerPoint (PPT/PPTX), WPD, ODT, ODP, ODS, PDF
- Imágenes: GIF, JPEG, PNG, TIFF, BMP, PSD
- Vector Graphics: API, EPS, PS
Me ha sorprendido la sencillez y rapidez de uso además que no es necesario registro. Las opciones son muy básicas una vez tenemos los archivos subidos y accedemos por primera vez nos pide que identifiquemos nuestro proveedor.
|
|
Seguidamente se genera el código de nuestro documento y nos ofrece un panel donde podemos escoger color de fondo y adaptar el reproductor al tamaño deseado.
Hay otras opciones como añadir iconos que permitirán a nuestras visitas imprimir, descargar, o visualizar a pantalla completa así como decidir si nuestro documento es público privado.
Tenemos tres formas de mostrar a nuestras visitas un documento.
|
Thumb miniaturas que se abren en ventana modal.
<script src="http://embedit.in/thumb.Ep4iXiyRxk.js"></script>
Embed Visualizar el documento a modo de presentación.
<embed src="http://embedit.in/fodN38Ey4Q.swf" type="application/x-shockwave-flash" allowfullscreen="true" width="466" height="415"></embed>
Link En enlace de texto que se abre en ventana modal.
<script src="http://embedit.in/link.gYW5haqvP9.js?text=Embedit.in"></script>
El código que nos proporciona en teoría está incompleto para el editor de Blogger, ya que aunque el tag embed no necesita tag de cierre, si deseamos que pueda visualizarse debemos cerrar dicho tag, esto para el editor de Blogger, en La Coctelera no es necesario cerrarlo.
<embed src="http://embedit.in/fodN38Ey4Q.swf" height="415" width="466" type="application/x-shockwave-flash" allowFullScreen="true"></embed>
Escrito y cedido por: Gem@ Blog
Maquetado y publicado por: Davitociber
Enlace permanente al artículo original
12 jun 2009 - 04:48 AM
Como ya muchos de vosotros sabreis los artículos de Gem@ Blog van dirigidos en su gran mayoría a la plataforma Blogger, pues bien, para poder realizar el menú de este artículo en La Coctelera sigue los mismos pasos, únicamente que debes ponerlo todo en el Sobre mi o en un post
Giovanna me decía si podíamos añadir un menú sencillo así que aquí va uno sencillo y vistoso a la vez.
Nos situamos antes de ]]></b:skin> para añadir los estilos que son los siguientes.
|
#menu div.colormenu,
#menu div.colormenu a.menu {
font-family: sans-serif, Verdana, Arial;
font-size: 12pt;
color: white;
}
#menu div.colormenu {
text-align: left;
}
#menu div.colormenu a.menu {
background-color: #333;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}
#menu div.colormenu a.menu:hover {
background-color: #940f04;
}
Los colores los podemos modificar considerando que el color de fondo se muestra de la siguiente forma.
a.menu: tal y como lo vemos.
a.menu:hover: al pasar el cursor.
Si también queremos mostrar un color distinto al seleccionar el botón del menú podemos conseguirlo añadiendo a los estilos
#menu div.colormenu a.menu:active {
background-color:#ccc;
}
|
|
Ahora editamos un nuevo gadget escogiendo la opción HTML y en su interior añadimos lo siguiente:
<div id="menu"><div class="colormenu">
<a class="menu" href="#">Enlace 1</a>
<a class="menu" href="#">Enlace 2</a>
<a class="menu" href="#">Enlace 3</a>
<a class="menu" href="#">Enlace 4</a>
</div></div>
En lugar de texto Enlace 1 - 2- 3- 4 añadimos el texto que hará de enlace.
Donde la almohadilla # la sustituimos por la url del sitio que vamos a enlazar ya sea en el mismo blog o enlace externo.
Con "background" modificamos el color de fondo y el de fuente en "color"
|
Escrito y cedido por: Gem@ Blog
Maquetado y publicado por: Davitociber
Enlace permanente al artículo original
Continuar leyendo...
Artículos de Gem@ Blog en The Davitociber Times...
Artículos (RSS)
