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:



  

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.

   

Entra a Plantilla > Edición de html >y antes de ]]></b:skin> agrega lo siguiente:

/* Botones de Redes Sociales
----------------------------------------------- */
.BotonesSociales li {
border:1px solid #6E6E6E !important; /* Color del borde */
padding:5px !important;
margin:0 5px 6px 5px;
background:#ccc; /* Color de fondo */
list-style:none;
}
.BotonesSociales li a {
font-weight:bold; /* Texto en negrita */
text-decoration:none;
color:#1C1C1C !important; /* Color del texto */
}
.BotonesSociales li a:hover {
color:#2E9AFE !important; /* Color del texto al pasar el cursor */
position:relative;
top:1px;
left:1px;
}
.BotonesSociales span {
padding-left:10px;
}
.BotonesSociales img {
vertical-align:middle;
border:0;
}

Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, y pega lo siguiente:

<ul class="BotonesSociales">
<li><a href="https://plus.google.com/u/0/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAMzB9Ynnf1f9Bfj8aNgow558piF9vT84LJOtmBadZtLih_oMDp-f8BwqlUKi0pWgJoWKBcSw0vfaip6VCe7qge8UAJV4yzW9dwavYVr_NmLqxj_cmbQNAT27fURW20bQoYNwOuE0RaPo/" /> <span>Agrégame en tus círculos</span></a></li>
<li><a href="http://www.facebook.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaTBWfjKJJZJR_nAvdSbH7dPwbg7yt-etv22X_30_IPa7YBufG6iOEhUboGGWxV7M-cCneW9ECKFQSC80q28Ivi97fhFJjaOdwLJYBLL_v65VAdpxYQWmowVWNbbU3i8cTSIKr97Q8_nQ/" /> <span>Hazte fan en Facebook</span></a></li>
<li><a href="http://twitter.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuBQWzlwpeRU7PiK_fa45tnWiu1bfI_6u7jRWRX5eTvYaKmg8f66x1R9jD7FIEQJkBCL5g9EMrBx-v-WtKlKRPbcPUSl6vPcmxF-cMFc7Rd0EgXOYK8-W2nmam1O4ir1oGPvu28L_Do30/" /> <span>Sígueme en Twitter</span></a></li>

</ul>

 Ahora solo les queda reemplazar lo que está en rosa y listo.

  

Recuerden que para buscar lo que les digo se utiliza: Control + F

Para poner estos íconos sociales en tu blog entra en la Edición HTML de la plantilla y agrega antes de ]]></b:skin>


/* Iconos de redes sociales
----------------------------------------------- */
#social-iconos {
width:100%;
height:50px;
margin-bottom:10px;
display:block;
clear:both;
}
.social-icons{display:table}
.social-icons ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:right;
padding:5px 5px 0 0
}
.social-icons ul {
padding:0;
float:right;
margin-bottom:0;
}
.social-icons li.social_icon {
background:none !important;
padding-left:0 !important;
display:inline;
float:left;
margin-left:6px;
}
.social-icons li:hover {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
}

Luego SIN expandir los artilugios busca esta línea:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Arriba de ella agrega:

<div class='social-icons' id='social-iconos'>
<ul>
<li class='social_icon'><a href='http://facebook.com/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilFSScKwlN9mAFofGHjpaq4bhXnukBDIFNH5X6ho0OqDLT3B8KLTUAtoTvLv2l5P2h-u9No6DaQWTETdjFVdqdDqcWMxUfOVBTgIFk-uEhKZ57SIMaS4xsj2icTiJnZviSbJB8lzQ9LGY/s36/social-facebook.png'/></a></li>
<li class='social_icon'><a href='http://twitter.com/#!/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUtqxz3qJCJ9N6bOpzuiK0qBkrJO4l348zIMEADdpg79XEKLIRYM5dieVLCEqWfmgeaxETmavrx4RNSBLBns_cKAsWtFkJ9U8Yj2GYVEDJusSZcVjdCBvKrMVD3bVlclM0nxBZ8NdyYtI/s36/social-twitter.png'/></a></li>
<li class='social_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0OhJoELnfcCD2BgPjD7jLCC8rcN-Hw9haOcXY1VULa1DvormTHxzqvYWoFTuD6W3vIbNfT4vgVDDkhxbtb6u3zlhyphenhyphenyI9PxW1f4R_v7U0-dU61USsrU8MqFBkDygYVsP5Mez8gdklvKXk/s36/social-googleplus.png'/></a></li>
<li class='social_icon'><a href='http://nombre-de-mi-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGJsSit39son95wpgY3ONBKaeoDIuEf1FU0xxu5ikaBx7Nrs4fKDY1tZyD0rUoLrX4TKNbIQz2uTKFxBjvgb9H67gj5v_dggMqNgsSQjXSZmZpQUgCZh6tI9cCrN01rXEb0fWvPqVtPc8/s36/social-rss.png'/></a></li>
</ul></div>
Reemplaza lo que esta en rosa por tus datos y ya está.
Aquí lo podrán ver arriba de todo: Blog de prueba

  

Aunque no parezca, si se puede sacar.



Si entran en él, se darán cuenta que no se puede eliminar asi nomas. Aquí entra el código html.

Vamos a: Plantilla > Edición html > apretamos Control + F > Y buscamos: Attribution


Nos saldrá esto:

En la linea donde aparece dos veces, y dice: locked='true' > lo reemplazamos por false

En la linea anterior, donde dice: showaddelement='no' = quitamos el no y lo cambiamos por yes

Guardan los cambios y cierran la plantilla.

Y.... Taran! Si se fijan ahora si aparece la opción Eliminar.


Siempre antes de hacer cambios, hagan una copia de la plantilla, no sabemos que podría suceder.


  

Primero que todo, les daré unos consejitos para que su blog tenga buena apariencia.


  1. Si ustedes llenan de cosas a la página en cuestión, quedará MUY MAL. No es por ser mala ni nada de eso, pero es la verdad chicas, esto suele pasar con aquellas que recién empiezan y como les gusta todo lo que ven, lo ponen. Y no, porque lo primero que ve una persona al visitar su blog, lastimosamente, es la apariencia. ¿POR QUÉ? Porque en la mente de todos, el que un blog tenga buena apariencia dice que la información es confiable y segura, sumándole a que se lo toma en serio.
  2. Si ponen un cursor, no le pongan destellitos o corazoncitos que desprendan al mover el cursor. Demasiado cargado. Con que pongan una sola cosa, está bien.
  3. NO PONGAN REPRODUCTORES A MENOS QUE SEA NECESARIO. La gente se desconcentra al querer leer y no queremos eso ¿verdad? 
  4. Los blogs difíciles de leer. Si ponen un fondo claro, un ejemplo sería un marrón clarito, y que de fondo le pongan letras grises. No se puede leer así. No sólo perjudican la vista de los demás sino la suya.
  5. Los blog por asi decirlo, fantasma. No hay ni siquiera un bienvenidos ni tampoco una introducción por parte del autor. Eso te da a desconfiar un poco.
  6. La publicidad de Ascense. A mi parecer, no sé ustedes, no es más fea porque no se puede. 
  7. Y por último, dedíquenle tiempo a su blog, no lo dejen asi nomas como viene predeterminado en blogger. Pónganle alguna plantilla bonita y de su gusto, o como algunos (yo me excluyo xD ) que diseñan sus propias plantillas (por lo que tengo entendido utilizan el programa Dreamweaver)


Cómo cambiar el cursor de su blog


  1. Abran el blog al cual cambiaran el cursor.
  2. Busquen un cursor que les guste por internet (al final dejare algunas páginas)
  3. Copien el código que les dejan.
  4. Vamos hasta la plantilla html y bajamos hasta abajo de todo. Lo pegarán arriba de </html>

¡Y Vuola!



Algunas páginas para conseguir los códigos de su cursor :3
http://it.punteros.org/
http://cocoteen.blogspot.com.ar/2012/07/24-cursores-para-tu-blog.html
http://tatineyra.blogspot.com.ar/2012/09/cursores-para-tu-blog.html
http://tatineyra.blogspot.com.ar/2012/09/cursores-para-tu-blog.html
http://www.taringa.net/posts/imagenes/12499153/Cursores-Para-Blog.html



Bueno, como verán este es mi primer tuto.

Es muy sencillo.

Lo único que deben hacer es ir a Diseño > Colocar un gadget html/javascript> y colocar el siguiente codigo:

<marquee behavior="scroll" direction="left"><a href="LINK ENTRADA"><img height="150px" src="LINK IMAGEN" width="100px" /></a><a href="LINK ENTRADA"><img height="150px" src="LINK IMAGEN" width="100px" /></a></marquee>

Y si quieren seguir agregando más imágenes, solamente tienen que agregar esto: 

<a href="LINK ENTRADA"><img height="150px" src="LINK IMAGEN" width="100px" /></a>

Antes del: </marquee>

Debería quedarles así:





Acá les dejo un vídeo explicativo:



 
Copyright © 2014 Sweet Library All Right Reserved
Designed by OddThemes