Cómo agregar una tercera columna a un blog

  • Autor Autor klk3
  • Fecha de inicio Fecha de inicio
K

klk3

Iota
Verificación en dos pasos activada
Hola, he empezado a desarrollar un sitio para que quien quiera pueda crearse un blog en mi host, tiene la opcion para seleccionar la plantilla que uno quiera, me vienen unas de modelo y yo estoy desarrollando otras, la mayoria son de dos columnas, ¿como puedo añadir una tercera? Este es el codigo de plantilla clasica con dos columnas:


<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=ISO-8859-1'>
<title><%WindowTitle%></title>
<style type='text/css'>

body {
margin: 0px;
background: #222222;
text-align: center;
color: #DDDDDD;
font-family: Georgia, verdana, arial, serif;
}

td {
text-align: left;
color: #DDDDDD;
font-family: "Trebuchet MS", verdana, arial, serif;
}


td.title {
height: 230px;
width: 700px;
padding: 10px;
background-image: url(./images/templates/aphid_title.jpg);
border: 3px solid #666666;
border-top: none;
vertical-align: bottom;

}

td.leftside {
background-image: url(./images/templates/aphid_bg.gif);
background-repeat: repeat-x;
padding: 10px;
border: 3px solid #666666;
border-top: none;
border-right: none;
font-size: 8pt;
line-height: 20px;
}

td.rightside {
background-image: url(./images/templates/aphid_bg.gif);
background-repeat: repeat-x;
padding: 10px;
border: 3px solid #666666;
border-top: none;
font-size: 8pt;
line-height: 20px;
}

h1 {
margin: 0px;
font-size: 24pt;
color: #EEEEEE;
font-weight: bold;
font-family: "Trebuchet MS", verdana, arial, serif;
}

h2 {
margin-top: 0px;
margin-bottom: 0px;
font-size: 12pt;
color: #FFFFFF;
font-weight: bold;
font-family: "Trebuchet MS", verdana, arial, serif;
}

div.avatar {
width: 20px;
border: 1px solid #555555;
padding: 5px;
margin-bottom: 10px;
margin-top: 3px;
}

div.timedate {
margin-bottom: 5px;
}

a:link { color: #C8EBB8; text-decoration: none; }
a:visited { color: #C8EBB8; text-decoration: none; }
a:hover { color: #EEEEEE; text-decoration: underline; }

a.menu:link { color: #C8EBB8; text-decoration: none; }
a.menu:visited { color: #C8EBB8; text-decoration: none; }
a.menu:hover { color: #EEEEEE; text-decoration: underline; font-weight: bold; }

table.calendar { border: 0; background-color: #222222; }
table.calendar th { height: 10px; font-size: 7pt; text-align: center; border: 0px; }
table.calendar td { width: 19px; height: 10px; font-size: 8pt; text-align: center; border: 0px; }
table.calendar .calendar-month { font-weight: bold; margin-top: 3px; font-size: 10pt; text-align: center; }
table.calendar .calendar-month a { text-decoration: none; }
table.calendar .calendar-prev { font-weight: normal; }
table.calendar .calendar-next { font-weight: normal; }
table.calendar td.linked-day { font-weight: bold; background-color: #222222; }
table.calendar td.linked-day a { text-decoration: none; }
table.prevnext { width: 100%; margin-top: .3em; }
table.prevnext td { font-size: smaller; }
table.prevnext td a { text-decoration: none; }

form { margin: 0px; }
td.form { border: 1px solid #DDDDDD; padding: 15px; vertical-align: top; line-height: 13pt; }
table.form { border: 1px solid #DDDDDD; border-left: none; border-bottom: none; }
td.form1 { border-bottom: 1px solid #DDDDDD; border-left: 4px solid #DDDDDD; padding: 13px; padding-top: 16px; font-weight: bold; vertical-align: top; }
td.form1error { border-bottom: 1px solid #DDDDDD; border-left: 4px solid #FF0000; padding: 13px; padding-top: 16px; font-weight: bold; vertical-align: top; }
td.form2 { border-bottom: 1px solid #DDDDDD; padding: 13px; vertical-align: top; }
div.help { color: #666666; padding-top: 3px; font-weight: normal; }
font.code { font-family: arial, tahoma, sans-serif; font-size: 8pt; font-weight: bold; }
font.error { color: #FF0000; }
font.success { color: #5B8C29; font-weight: bold; }
img.error { vertical-align: middle; }
img.success { vertical-align: middle; }

input.button { background: #DDDDDD; color: #444444; font-size: 8pt; padding: 3px; font-weight: bold; font-family: verdana, arial, tahoma; }
input.sbutton { background-color: #DDDDDD; font-size: 8pt; font-weight: bold; font-family: verdana, arial, tahoma; }
input.text { font-family: arial, verdana, tahoma, sans-serif; padding-left: 2px; }
textarea, select { font-family: arial, verdana, tahoma; margin-top: 1px; font-size: 10pt; }
select.small { font-size: 8pt; margin-left: 4px; }
input.status { border: none; background: clear; padding-left: 8px; font-size: 8pt; font-weight: bold; font-family: verdana, arial, tahoma; }

div.album_viewpic1 { text-align: center; padding-top: 20px; }
div.albumpic { float: left; border: 1px solid #AAAAAA; padding: 5px; margin-right: 10px; margin-bottom: 10px; width: 200px; height: 200px; background-image: url(./images/album_bg.gif); background-repeat: no-repeat; vertical-align: middle; text-align: center; }
td.album_viewpic2 { border: 1px solid #AAAAAA; padding: 20px; }

</style>
</head>
<body>

<table width='700' cellpadding='0' cellspacing='0'>
<tr><td class='title' colspan='2'><h1><%Title%> </h1></td></tr>
<tr>
<td class='leftside' width='550' valign='top'>
<!-- BEGIN LEFT SIDE -->



<!-- ARCHIVE PAGE -->
<IfArchivePage>
<h2>Archives</h2>
<%ArchiveInfo%>
</IfArchivePage>


<!-- Post Comment -->
<IfPostCommentPage>
<%PostCommentPage%>
</IfPostCommentPage>

<!-- Photo Album -->
<IfPhotoAlbumPage>
<%PhotoAlbumPage%>
</IfPhotoAlbumPage>

<!-- Profile Page -->
<IfProfilePage>
<%ProfilePage%>
</IfProfilePage>


<!-- MAIN PAGE --->
<IfMainPage>
<Entry>

<h2><%EntryTitle%></h2>
<div class='timedate'>
{ <b><%EntryTime%>, <%EntryDate%></b> }
<IfCategoriesAllowed>{ Posted in <%EntryCategory%> } </IfCategoriesAllowed>
<IfCommentsAllowed>{ <a href='<%EntryURL%>'><%EntryCommentCount%> comments</a> } </IfCommentsAllowed>
<IfTrackbacksAllowed>{ <a href='<%EntryURL%>'><%TrackbackCount%> trackbacks</a> } </IfTrackbacksAllowed>
{ <a href='<%EntryURL%>'>Link</a> }
</div>
<%EntryBody%>
<br><br>

</Entry>
</IfMainPage>





<!-- ENTRY PAGE -->
<IfEntryPage>
<Entry>

<h2><%EntryTitle%></h2>
<div class='timedate'>
{ <b><%EntryTime%>, <%EntryDate%></b> }
<IfCategoriesAllowed>{ Posted in <%EntryCategory%> } </IfCategoriesAllowed>
<IfCommentsAllowed>{ <a href='<%EntryURL%>'><%EntryCommentCount%> comments</a> } </IfCommentsAllowed>
<IfTrackbacksAllowed>{ <a href='<%EntryURL%>'><%TrackbackCount%> trackbacks</a> } </IfTrackbacksAllowed>
{ <a href='<%EntryURL%>'>Link</a> }
</div>
<%EntryBody%>
<br>

<IfCommentsAllowed><IfCommentPostAllowed>{ <a href='<%CommentPostURL%>'>Post a Comment</a> } </IfCommentPostAllowed></IfCommentsAllowed><IfTrackbacksAllowed>{ <a href='<%EntryTrackbackURL%>'>Trackback</a> } <%TrackbackRDF%></IfTrackbacksAllowed>
<br><br>

<blockquote>
<IfCommentsAllowed>
<Comment>
<h2><%CommentTitle%></h2>
<div class='timedate'>
{ <b><%CommentTime%>, <%CommentDate%></b> }
{ Posted by <%CommentAuthor%> }
<CommentEdit>{ Edit }</CommentEdit>
<CommentDelete>{ Delete }</CommentDelete>
</div>
<%CommentBody%>
<br><br>
</Comment>
</IfCommentsAllowed>

<IfTrackbacksAllowed>
<Trackback>
<h2><%TrackbackTitle%></h2>
<div class='timedate'>
{ <b><%TrackbackTime%>, <%TrackbackDate%></b> }
{ Posted in <a href='<%EntryTrackbackURL%>'><%TrackbackBlogName%></a> }
<TrackbackDelete>{ Delete }</TrackbackDelete>
</div>
<%TrackbackExcerpt%>
<br><br>
</Trackback>
</IfTrackbacksAllowed>
</blockquote>

</Entry>
</IfEntryPage>



<!-- FRIENDS PAGE -->
<IfFriendsPage>
<Entry>

<h2><%EntryTitle%></h2>
<div class='timedate'>
{ Posted by <a href='<%EntryAuthorURL%>'><%EntryAuthor%></a> }<br>
{ <b><%EntryTime%>, <%EntryDate%></b> }
<IfCategoriesAllowed>{ Posted in <%EntryCategory%> } </IfCategoriesAllowed>
<IfCommentsAllowed>{ <a href='<%EntryURL%>'><%EntryCommentCount%> comments</a> } </IfCommentsAllowed>
<IfTrackbacksAllowed>{ <a href='<%EntryURL%>'><%TrackbackCount%> trackbacks</a> } </IfTrackbacksAllowed>
{ <a href='<%EntryURL%>'>Link</a> }
</div>
<%EntryBody%>
<br><br>

</Entry>
</IfFriendsPage>




<IfPages>{ <LaterLink>Last Page</LaterLink> } { Page <%CurrentPage%> of <%TotalPages%> } { <EarlierLink>Next Page</EarlierLink> }</IfPages>

<!-- END LEFT SIDE -->
</td>
<td class='rightside' width='150' valign='top'>
<!-- BEGIN RIGHT SIDE -->

<h2>Sobre mi</h2>
<div class='avatar'><img src='<%Avatar%>' border='0'></div>

<a class='menu' href='<%MainPageURL%>'>Home</a><br>
<a class='menu' href='<%ProfileURL%>'>Mi perfil</a><br>
<a class='menu' href='<%ArchiveURL%>'>Archivos</a><br>
<a class='menu' href='<%FriendsPageURL%>'>Amigos</a><br>
<a class='menu' href='<%AlbumURL%>'>Mi album de fotos</a><br>


<br>
<%Calendar%>
<br>


<h2>Links</h2>
<Link><a href='<%LinkURL%>'><%LinkTitle%></a><br></Link>

<br>

<h2>Categorias</h2>
<Categories><a href='<%CategoryURL%>'><%Category%></a><br></Categories>

<br>

<h2>Entradas recientes</h2>
<RecentEntry><%RecentEntryTitle%><br></RecentEntry>

<br>

<h2>Amigos</h2>
<Friends><a href='<%FriendURL%>'><%FriendUsername%></a><br></Friends>

<!-- END RIGHT SIDE -->
</td>
</tr>
</table>


</body>
</html>
Hacer clic para expandir...

Lo que quiero es añadir una tercera columna
 
Ummm no recuerdo bien como es, pero puedes verlo tu mismo en un theme que tenga tres columnas, bajate el theme mystique.. ese theme se puede configurar para ver en1, 2 o 3 columnas o sin ninguna.

A ese theme le hechas un ojo al código fuente y a los css y te ayudara bastante.. ademas se puede cambiar la posición de los sidebars... para mi es la mejor opción si nadie te ayuda.

Espero te sirva --> WordPress › Mystique « Free WordPress Themes
 
crea un sidebar2.php y se lo mete con un include, ten en cuenta dejar el ancho suficiente para que quepa, sino te aparecerá debajo del todo.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

RandomThemes
FilMoves ! Clone ! Blogger Template !Abandono!
Respuestas
6
Visitas
886
RandomThemes
RandomThemes
jcduranm
Tutorial: Formulario de contacto flotante de WhatsApp
Respuestas
1
Visitas
219
elnazadsm
elnazadsm
E
problema con position:fixed
Respuestas
3
Visitas
341
eic2010
E
Digitalplus
Problemas para reproducir videos en mi página
Respuestas
10
Visitas
428
enmanuel0309
enmanuel0309
T
Tutorial: Cómo agregar una tabla de contenido en tus entradas de Blogger
Respuestas
10
Visitas
2K
Knowledgemd
K
Atrás
Arriba