Category Archives: Personaliza Código

IMAGEN TITULO MINIMA BLACK, Classic-Blogger

Aporte de Jorge Gomez de Mexico
Hola a todos, esta es mi primera participación en este blog, es acerca de como poner una imagen en el titulo del blog, aunque ya ha habido 2 post anteriores a este refiriéndose a como hacerlo e visto que aun hay muchos a los que no les ha resultado, espero que la información que les dejo les sea de utilidad, trate de modificar en mas mínimo el código original.

1.- lo primero que habrá de hacer es subir la imagen a blog, has como si fueras a subir una imagen cualquiera, agrega una entrada agrega la imagen, solo que deberás de seleccionar la opción Grande, cárgala y checate el código HTML busca la parte donde dice “http://photos…….. .Jpg” esta dirección cópiala y pégala en un documento de texto y déjala pendiente, ahora cámbiate a Plantilla, no publiques la entrada, esto era solo para subir la imagen.

2.-una vez que estés en Plantilla vas a buscar:

  1. /* Header
  2. ----------------------------------------------- */
  3. @media all {
  4. #header {
  5. width:660px;
  6. margin:0 auto 10px;
  7. border:1px solid #333;
  8. }
  9. }

aquí haremos las primeras modificaciones
después de: #header { deberás de escribir Background: url(“aquí vas a poner la dirección que tenias reservada en el documento de texto, la que te dio después de subir la imagen a blog”).
después de la dirección deberás de poner el código no-repeat left top; para que tu imagen no se repita;
Width: el cual te aparece con 660px, yo lo cambie por 990 por que mi imagen abarca casi todo el ancho de la pagina
Margin: se deja como esta
Border: borras los valores y escribe none
de tal manera que te quede así:

  1. @media all {
  2. #header {
  3. background: url("http://photos1.blogger.com/blogger/4423/3254/1600/Iacosworldbueno.jpg")
  4. no-repeat left top;
  5. width:990px;
  6. margin:0 auto 10px;
  7. border:none
  8. }

3.- lo siguiente en la plantilla a modificar :
código original:

  1. #blog-title {
  2. margin:5px 5px 0;
  3. padding:20px 20px .25em;
  4. border:1px solid #222;
  5. border-width:1px 1px 0;
  6. font-size:200%;
  7. line-height:1.2em;
  8. color:#ccc;
  9. text-transform:uppercase;
  10. letter-spacing:.2em;
  11. }

Modificar: Padding:20px 20px 20px 20px; esto es para que nos quede centrada
border:none para eliminar el borde
font-size: 0% para eliminar las letras del titulo de tal manera que quede así:

  1. #blog-title {
  2. margin:5px 5px 0;
  3. padding:20px 20px 20px 20px;
  4. border:none
  5. border-width:1px 1px 0;
  6. font-size:0%;
  7. line-height:1.2em;
  8. color:#ccc;
  9. text-transform:uppercase;
  10. letter-spacing:.2em;
  11. }

4.- la ultima parte a modificar es:

  1. #description {
  2. margin:0 5px 5px;
  3. padding:0 20px 20px;
  4. border:1px solid #222;
  5. border-width:0 1px 1px;
  6. font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  7. text-transform:uppercase;
  8. letter-spacing:.2em;
  9. color:#777;
  10. }

aqui cambiar
Padding: por 0 0 90 (en vez de noventa puede ser más con esto ajustamos el alto de la imagen)
Border: none
font: 0% para que nos quede así

  1. #description {
  2. margin:0 5px 5px;
  3. padding:0 0 90px;
  4. border:none
  5. border-width:0 1px 1px;
  6. font:0% "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  7. text-transform:uppercase;
  8. letter-spacing:.2em;
  9. color:#777;
  10. }

y eso seria todo lo que debemos de hacer para cambiar el header del blog original por una imagen , solo me resta decirte que la imagen que subas si la quieres del ancho de la pagina (aprox) deberá de medir 992 * 172 píxeles, checa que el ancho de la imagen esta directamente relacionado con el Width de #header para que con tu imagen hagas los ajustes necesarios.

Espero haberles ayudado ,Suerte.

Menu en tu blog, Classic-Blogger

Bueno en realidad exactamente no es un menu de secciones de tu blog, pero creo que es lo mas parecído que se puede hacer, jejeje
Tampoco se si esto funciona en cualquier típo de blog o templates, pero a mi me sirvió… por eso ante la duda guarden el template o plantilla en un archivo de texto, cosa que si se llegaran a equivocar lo reemplazan con el guardado.

Para empezar, si quieren agregar una “seccion” de música, o de lo que ustedes quieran, creen otro blog como por ejemplo mi blog central es www.inside-jon.blogspot.com (vistenlo si tienen tiempo), y quise poner una seccion de música dentro de mi blog (el blog central), entonces cree otro blog más, al cual titule musicology-jon.blogspot.com, pero ustedes pueden hacer el que quieran de acuerdo a la seccion que quieran hacer.

Bueno después de haber echo el nuevo blog, que usarán como una especie de sección, diriganse al escritorio, clikeando en volver al escritorio, y tienen que ir a su blog central, al que le van a agregar las secciones, en mi caso INSIDE-JON.
Busco la solapa plantilla y justo arriba de la etiqueta </style> de su blog que esta al principio, copian y pegan este codigo:

  1. .hovermenu ul{
  2. font: bold 13px arial;
  3. padding-left: 0;
  4. margin-left: 0;
  5. height: 20px;
  6. }
  7. .hovermenu ul li{
  8. list-style: none;
  9. display: inline;
  10. }
  11. .hovermenu ul li a{
  12. padding: 2px 0.5em;
  13. text-decoration: none;
  14. float: left;
  15. color: black;
  16. background-color: #FFF2BF;
  17. border: 2px solid #FFF2BF;
  18. }
  19. .hovermenu ul li a:hover{
  20. background-color: #FFE271;
  21. border-style: outset;
  22. }

Bueno una ves pegado el codigo arriba de la etiqueta </style>, busquen la etiqueta <body> y debajo pegan este código: (NO COPIAR LO QUE ESTA ENTRE PARENTESIS SON SOLO ACLARACIONES MIAS)

  1. <div class="hovermenu">
  2. <ul>
  3. <li><a href="http://Y-LA-DIRECCION-DEL-BLOG-NUEVO">NOMBRE DE LA SECCION</a></li> <!--(para abrir una ventana dentro de la misma ventana) -->
  4. <li><a href="http://Y-LA-DIRECCION-DEL-BLOG-NUEVO" target="_blank">NOMBRE DE LA SECCION</a></li> <!-- (para una nueva ventana) -->
  5. </ul>
  6. </div>

Bueno el menú de secciones aparecera arriba del título, no se como se hace para ponerlo en otro lado, jejeje.
sugerencias:
Para que parezca que todo esta dentro de un mismo blog, copiar el templates del blog central y pegarlo en la plantilla del blog nuevo y cambien solamente el segundo codigo debajo de <body> por la direccion del blog central y el nombre que quieran ponerle a la seccion. Por ejemplo, HOME para “volver” al blog principal. (ATENCIÓN!!!, AL COPIAR EL FORMATO DEL BLOG CENTRAL AL BLOG QUE CREARON, LOS POST SIGUEN SIENDO LOS MISMOS, SOLO CAMBIAN LA ESTETICA Y LA ORGANIZACION DEL MISMO, PERO CUALQUIER MODIFICACIÓN SIEMPRE COPIAR ANTES EN UN ARCHIVO DE TEXTO LA PLANTILLA, PARA NO COMETER ERRORES QUE DESPUÉS NO PODREMOS ARREGLAR…)

Alan, disculpa que haya guardado(Patricia Ramirez) tu post como borrador primero, lo que pasa es que por alguna razon tu post, provocaba que la imagen del titulo se desplazara y quedara un trozo en blanco…
Pero ya descubri por que…es de lo mas raro bastaba con poner la etiqueta body como debe ser en el textarea, y todo colapsaba, por eso ahora la puse sin PLOPPPPP….EXIJO UNA EXPLICACION…JAJAJAJJA
Lo otro, cuando publiques codigos fijate bien en los parentesis son super importantes…Al codigo que tenias antes le faltaban varios parentesis, que por cierto dejan la mansa @#$@#%$ cuando cambias las plantillas…Asi que pon mas cuidado en eso…
Esta parte la agregue yo (Patricia Ramirez), para que vean cual es el resultado de esto: En realidad todo esto, no es mas que otra manera de agregar links a otro blog de uno mismo…la diferencia esta en que ahora se agregan botones como pueden ver en la imagen…
(En vez de pegar el segundo codigo debajo de body lo pegue debajo de <$BlogDescription$> a mi parecer se ve mas bonito… :), de la otra forma se desplaza la imagen y aparecen espacios en blanco…al menos en mi plantilla…

menu_blog.jpg

justo debajo de la imagen pueden ver que aparecen dos rectangulos en los que se linkea a las otras secciones..

Leer Mas!!! Parte 2 Classic Blogger

Si nunca te funcionó el Leer Mas!!! o Continua Leyendo descarga de aquí la plantilla que utilizas, con los cambios ya realizados (es un archivo de word, adentro esta destacado con letras rojas los códigos añadidos, parar que veas que error cometiste, o en que difieren).

Por ahora estan las plantillas: Dots, Dots Dark, Minima, Minima Black, Minima Blue, Minima Ochre, Nº897, Nº565 Harbor, Rounders, Rounders 2, Rounders 3, Rounders 4, Scribe, Snapshot, Snapshot Sable, Snapshot Tequila, Ms. Moto, Mr. Moto, Son of Moto, Thisaway, Thisaway Blue, Thisaway Green, Thisaway Rose, TicTac, TicTac Blue, Tekka, Jellyfish, Simple II, Herbert y Sand Dollar…Como pueden ver YA ESTAN TODAS!!!!! las plantillas que ofrece Blogger….Que tengan un buen fin de semana!!!!!

Compara esta plantilla con los cambios que hiciste en la tuya.
Si este es tu primer cambio en la plantilla, entonces puedes seleccionar todo el texto del archivo y copiarlo en tu plantilla. PERO, si ya hiciste cambios antes, como agregar links y otras cosas, entonces, no la reemplaces, solo revisa en que te equivocaste..

Ya esta comprobado como puedes ver en las imágenes de abajo, el Leer Mas!! aparece solo cuando uno lo desea, es decir, cuando agregamos el comando “span fullpost” dentro del post que es demasiado largo y que queremos linkear..
Por ahora estan estas (las de la primera columna), en la noche agregaré el resto.
Acuerdate de agregar en cada post la parte que quieres ocultar dentro del comando:

  1. LA PARTE QUE QUIERES QUE SE VEA
  2. <span class="fullpost">
  3. LA PARTE QUE QUIERES OCULTAR
  4. </span>

Al pinchar sobre las imagenes no se despliegan es su tamaño original, acuerdate de pinchar sobre el cuadradito que aparece abajo a mano derecha para poder ver las imagenes nitidamente, como lo muestra la siguiente figura:

Resultado:
DESCARGA AQUI: Plantilla DOTS

Continue reading Leer Mas!!! Parte 2 Classic Blogger

Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.