Mostrando entradas con la etiqueta html. Mostrar todas las entradas
Mostrando entradas con la etiqueta html. Mostrar todas las entradas
¡Hola Sweeties!

Esta vez traigo un tutorial de cómo modificar el blockquote. Yo les mostraré cómo es el mío aunque ustedes pueden modificarlo a su gusto.



El código que aparece arriba debe ser colocado arriba de la etiqueta ]]></b:skin>


¡Hola! A continuación les dejaré las que a mi parecer son las mejores plantillas gratuitas que he encontrado. Si ven que alguna ya no es gratuita para el momento en que lean el post, dejen un comentario.










Primero que todo, les explicaré algunas cosas para que comprendan un poco de que va la cosa. NUNCA TOQUEN SIN SABER CÓMO SE MODIFICAN LOS CÓDIGOS PORQUE UNA VEZ QUE LO GUARDAN NO SE PUEDE VOLVER ATRÁS A MENOS QUE HAYAS GUARDADO UNA COPIA DE SEGURIDAD.

Etiquetas básicas:

<html> </html> : Comienzo y final del código html de su blog/página web.

<head> </head> : Comienzo y final del código perteneciente a la cabecera del blog/página web.

<div> </div> : Es la caja contenedora de ciertas partes de su sitio. Por ejemplo, como en la imagen, la cabecera (header) aparecen todas las especificaciones de cómo será, el título que tiene, la letra (font), el tamaño (weight y height) y los colores que posee.

<body> </body> : Es el cuerpo del sitio, se abre después de la etiqueta html y se cierra antes de ésta:
<html>
<body>
.....
......
........
</body>
</html>

<a> </a>  : Origen o destino del vínculo (link/url de una imagen, video, otro sitio, etc...)

<b> </b> : Estilo de letra en negrita.

<br>: Salto forzado de linea.

<center> </center> : Alineación en el centro. Abreviación de: Div align=center

<h1> </h1>: Encabezado (tamaño más grande). Hay hasta h6 (el más pequeño).

Bueno, donde dice Background es el fondo de algo, ya sea del blog o de otra cosa.

Cualquier cosa que diga hover  significa que cuando se pase el mouse ensima, por ejemplo en el menú de paginas de tu sitio, es color verde oscuro y pasando el cursor ensima cambia a verde agua. Para que me entiendan es el efecto que tiene el menú de la plantilla de mi blog.

Si buscan algo especifico como suele pasar cuando van a colocar un efecto en código, por ejemplo que al pasar el cursor sobre una imagen los bordes de ésta se redondeen, se busca:

]]></b:skin>

¿Cómo? 
Haz click en el código de la plantilla y aprieta control+f, ahi te saldrá un buscador y podrás buscar eso o cualquier otra cosa dentro del código.

Luego, dependiendo el estilo de borde que elegiste para las imágenes de tu blog, se agrega el código que te dan y lo pones antes de ]]></b:skin>

 Esas son las principales, si quieren saber más a fondo en la página que les dejo a continuación explican todo con lujo de detalles:

Virtualnauta


  

ESTO ES PARA QUIENES NO QUIEREN QUE EL CONTENIDO DE SU BLOG ANDE POR CUALQUIER LADO DE LA WEB Y SEA SÓLO SUYO. HAY VECES QUE PUEDE QUE NO SIRVA YA QUE ALGUNOS MIRAN Y ESCRIBEN TODO, SIN COPIAR, Y ESO NO SE PUEDE EVITAR. ESTE NO SOLO ES UN CARTELITO SINO QUE VIENE CON IMAGEN.

> IR A PLANTILLA  >EDICIÓN DE HTML Y ANTES DE </BODY> TIENEN QUE PEGAR EL SIGUIENTE CÓDIGO:
<script>
// Inhabilitar el botón derecho
var DADrccolor = "#F1F1F1";
var DADrcimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgf4twXAalJWUMJzKoWyOyoeVTGcdbnAAX855ZSE7Qoa8VxpvcsWBUC1M4YXtPWpTYdUGMqt8fPIC5aiPPXqWBJDb3X8YizRhcnS_2J6LuZUAFCZfqvd-otZlvJJw2jYU8MQKNW0wbQ48/s300/superheroe.png";
</script>
<script type="text/javascript" src="http://yourjavascript.com/2122535051/antirightclick.js">
</script>

LO QUE ESTÁ EN AZUL ES EL FONDO Y LA URL ES DEL SUPERHEROE QUE ES LA IMAGEN QUE APARECERÁ EN EL CENTRO. ESAS DOS COSAS SON LO ÚNICO QUE SE PUEDE MODIFICAR.


FUENTE: CIUDAD BLOGGER

  

Hay cuatro tipos de bordes para sus entradas:

1- Dashed 2- Double 3- Dotted 4- Outset
Primero que todo, vamos a Plantilla ---> Edición HTML


Aprieten Control+F y les aparecerá un buscador. Busquen la palabra SOLID. (apareceran varios o pocos dependiendo de la plantilla que tengan) y los reemplazan por el nombre del borde que ustedes elijan.


 Luego en el mismo buscador pondrán .post  o  .post-outer { o .date-outer {  (Tambien aqui depende de la plantilla).
Les aparecen algunas líneas de código entre { }, borran eso y pegan esto:

padding: 15px 20px;
background: #000 ;
border: 1px dotted #fff;
margin: 20px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
-khtml-border-radius: 40px;


Lo que está en rosa es el borde. Lo que aparece en px (pixeles) es cuan ancho será el borde. Luego eliges cual borde quieres (de los cuatro que mencione arriba) y por último el color del borde.

Busquen los códigos de los colores aquí.

Lo que está en celeste es el margen del borde de la entrada con lo que ustedes escribieron.


ESO ES TODO MIS AMORES ♥ 

PD: LA IMAGEN LA ENCONTRÉ EN GOOGLE IMÁGENES.

  






Imagen sacada de google imágenes.

Para poner este menú con subpestañas entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin>



/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */height:35px;
padding-left:14px;
background:#333333; /* Color de fondo */border-radius:20px; /* Bordes redondeados */}
.menu {
width: 100%;
float: left;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 20px 20px; /* Bordes redondeados del submenú */}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMTfn3fH3DZ9JutPQPStR3EuiTLFtgnoDR3aQ5zGcUxUsqGbPsODHbdsnr8DZRblLabF4n-5gM76sz33vWBitlThyphenhyphen7APEe_PVXn8KJ_7B9V42nVs6B7hyphenhyphengmXWnZuVrJI0ybiWwP5XXTBc/s35/separador.gif) bottom right no-repeat;
color:#cccccc; /* Color de la fuente */
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px; /* Espacio entre cada pestaña */text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2; /* Color de las pestañas al pasar el cursor */color:#FFFFFF; /* Color del texto al pasar el cursor */text-decoration:none;
}
.menu li ul {
background:#333333; /* Color de fondo del submenú */display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Ancho del submenú */z-index:100;
border-top:1px solid #fff; /* Borde superior del submenú */}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 20px 20px; /* Borde de las subpestañas */}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2; /* Color de las subpestañas al pasar el cursor */color:#ffffff;
text-decoration:none;
}
#search {
width: 228px; /* Ancho del buscador */height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJfIvRwWxqrT80R-MFoo7vRpyLfcKxMXOF5IrO1RLA65PKGHkTCQ9y9-SlH9SIGIw4NJREX5-JKjVLEnEEq3ChTb58RokfmW-NMb6bTgir33BwpJyuM3t36IR6nJ0ulHpAPUdQH75EUZQ/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}


Luego entra en la sección de Diseño, y en un elemento HTML/Javascript pega:


<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="URL del enlace">Pestaña 1</a></li>
<li><a href="#">Pestaña 2</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
<li><a href="URL del enlace">Pestaña 2.4</a></li>
</ul>
</li>
<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
<li><a href="URL del enlace">Pestaña 3.4</a></li>
</ul>
</li>
<li><a href="#">Pestaña 4</a>
<ul>
<li><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
<li><a href="URL del enlace">Pestaña 4.4</a></li>
</ul>
</li>
</ul>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>
</div></div>

Cambiar según corresponde. En donde dice Pestaña 1 cambiar por el nombre de esa pestaña, por ejemplo: Reseñas. Si deseas agregar otra pestaña, antes del último </ul> :

<li><a href="URL del enlace">Pestaña 5</a></li>
Si tendrá subpestañas entonces será:

<li><a href="#">Pestaña 5</a><ul>
<li><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
<li><a href="URL del enlace">Pestaña 5.3</a></li>
<li><a href="URL del enlace">Pestaña 5.4</a></li>
</ul>
</li>

Pueden cambiar los colores en esta pagina: http://www.colorhexa.com/color-names


¡Eso es todo!

  

Este es un tema bastante importante, porque como ya dije, la apariencia del blog es super importante.

A continuación les daré algunos sitios donde tienen plantillas, ya sea gratis o no, a su gusto:

Cuando ya tengan elegida su plantilla, la descargan y al terminar la descarga, se darán cuenta que es un archivo .Zip

Un archivo zip es un archivo que por ser grande lo tuvieron que comprimir al comprimir ese archivo sea en word, excel, corel etc se convierte en zip, para ello necesitas el programa WinZip o WinRar. El archivo winrar es lo mismo.

Abren la carpeta, si es que hay, y si no hay carpeta buscan el archivo .xml que lo abrirán con el programa Bloc de notas. en un costadito hacen click derecho y le dan a > Seleccionar todo > y luego de vuelta click boton derecho > Copiar.

Van a su blog y van a Plantillas > Edición de Plantillas

Aquí tienen que tener mucho cuidado, por eso, antes de seguir deben hacer una copia de la plantilla actual.

Bueno, seguimos.

Aquí también, seleccionan todo y lo borran. Luego le dan click derecho > Pegar > Guardar Plantilla o a Vista Previa (les recomiendo guardar primero)

Y Listo, ya tienen su plantilla nueva.

   

Suscribirse a: Entradas (Atom)
 
Copyright © 2014 Sweet Library All Right Reserved
Designed by OddThemes