Caja contenedora para codigos html

-voy a explicaros la forma de crear una caja contenedora para poder mostrar nuestros códigos html.
-Podremos modificar a nuestro gusto los siguientes datos:
background, color, margin, padding etc.
Una vez hemos personalizado nuestro código base, accedemos a Edición Html de nuestra plantilla y sin necesidad de expandir artilugios lo pegaremos antes de ]]></b:skin> :

-CODIGO:

/* Caja de código */pre {padding-top:22px; /* Relleno - para ajustar Fondo */}pre code {overflow:auto; /* Determina si es necesario agregar barras de Scroll */background-color: #efffdf; /*Color de Fondo en Hex */border:1px solid #999999; /*Color de Borde en Hex */color:#333333; /*Color de letra en Hex */display:block; /* No tocar */padding:8px; /* Relleno del cuadro */white-space:pre; /* No tocar */text-align:left; /*Alineacion del Texto , left=izquierda, center= centrado, right=derecha */sumin-height:63px; /*Altura minima del Cuadro */}/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */code:hover {background-color: #CAF99B; /*Color de Fondo en Hex */border:1px solid #0066cc;/*Color de Borde en Hex */le}/*FIN Caja de código */

-Una vez agregado el código a nuestra plantilla guardamos los cambios y listo.
-Si queremos que cada vez que nos interese mostra un código aparezca nuestra caja, lo haremos de la siguiente forma:
-Al inicio de nuestro código pondremos las etiquetas <pre><code>Aquí el Código</code></pre>.
-Si queremos que aparezca automaticamente en nuestra plantilla "posts" accederemos a: Configuración/Formato/Plantilla de entrada donde añadiremos <pre><code></code></pre> y guardaremos los cambios efectuados.
El resultado final seria como el que os muestro en este post, pero con colores distintos.

Diapositivas de Imagenes para Blog y otros

-Hola a todos,desde hace tiempo conozco una buena pagina para hacer una galeria de imagenes ( o Diapositivas) y mediante un codigo "html" ponerlas en nuestro blog,se trata de "Slideshows",que algunos ya lo conocerán,pero desdeluego otros no,y para vosotros "los que no conoceis esta pagina" va dirigido este post.

-1º: Ir a SLIDESHOWS> hay seleccionáis "Blogger",hi5,o lo que proceda,paso seguido damos al botón "crea un Slide show",pronto vemos en la sección "Agregar fotos de:" en "sube tus propias imagenes " directamente damos al botón "Busca" y seleccionamos imagenes de nuestro PC para subirlas,una vez la hayamos seleccionado automaticamente se va cargando y subiendo.

-2º: Ya subidas todas las imagenes que queríamos,modificaremos varias opciones:
-Estilo
-Skins
-Temas
-Música
-Fondo
-Efectos
-Tamaño
-Privacidad
-Como veis tenemos gran variedad de opciones para diseñar nuestro pase de diapositivas personalizado,para que quede bien adaptado a la estética de nuestro blog.

-3º: Como ultimo,damos al botón "Guardar y obtener código",rellenamos los "detalles de Slide Show",
"Guardamos créditos",y el código que genera "html" lo llevamos a nuestro blog,disfrutarlo como todo ¡es Gratis! y muy sencillo.

Reproductor de Música MP3

Hoy os dejo una pagina muy útil,donde se pueden encontrar varios widgets para nuestro blog,pero voy a destacar el "MP3".Podemos elegir entre varios diseños que será difícil encontrar en otros sitios,estáticos o animados,complejos o simples,determinar colores,música,y otras opciones,os paso brevemente a indicar como colocarlo en vuestro blog: -Entrar a MYFLASHFETISH:1º Clik en MP3 Playlist para elegir el "Skin" (modelo de reproductor).
2º Elegiremos un modelo pulsando sobre el mismo.
3º Ahora podremos añadir música y editarlo,y nos saldrán estos botones de la imagen para hacerlo:4º Añadiremos música a la "Play List" la que nos ofrecen,o bien podemos darle a "My songs" para subir y agregar la nuestra propia"(aunque sera mas lento),

5º En "Customize";vamos a "settings" para poner autoplay sí o no,para reproducción automática y editamos el volumen mas abajo,

6º "Save Playlist" en Play list title; ponemos un titulo,y guardamos;"SAVE".

7ºAhora (si no lo hemos hecho antes) toca registrarnos,para poder obtener el código y ya habremos acabado.8º Bien;Una vez rellenado el registro,no hace falta ni confirmar email,directamente nos facilita el código del Reproductor creado para colocarlo en cualquier elemento html/javascript de nuestro sitio:9ºMostraré el reproductor MP3 que se creó para hacer este "Tutorial" aunque seleccione las primeras canciones,solo para mostrar el funcionamiento:

Music" title="Get Music Tracks!" border="0">Playlist" title="Create Your Free Playlist!" border="0">View Profile" title="View all my playlists!" border="0">
Create a MySpace Music Playlist at MixPod.com

The magic Oleg Dersky photographer

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

Una vez más la magia de las galerías rusas by LensArt

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

Explora lo más reciente de Juneau photos

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

The best of Kadir BARCIN Photography

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

Crear Botones Online Rápidamente,Fácil y Gratis.

-En Internet hay gran variedad de paginas para crear botones,los cuales poner en la barra lateral,para enviar a otras secciones... podemos elegir el tamaño,el diseño,el color y todo "Online",sin necesidad de descargar ningún programa,es muy fácil,y rápido,
-De las paginas donde mas rápidamente podemos generar el Botón deseado y descargarlo,os recomiendo: thefreewebstuff>

-Un ejemplo de lo que puedes hacer con una pagina así seria crear botones con un determinado diseño,y por ejemplo "yo e creado para un blog de Motociclismo" los siguientes:
-Como veis tienen un "diseño determinado" e indican "diferentes secciones",muy útil para el diseño y para compactar contenido el utilizar botones.

Un chat para tu blog,muy bueno y editable para obtener lo deseado

-Encontrar un buen chat para colocar en nuestro blog "a veces" es tarea difícil o "no incluye las herramientas o el diseño que queremos",yo encontré uno y fue ´amor a primera vista´, -Si queréis ver como queda con diferentes diseños adaptados a la estética "según blog",podéis verlo aquí mismo en este "Ayuda para tu blog" al final de pagina...

-O visitar los siguientes blogs,a final de pagina:
- Chat de Humor>
-Chat de enlaces>
-Chat de Moto GP>
-Chat de Formula 1>
-Chat de Fútbol>
-ve a:Para conseguir tu Chat>

-Hay en: "free chat box" pulsas el botón,y hay eliges opciones,de imagen,radio,privacidad ,crear grupo,tamaño...a partir de hay genera un código," copialo " y llevalo a tu blog,y lo sitúas o bien en la barra lateral,o mejor "como lo puedes ver en este blog"...

Como poner una nube de etiquetas

-Nube de etiquetas para tu blog,Para agregarla, vamos a Plantilla -> Edicion HTML (no expandas artilugios)
El codigo se divide en 3, el primero lo pegamos antes de: "]]></b:skin>"

/* Label Tag Cloud */

#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none
!important;padding:0 5px;margin:0;vertical-align:baseline
!important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0
3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count
{padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

-El siguiente lo pegas despues "]]></b:skin>" y antes de "</head>"

<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://TU-BLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

-En http://TU-BLOG.blogspot.com pones la direccion de tu blog...
Ahora, busca lo siguiente (Control + F): <b:widget id='Label1' locked='false'
El tag completo es algo asi: <b:widget id='Label1' locked='false' title='Labels' type='Label'/> pero el title tal vez sea distinto en tu caso.
Esa misma linea (toda) la debes reemplazar por el siguiente codigo:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var ta=0
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

-Para terminar, ve a Plantilla -> Elementos de pagina -> añadir nuevo elemento -> etiquetas.
Ahora tendrás una nube de etiquetas en tu blog.

Sacar una Imagen instantanea de una pagina,blog...

-Sacar una Imagen "instantanea de una pagina web o blog" es muy sencillo,yo personalmente uso pincha AQUÍ "thumbalizr"> -Solo teneis que introducir la Url y dar a " thumb it ", mas abajo podeis leer "Here is your thumb : " hay sale la imagen generada,la previsualizais,y si quereis otro tamaño "mas grande o pequeño" desde hay mismo donde pone "Custom: " poneis el tamaño "mediante numeración de pixeles" y dais a "GO",para descargar la imgen resultante pinchais la imagen "saldrá y "botón derecho de ratón y "Guardar imagen como... "

Subir Imagenes rápidamente,para foros,y otros usos

-Os dejo las url´s de paginas para subir imagenes a Internet directamente "sin necesidad de registrarse",incluso en algunas nos dan "4 códigos"para usar en diferentes sitios y de diferentes maneras,también podemos rescatar de esos códigos, la "url de la imagen" para usarla de fondo para blog,imagen de banner,u otros..

-http://www.subirimagenes.com/
-http://www.imaxenes.com/
-http://www.imagenonline.com/
-http://www.cuelgalo.com/
-http://www.subirimagencristiana.com/
-http://www.hiboox.es/
-http://www.joombly.com/subir-imagenes
-http://hosting.deimagenes.com/

Las más recientes galerías de imágenes rusas

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

Maravillosas creaciones de David Stewart en Taringa

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

14 Rare Color Photos From the FSA-OWI

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

25 Awesome and Creative Motion Blur Pictures

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

Humanizing China by EastSouthWestNorth

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

Agregar a del.icio.us,Yahoo,Digg,Technoratti,...

-Hay una manera muy sencilla y rápida de ofrecer la opción de que a quien le guste un "post" publicado,pueda añadirlo a del.icio.us,Yahoo,Digg,Technoratti...u otros "Una noticia enviada por un desinteresado lector puede llegar a la portada y generarte un tráfico de visitas muy alto"

Copia el CÓDIGO:

<script src="http://www.mypagerank.net/services/sbt/sbt.php" type="text/javascript"></script>

-Esto lo pones cada vez que hagas un "post" en "creación de entradas" al final...

-Si quieres que salga automático,solo debes ir a "Configuración","Formato","Plantilla de entrada" y en el cuadro ponemos el código y damos a "Guardar",ahora en cada post que realicemos nuevo saldrá el código estomáticamente.
-Lo que deberías de ver es esto:

Cuadro para Codigos Html

-como crear un "cuadro" en el cual meter un código:

Esto es lo que verán una vez que introduzcan las etiquetas  <pre><code></code></pre>

-El código que se necesita para ese efecto es el siguiente:

Para agregar este código a Blogger, simplemente ve a Edición HTML (Plantilla)y agrega el código antes de ]]></b:skin>

pre {

        background:transparent url(http://img509.imageshack.us/img509/3046/codema7.png) no-repeat 0 0; /* Imagen Superior, si desas cambiarla modifica lo que se encuentra dentro de url(AQUI) */

        padding-top:24px; /* Relleno - para ajustar Fondo */

}

pre code {

        overflow:auto; /* Determina si es necesario agregar barras de Scroll */

        background-color:#fffbe5; /* Color de Fondo en Hex */

        border:1px solid #fff1a3; /* Color de Borde en Hex */   color:#7e1f09; /* Color de letra en Hex */      display:block; /* No tocar */   padding:5px; /* Relleno del cuadro */

        white-space:pre; /* No tocar */

        text-align:left; /* Alineacion del Texto , left=izquierda, center= centrado, right=derecha */su

        min-height:63px; /* Altura minima del Cuadro */}

/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */

code:hover {

        background-color:#FEFEDD; /* Color de Fondo en Hex */   border:1px solid #ffd511;/* Color de Borde en Hex */le

}

Ahora solo queda poner el siguiente código para que funcione,en "creación de entradas" cada vez que queramos publicar un post e incluir este cuadro: <pre><code>></pre>

-Yo os aconsejo hacer una cosa "para tener siempre a mano ese código"...

-Vamos a "Configuración",seleccionamos "Formato",bajamos hacia abajo y vemos que pone "Plantilla de entrada"y "un cuadro"...hay "en el cuadro" introducimos el "ultimo código" y "guardamos conflagración"

-Así cuando queramos realizar una nueva entrada siempre nos aparecerán "las etiquetas" necesarias para "entre ellas" introducir un código y que nos salga como en este blog lo hacemos.

Fonditos para tu compu en Social Wallpapering

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

Un poco más de 2 000 fotografías rusas

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

La crema y nata de la alta resolución en imágenes

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

15 Awesome Pictures by XemanhDep

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

Colección de Ольга Горелова en 35Photo.Ru

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

Selección de imágenes participantes en Photokonkurs

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

Inmensa colección de Wallpapers by 9Walls.Com

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

Lo más nuevo y reciente de MarcoFolio.Net

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY

Life in the Desert: 50 Stunning Photographs

No te conformes con una imagen, entra aquí y míralas todas!BROWSE GALLERY