Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje07-05-2010, 18:32 (UTC)    
Título del mensaje: Adaptar plantilla de Blogger a PWG

Hola!
Traigo este tutorial sobre cómo adaptar plantillas de Blogger a PWG. Es importante tener una cuenta en Blogger.

1. Buscaremos nuestra plantilla de blogger entrando en btemplates. Yo he elegido esta: www.btemplates.com/2009/04/22/fusion/

2. Una vez descargada y descomprimida la plantilla, entraremos en nuestro blog con la cuenta que tenemos de google a través de blogger.

3. Aparecera el Escritorio. Pondremos "Diseño" y luego a "Edición de HTML"





4. Subiremos el diseño que descargamos, presionando en Examinar y luego subir. Deben buscar, dentro de la carpeta descomprimida, el archivo con el nombre de la plantilla. Es del tipo XML.



5. Ahora debemos eliminar los widgets que vienen con la plantilla ya que muchos de ellos sólo funcionan en Blogger. Para ello iremos a "Elementos de la página".



En el caso de este diseño eliminare los 3 widgets del menu horizontal y debemos agregar una o más listas de links que serían los menús verticales de nuestra plantilla. Quedaría asi:



6. Ahora vamos a nuestro blog. Nos fijamos conque palabras comienza el contenido y con cuales finaliza. Luego buscamos el código de fuente.
Para acceder al código de fuente sigan esto: Ver/Código de fuente la página
Se encuentra en la barra de menús.

7. Separaremos los códigos necesarios empesando con el "CSS-Code sin Style Tags". Este siempre comienza con la siguiente línea:

Código:
<style id='page-skin-1' type='text/css'><!--


Comienzo del "Css-Code sin Style Tags":


Lo destacado con celeste se puede eliminar.


Terminación del "Css-Code":

El "CSS-Code" siempre termina con esta línea:
Código:
--></style>




En la imgen esta en color amarillo la terminación del CSS-Code y en rojo el comiendo del "Texto por encima de la página" <---- Como todavía no llegamos a este código sólo ignoren lo que dije.
Hay que eliminar lo que esta entre medio de lo resaltado en amarillo y lo resaltado en rojo, osea esto:
Código:
--></style>


Después agregamos el siguiente código al CSS-code:
Código:
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}


8. Pasemos al "Texto por encima de la página". Este esta compuesto de la siguiente forma.
El "Texto por encima de la página" comienza donde finaliza el Css-Code:


Lo rojo sería el comienzo del "Texto por encima de la página". Lo amarillo sería el Css-Code.

El "Texto por encima de la página" termina donde empieza el contenido de la página.


Lo amarillo sería la terminación del "Texto por encima de la página", lo que esta sin resaltar sería el contenido el cuan NO debe ir en el diseño y lo rojo sería el principio del "Texto por debajo de la página" <---- No deben prestarle importancia todavía a esto porque no llegamos.

Luego eliminamos el siguiente iframe:

Lo muestro completamente:
Código:
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=7001538704882346217&amp;blogName=Kilometro6+Pruebas&amp;publishMode=PUBLISH_MODE_BLOGSPOT&amp;navbarType=BLUE&amp;layoutType=LAYOUTS&amp;searchRoot=http%3A%2F%2Fkilometro6-pruebas.blogspot.com%2Fsearch&amp;blogLocale=es&amp;homepageUrl=http%3A%2F%2Fkilometro6-pruebas.blogspot.com%2F" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" allowtransparency="true" title="Blogger Navigation and Search"></iframe>



9. El último código, el "Texto por debajo de la página" esta compuesto de la siguiente forma.


Comienza donde finaliza el contenido:


Lo amarillo sería la terminación del "Texto por encima de la página", lo que esta sin resaltar sería el contenido el cual NO debe ir en el diseño y lo rojo sería el principio del "Texto por debajo de la página"


El "Texto por debajo de la página" termina al finalizar el código de la plantilla:


Lo destacado con azul se puede eliminar.

10. Ahora tenemos que eliminar las imágenes de adminsitración del diseño. ¿Qué son estas imágenes? Estas imágenes son las utilizadas por los admins de los Blogs para editar sus entradas y widgets.

El fomato de las imágenes de administración siempre es así:


Y para que la imagen de administración desaparezca deben eliminar lo destacado con color.

Espero que les sirva.
Saludos!
______________


Ultima edición por kilometro6 el Mar Sep 14, 2010 8:19 pm; editado 14 veces
Mensaje07-05-2010, 18:57 (UTC)    
Título del mensaje:

10|12
______________
Su firma exede el tamaño permitido de 450x100px.
por eso fue removida. CP
Mensaje08-05-2010, 23:50 (UTC)    
Título del mensaje:

makewebpage escribió:
10|12


No me fue tan mal como esperaba jeje.
______________
Mensaje08-05-2010, 23:55 (UTC)    
Título del mensaje:

kilometro6 escribió:
makewebpage escribió:
10|12


No me fue tan mal como esperaba jeje.


no te fue nada mal que bueno que regresaste al foro fuiste unos de mis modelos a seguir en 2008 pero creo que ya te supere o te iguale
______________
Su firma exede el tamaño permitido de 450x100px.
por eso fue removida. CP
Mensaje09-05-2010, 00:38 (UTC)    
Título del mensaje:

Ya había visto este tutorial tuyo en el foro de Tokarg jeje, muy bueno un aplauso para ti, saludos.
______________
Estoy al borde de la gloria, y estoy colgando de un momento de verdad,
estoy al borde la gloria Y estoy suspendida de un momento junto a tí

Mensaje09-05-2010, 00:51 (UTC)    
Título del mensaje:

mui weno
______________
/forosadas @forosadas
forosadas@hotmail.fr
"Tu mente es tu límite"
Mensaje09-05-2010, 01:03 (UTC)    
Título del mensaje:

Gracias por sus comentarios, me agrada saber que sirve de algo mi tutorial.
makewebpage nunca pense que yo podía ser un modelo a seguir, me sorprendio mucho. Si, volvi después de un tiempo. Lo que paso es que me fui a jugar al mu pero ya se me paso el vicio y regrese.

Saludos!
______________
Mensaje09-05-2010, 01:04 (UTC)    
Título del mensaje: hola

muy bueno para los usuarios kilometro 6 exelente io ya savia xD [ero es bueno para los que les falla un poco adaptar esas plantillas
______________
Mensaje09-05-2010, 01:16 (UTC)    
Título del mensaje:

Gracias. Me parecio extraño que lo halla ni 1 sólo tutorial sobre esto en el foro así que puse manos a la obra y lo hice. Me alegro de que me halla quedado bien.
______________
Mensaje09-05-2010, 02:07 (UTC)    
Título del mensaje:

nunca he entendido bien esto pero esto no es li mismo en ningun lado, si hay un diseño con div's diferentes que?? lo novaTOS SE VAN A QUEDAR BUSCADO EL NOMBRE DE UN DIV?????, la verdad esto no es un bueno tutorial, la verdad n7unca he visto uno que explique perfectamente como van los divs el nombre, por que empieza ahi el contenido, etc :S

lña verdad estoy confundido de si es ayuda o es confusion
______________
PWG me vio nacer en desarrollo web, ahora estoy estudiando programacion en la universidad gracias a ti, GRACIAS PWG!
Mensaje09-05-2010, 02:20 (UTC)    
Título del mensaje:

En la mayoría de los diseños el contenido empiesa así. Además, con la experiencia uno va aprendiendo y se da cuenta que los diseños son diferentes y logra encontrar en donde separar los códigos. Este es un tutorial digamos base, es para tener una idea de como adaptar diseños.
______________
Mensaje30-05-2010, 13:33 (UTC)    
Título del mensaje: pues a mi me ayudo mucho!

hola soy soupertelly o recursoswm o super css o como sea jejej solo te quiero decir q este fue el tutorial q me enseno a adpatr solo quiero decir gracias!
Mensaje12-07-2010, 17:54 (UTC)    
Título del mensaje:

esta mal en blogger las plantillas enpiezan con

Código:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[


Y no aparese lo que usted dise
Mensaje12-07-2010, 18:09 (UTC)    
Título del mensaje:

muy bueno gracias 10/10
______________


Mira el mural de los tallerista de pwg. VER
Mensaje12-07-2010, 20:08 (UTC)    
Título del mensaje:

webtaller2 escribió:
esta mal en blogger las plantillas enpiezan con

Código:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[


Y no aparese lo que usted dise


No todas las plantillas de Blogger empiezan exactamente igual. Puede variar.

Gracias nybet por tu comentario, me alegra que te halla servido.
______________
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group