vivamivictoria7
Usuario (Chile)
Para lograr opacar las imágenes en tu blog, sólo debes pegar el siguiente código: .img{opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100);} img:hover{filter: alpha(opacity=80); moz-opacity:.80; opacity:.80;} antes de </style> Saludos!
Hoy enseñaré lo básico al momento de crear un blog y usar una plantilla de Blogskins.Lo primero que debemos hacer es crear un blog (usaré Blogger para la demostración)Elegimos cualquier plantilla y hacemos click en continuar.Hacemos un primer post de prueba y lo publicamos.Vamos a la pestaña Diseño - Edición de HTML - y bajamos hasta encontrar Recuperar la plantilla clásica. Al hacer click aparecerá el antiguo formato de blogger. Ponemos aceptar y entramos a Blogskins. Busquen un skin que se acomode a su gusto, yo escogí para el blog de prueba el seguiente: aquí.Y la vista previa está: acá.Bajamos hasta donde dice Acciones y le damos click a Blogger Main. Se descargará un Documento de texto, el cual copiamos y pegamos en nuestro HTML de Blogger, damos click a Guardar Cambios de Plantilla y luego en Vista Previa.Para cambiar el código a nuestro gusto vamos hasta el principio del código Html, lo primero que veremos será:<html><head><title>TU TITULO LO MODIFICAS AQUÍ</title>Luego bajamos un poco hasta:Body {background: url(ACÁ VA EL LINK DE TU IMAGEN QUE PUEDES ALMACENAR EN http://photobucket.com) fixed; Luego color: #444; font-family:georgia; font-size: 9px; letter-spacing: 1px; line-height: 15px; text-align: justify;}Aquí podemos cambiar el estilo de letra (georgia), el tamaño (9px) y si la letra va justificada, centrada, o hacia la derecha o izquierda (justify).Más adelante aparece:.nav1{color: #F04155; font-family:georgia; font-size: 9px; letter-spacing: 2px; text-align: left; margin-bottom: 2px; text-transform: uppercase;background: #111; padding: 5px 25px 5px 23px; border: 4px solid #101010; letter-spacing: 1px;}.nav2{color: #4DB7A3; font-family:georgia; font-size: 9px; letter-spacing: 2px; text-align: left; margin-bottom: 2px; text-transform: uppercase;background: #111; padding: 5px 24px 5px 23px; border: 4px solid #101010; letter-spacing: 1px;}.nav3{color: #FA8303; font-family:georgia; font-size: 9px; letter-spacing: 2px; text-align: left; margin-bottom: 2px; text-transform: uppercase;background: #111; padding: 5px 24px 5px 23px; border: 4px solid #101010; letter-spacing: 1px;}Aquí podemos cambiar el aspecto de nuestro menú (el que aparece arriba e indica Perfil, Entradas y Mensajes).http://administration.boardhost.com/colors.html les dejo una carta de colores para que le puedan dar una imagen a su gusto.Lo siguiente:.wah{border-bottom: 1px dotted #ddd;}i {color: #FA8303;}b,strong {font-style: bold; color: #F04155;}s{color: #bbb;}Indica los colores de las letras al estar en negrita, cursiva o tarjada.Y esto:.h1{font-family:georgia; font-size: 6.5pt; text-transform: lowercase; color: #4DB7A3; text-align: left;}.h2{font-family:Courier#New; font-size: 14pt; color: #93546D; text-align: left; letter-spacing: -1px; text-transform: lowercase; padding: 0px 0px 0px 3px;}.h4{font-family:arial; font-size: 16pt; color: #333; text-align: left; letter-spacing: -1px; text-transform: uppercase;}.h4:hover{color: #BC8F8B;}Indica los aspectos de las letras en títulos y durante el blog.Luego bajamos hasta que encontramos esto:<div id="content"><div style=border:1pxsolid#f0f0f0;text-align:center;color:#ddd;padding-left:5px;>ESCRIBE AQUI UNA DESCRIPCIÓN DE TU BLOG {♥}</div><p><center><img src="AQUI EL LINK DE UNA IMAGEN LLAMATIVA"><p>Y lo cambiamos a nuestro gusto.A continuación viene el menú que es el siguiente:<span class="nav1" onMouseout="this.style.color='#F04155'; this.style.background='#111';" onMouseover="this.style.color='#111'; this.style.background='#F04155'" onClick="changeNavigation('profile')">PERFIL O SOBRE MI O LO QUE QUIERAS ESCRIBIR</span> <span class="nav2" onMouseout="this.style.color='#4DB7A3'; this.style.background='#111';" onMouseover="this.style.color='#111'; this.style.background='#4DB7A3'" onClick="changeNavigation('entries')">ENTRADAS DEL BLOG</span> <span class="nav3" onMouseout="this.style.color='#FA8303'; this.style.background='#111';" onMouseover="this.style.color='#111'; this.style.background='#FA8303'" onClick="changeNavigation('tagging')">MENSAJES, EXTRAS, ETC</span></center><br>Y lo cambiamos.Más abajo van apareciendo códigos como el siguiente:<div id="profile" style=display:none><div class="h2">► WanJing Flops</div><p>Th' big name is <font color="#A07547">Wanjing.</font> Sixteen going seventeen soon. I hate science cause i ain't freaking understandhow thing goes, geez. <font color="#FF9284">I'm more into designing, drawing, floorball, musics, fashion trends, k-pop and photography.</font> i'm not much of a talker, susceptical. <font color="#D3A09C">Oh, i love laughing too.</font><p>Esto es lo que va en la pestaña Perfil o Sobre Mí. Podemos escribir lo que queramos.Lo único que no debemos modificar es:<div id="entries" style=display:none><Blogger><div class="h2">► <$BlogItemTitle$></div><span class="h1">♥ <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> <$BlogItemDateTime$> | <a href="javascript:scroll(0,0)">▲ Back to top</a></span><p><$BlogItemBody$><p></Blogger></div></div>Puesto que aquí van nuestros post.Para agregar la ventana extra de comentarios, antes de <p></Blogger></div></div> Pegamos lo siguiente:<BlogItemCommentsEnabled><a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style=text-transform:lowercase><$I18NNumComments$></span></a></BlogItemCommentsEnabled><BlogItemBacklinksEnabled><a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style=text-transform:lowercase><$I18NLinksToThisPost$></span></a></BlogItemBacklinksEnabled> <$BlogItemControl$>Espero que les haya gustado. Saludos!Por cierto, con Html sólo hay que atreverse, pero siempre guarden una copia de su trabajo.