Mostrar entradas
miércoles, 26 de diciembre de 2007
miércoles, 19 de diciembre de 2007
[+/-] |
Expandir/Contraer |
Texto que se muestra o se oculta
Para hacer un menú de expandir y contraer, el cual el texto se muestre o se oculte, iremos a nuestra plantilla y buscaremos la etiqueta -/head-, y justo antes insertaremos el siguiente código:
<script src='http://blogdecesar.googlepages.com/switchcontent.js' type='text/javascript'/>
<script src='http://blogdecesar.googlepages.com/switchicon.js' type='text/javascript'>
</script>
<style type='text/css'>
.iconspan{
float: right;
margin: 3px;
cursor:hand;
cursor:pointer;
font-weight: bold;
}
/*Aca color de fondo, letra y bordes: */
.eg-bar{
background-color: #C3000D;
color: #FFFF99;
font-weight: bold;
border-top: 2px solid #FDCD09;;
border-left: 2px solid #430802;;
border-right: 2px solid #430802;;
padding: 3px;
}
</style>
el siguiente paso es ir a añadir un elemento de página -HTML-Javascript-e insertar este otro código. En este caso esto quedará visible en nuestra sidebar o barra lateral; en el caso que se quiera poner en un post, este último código tendría que ir a una entrada:
<table border="0" cellspacing="0" cellpadding="0" style="width: 400px;">
<tr><td class="eg-bar">
<span id="faqtable1-title" class="iconspan"><img src="http://godlike.cl/up/im/33/minus.gif"/></span>
TITULO
</td></tr>
<tr><td>
<div id="faqtable1" class="icongroup2">
CONTENIDO
<tr><td class="eg-bar">
<span id="faqtable2-title" class="iconspan"><img src="http://godlike.cl/up/im/33/minus.gif"/></span>
TITULO
</td></tr>
<tr><td>
<div id="faqtable2" class="icongroup2">
CONTENIDO
</div></td></tr>
<tr><td class="eg-bar">
<span id="faqtable3-title" class="iconspan"><img src="http://godlike.cl/up/im/33/minus.gif"/></span>
TITULO
</td></tr>
<tr><td>
<div id="faqtable3" class="icongroup2">
CONTENIDO
</div></td></tr>
</table>
<script type="text/javascript">
var faqtable=new switchicon("icongroup2", "div") //Limit scanning of switch contents to just "div" elements
faqtable.setHeader('<img src="http://godlike.cl/up/im/33/minus.gif"/>', '<img src="http://godlike.cl/up/im/33/plus.gif"/>')
faqtable.collapsePrevious(false)
faqtable.setPersist(true, 7)
faqtable.init()
</script>
martes, 18 de diciembre de 2007
[+/-] |
Subrayar un link al pasar el mouse |
Para obtener el efecto de subrayas un link al pasar el mouse, sólo tendremos que insertar este código en nuestro sidebar, añadiendo en un elemento de pagina,sección HTML-Javascript.
El texto que quieras.
otro texto.
Otro texto.
Código:
<STYLE type="text/css">
<!--
A:link {COLOR: red; TEXT-DECORATION: none}
A:visited {COLOR: gray; TEXT-DECORATION: none}
A:active {TEXT-DECORATION: none}
A:hover {COLOR: blue; TEXT-DECORATION: underline} -->
</STYLE>
</p>
<p><a href="l1.htm">El texto que quieras.</a><br>
<a href="l2.htm">otro texto.</a><br>
<a href="l3.htm">Otro texto.</a><br>
</p>
[+/-] |
Etiquetas en desplegable |
Para mostrar en un desplegable etiquetas o archivos o simplemente -links-, o cualquier otra cosa que se nos ocurra y que no queramos ocupe mucho espacio, nada mejor que los desplegables ya que es un ahorro considerable de espacio.Para ello solamente tendremos que aplicar este código en añadir elemento de página sección HTML Javascript:
<select class="combobox" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="SiteMap"><option>Texto inicial</option><option value="url-de-la-pagina">texto visible</option><option value="url-de-la-pagina">texto visible</option></select>
Ahora sólo tendremos que poner donde dice URL, la dirección de la etiqueta donde queramos situarnos, para ello copiaremos la dirección del archivo o de la etiqueta.
[+/-] |
Imagen de fondo en los post |
Para modificar la imagen de fondo en las entradas o post añadiremos el siguiente código y esto hará que salga en todas las entradas.Nos situamos en plantilla edición HTML y buscamos este código:
.post-body {
clear: both;
padding-top: 10px;
}
una vez encontrado lo sustituimos por este otro:
.post-body {
background: url(url-de-la-imagen) top left;
clear: both;
padding-top: 10px;
}
Ahora bien si sólo queremos que el fondo del post aparezca sólamente en algunos,entonces aplicaremos este código solamente en las entradas que queramos:
<table background="url-de-la-imagen" border="0" bordercolor="#000000" cellpadding="0" cellspacing="0" height="100%" width="100%"><tbody><tr><td><p>texto-texto-texto-texto-texto</p><p></p></td></tr></tbody></table>
Solamente faltará añadir donde dice -URL-, poner el de nuestra imagen escogida.
domingo, 16 de diciembre de 2007
[+/-] |
Plantilla Gemstone |
Plantilla
Contenido
Les muestro el código de la plantilla o template "Gemstone",vista en la página de Ricardo Santos, que me ha parecido bastante interesante. Considero que aunque es de dos columnas tiene un diseño buenísimo y su mezcla de colores parece que queda muy bien y dá resultado.
A la vez yo la he intentado instalar y sustituir por la que tengo actualmente en este blog, pero me ha sido imposible ya que me da error "Algo así cómo que no se han cerrado el elemento raiz -HTML-. Lo digo por si alguien les gusta y quiere probar su aplicación a ver si tiene mejor suerte que yo y logra que funcione.
A continuación el código de la misma:
Código
Contenido
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html (View Source for full doctype...)>
- <html 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[ /*
-----------------------------------------------
Blogger Template Style
Name: GemStone
Designer: Erica Akira
URL: http://www.temas.burajiru.blog.br
Date: 07 Aug 2007
From theme by: Arcsin
URL: http://templates.arcsin.se/
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#999" value="#999999">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#0066CC">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#fff" value="#ffffff">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#fff" value="#ffffff">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#06c" value="#0066CC">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#fff" value="#ffffff">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#6131BD">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 80% Tahoma, Sans-Serif" value="normal normal 80% Tahoma, Sans-Serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 60% Verdana, Sans-serif" value="normal normal 60% Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal bold 86% Verdana, sans-serif">
*/
* {
margin: 0;
padding: 0;
}
body {
background:$bgcolor url('http://img413.imageshack.us/img413/7223/gembgzx4.gif') repeat-y;
font:$bodyfont;
padding-left: 25px;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
p {
margin-bottom: 1.2em;
}
ul {
margin: 0 0 10px 22px;
}
li {
list-style-image: url('http://img245.imageshack.us/img245/1557/gemliiv2.gif');
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:939px;
}
#header-inner {
background-position: center;
margin-left:auto;
margin-right: auto;
}
#header {
background: url('http://img340.imageshack.us/img340/5574/gemtopcb3.gif');
color:$pagetitlecolor;
height: 45px;
width: 939px;
}
#header h1 {
font: bold 2em sans-serif;
padding: 8px 16px 0;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:#e0e0e0;
}
#header .description {
color:$descriptioncolor;
font:$descriptionfont;
}
#header img {
margin-left: auto;
margin-right: auto;
}
.top-menu {
background:#000 url('http://img158.imageshack.us/img158/4682/headeryw6.gif');
height: 101px;
width: 939px;
}
/* menu */
#menu {
}
#menu ul {
float: left;
margin: 0 1px 0 0;
}
#menu li {
list-style-image: none;
}
#menu a {
background: #4B4B4B;
color: #DDD;
display: block;
font-family: sans-serif;
font-size: 85%;
padding: 5px 0 5px 8px;
text-decoration: none;
width: 180px;
}
#menu a#current {
background: #666; color: #FFF;
}
#menu a:hover {
background: #555; color: #FFF;
}
#menu li {
list-style-type: none;
margin: 0 0 1px 0;
padding: 0;
}
#menu .quickedit {
display:none}
#ads {
float: right;
margin: 0 1px 0 0;
width: 360px;
text-align: center;
}
#ads .quickedit {
display:none}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 100%;
margin:0 auto;
padding:0px;
text-align:left;
font-family: Tahoma,sans-serif;
font-size: 100%;
}
#main-wrapper {
}
/* left side */
#main {
margin: 1px;
width: 592px;
}
#sidebar-wrapper {
width: 331px;
position: absolute;
top: 146px;
left: 620px;
}
/* Headings
----------------------------------------------- */
h2 {
margin:0 0 .75em;
font: normal 85% Tahoma,sans-serif;
line-height: 1.4em;
text-transform:none;
letter-spacing:.2em;
color:#fff;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
background: #0070CD url('http://img411.imageshack.us/img411/493/gembgdatevb5.gif') repeat-x;
color: #FFF;
font-weight: bold;
padding: 10px;
}
.post {
background: #F0F0F0 url('http://img410.imageshack.us/img410/2001/gembgnewsitemcn8.png') repeat-x;
border: 1px solid #EEE;
border-color: #EEE #EEE #DDD #EEE;
clear: both;
color: #333;
line-height: 1.5;
margin: 6px 6px 6px 6px;
padding: 10px;
}
.post h3 {
color:$titlecolor;
font: bold 1.2em Tahoma,sans-serif;
padding: 3px 4px;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color: #0066CC;
font: bold 1.2em Tahoma,sans-serif;
padding: 3px 4px;
}
.post h3 strong, .post h3 a:hover {
color:#006677;
}
.post p {
font-family: "Trebuchet MS",Tahoma,sans-serif;
font-size: 0.9em;
text-align: justify;
}
.post-footer {
margin: .75em 0 ;
color:$bgcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
.comment-link {
margin-left:.6em;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:.5em 0 1.5em;
padding:10px;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0 0 0;
background:#F9F9F9;
border:1px solid #EEE;
border-color:#EEE #EEE #EEE #EEE;
}
#comments-block .comment-body {
margin:0;
padding:.5em 0;
background:#FCFCFC;
border:1px solid #EEE;
border-color:#EEE #EEE #DDD #EEE;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
background:#F9F9F9;
border:1px solid #EEE;
border-color:#EEE #EEE #DDD #EEE;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
/* Sidebar Content
----------------------------------------------- */
.links {
color: $sidebartextcolor;
line-height: 1.5em;
}
.links a {
background: url('http://img238.imageshack.us/img238/4086/gembgnavitemfn0.gif') repeat-x #FFF;
border-bottom: 1px solid #EEE;
display: block;
font: bold 0.8em Verdana,Tahoma,sans-serif;
padding: 6px 0 8px 8px;
text-decoration: none; color: #333;
}
.links a:hover {
color: #0080DD; background-position: left bottom;
}
.links div.line {
height: 1px; background-color: #EEEEF5;
}
.links h2 {
background: #333 url('http://img413.imageshack.us/img413/4925/gembgsubtitleqh2.gif') repeat-x;
color: #FFF;
font: normal 85% Tahoma,sans-serif;
padding: 5px 8px;
}
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar a {
background: url('http://img238.imageshack.us/img238/4086/gembgnavitemfn0.gif') repeat-x #FFF;
border-bottom: 1px solid #EEE;
font: bold 0.8em Verdana,Tahoma,sans-serif;
padding: 6px 0 8px 8px;
text-decoration: none; color: #333;
}
.sidebar a:hover {
color: #0080DD; background-position: left bottom;
}
.sidebar div.line {
height: 1px; background-color: #EEEEF5;
}
.sidebar h2 {
background: #333 url('http://img413.imageshack.us/img413/4925/gembgsubtitleqh2.gif') repeat-x;
color: #FFF;
font: normal 85% Tahoma,sans-serif;
padding: 5px 8px;
}
.sidebar .widget, .main .widget, .links .widget, {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
----------------------------------------------- */
.footer {
background: #F0F0F0 url('http://img411.imageshack.us/img411/493/gembgdatevb5.gif') repeat-x;
border: 1px solid #EEE;
color: #FFF;
margin-left: 6px;
width: 581px;
}
.footer a {
color: #FFF;
font: bold 1em "Trebuchet MS",sans-serif;
text-decoration: none;
}
.footer .copyright {
padding: 6px 12px;
}
.footer .left, .footer .right {padding: 0 6px;}
/* floats */
.left {float: left;}
.right {float: right;}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
width:750px}
body#layout #menu{
margin-left: 0px;
margin-right: 0px;
width:200px;
}
body#layout #ads {
margin-top:-110px;margin-left: 0px;
margin-right: 250px;
width:200px;
}
body#layout #main {
margin-top:30px;
margin-left: 0px;
margin-right: 0px;
width:400px
}
body#layout #links {
margin-left: 0px;
margin-right: 250px;
}
]]>
</b:skin>
</head>
- <body>
- <div id="outer-wrapper">
- <div id="wrap2">
- <!-- skip links for text browsers
-->
- <span id="skiplinks" style="display:none;">
<a href="#main" shape="rect">skip to main</a>
<a href="#sidebar" shape="rect">skip to sidebar</a>
</span>
- <div id="header-wrapper">
- <b:section class="header" id="header" maxwidgets="1" showaddelement="no">
- <b:widget id="Header1" locked="true" title="Gemstone Template (Cabeçalho)" type="Header">
- <b:includable id="main">
- <b:if cond="data:useImage">
- <b:if cond="data:imagePlacement == "REPLACE"">
- <!-- Show just the image, no text
-->
- <div id="header-inner">
- <a expr:href="data:blog.homepageUrl" style="display: block" shape="rect">
<img expr:alt="data:title" expr:height="data:height" expr:id="data:widget.instanceId + "_headerimg"" expr:src="data:sourceUrl" expr:width="data:width" style="display: block" />
</a>
</div>
<b:else />
- <!-- Show image as background to text
-->
- <div expr:style=""background-image: url(\"" + data:sourceUrl + "\"); " + "background-repeat: no-repeat; " + "width: " + data:width + "px; " + "height: " + data:height + "px;"" id="header-inner">
- <div class="titlewrapper" style="background: transparent">
- <h1 class="title" style="background: transparent; border-width: 0px">
- <b:if cond="data:blog.url == data:blog.homepageUrl">
<data:title />
<b:else />
- <a expr:href="data:blog.homepageUrl" shape="rect">
<data:title />
</a>
</b:if>
- <span class="description">
<data:description />
</span>
</h1>
</div>
</div>
</b:if>
<b:else />
- <!-- No header image
-->
- <div id="header-inner">
- <div class="titlewrapper">
- <h1 class="title">
- <b:if cond="data:blog.url == data:blog.homepageUrl">
<data:title />
<b:else />
- <a expr:href="data:blog.homepageUrl" shape="rect">
<data:title />
</a>
</b:if>
- <span class="description">
<data:description />
</span>
</h1>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
- <div class="top-menu">
- <b:section class="menu" id="menu" maxwidgets="3" showaddelement="yes">
- <b:widget id="LinkList3" locked="false" title="" type="LinkList">
- <b:includable id="main">
- <b:if cond="data:title">
- <h2>
<data:title />
</h2>
</b:if>
- <div class="widget-content">
- <ul>
- <b:loop values="data:links" var="link">
- <li>
- <a expr:href="data:link.target" shape="rect">
<data:link.name />
</a>
</li>
</b:loop>
</ul>
<b:include name="quickedit" />
</div>
</b:includable>
</b:widget>
- <b:widget id="LinkList2" locked="false" title="" type="LinkList">
- <b:includable id="main">
- <b:if cond="data:title">
- <h2>
<data:title />
</h2>
</b:if>
- <div class="widget-content">
- <ul>
- <b:loop values="data:links" var="link">
- <li>
- <a expr:href="data:link.target" shape="rect">
<data:link.name />
</a>
</li>
</b:loop>
</ul>
<b:include name="quickedit" />
</div>
</b:includable>
</b:widget>
- <b:widget id="LinkList1" locked="false" title="" type="LinkList">
- <b:includable id="main">
- <b:if cond="data:title">
- <h2>
<data:title />
</h2>
</b:if>
- <div class="widget-content">
- <ul>
- <b:loop values="data:links" var="link">
- <li>
- <a expr:href="data:link.target" shape="rect">
<data:link.name />
</a>
</li>
</b:loop>
</ul>
<b:include name="quickedit" />
</div>
</b:includable>
</b:widget>
</b:section>
- <b:section class="ads" id="ads" maxwidgets="1" showaddelement="yes">
- <b:widget id="AdSense1" locked="false" title="" type="AdSense">
- <b:includable id="main">
- <div class="widget-content">
<data:adCode />
</div>
</b:includable>
</b:widget>
</b:section>
</div>
- <div id="content-wrapper">
- <div id="crosscol-wrapper" style="text-align:center">
<b:section class="crosscol" id="crosscol" showaddelement="no" />
</div>
- <div id="main-wrapper">
- <b:section class="main" id="main" showaddelement="no">
- <b:widget id="Blog1" locked="true" title="Postagens no blog" type="Blog">
- <b:includable id="main" var="top">
- <!-- posts
-->
- <div class="blog-posts hfeed">
<b:include data="top" name="status-message" />
<data:adStart />
- <b:loop values="data:posts" var="post">
- <b:if cond="data:post.dateHeader">
- <h2 class="date-header">
<data:post.dateHeader />
</h2>
</b:if>
<b:include data="post" name="post" />
- <b:if cond="data:blog.pageType == "item"">
<b:include data="post" name="comments" />
</b:if>
</b:loop>
<data:adEnd />
</div>
- <!-- navigation
-->
<b:include name="nextprev" />
- <!-- feed links
-->
<b:include name="feedLinks" />
</b:includable>
- <b:includable id="nextprev">
- <div class="blog-pager" id="blog-pager">
- <b:if cond="data:newerPageUrl">
- <span id="blog-pager-newer-link">
- <a class="blog-pager-newer-link" expr:href="data:newerPageUrl" expr:id="data:widget.instanceId + "_blog-pager-newer-link"" expr:title="data:newerPageTitle" shape="rect">
<data:newerPageTitle />
</a>
</span>
</b:if>
- <b:if cond="data:olderPageUrl">
- <span id="blog-pager-older-link">
- <a class="blog-pager-older-link" expr:href="data:olderPageUrl" expr:id="data:widget.instanceId + "_blog-pager-older-link"" expr:title="data:olderPageTitle" shape="rect">
<data:olderPageTitle />
</a>
</span>
</b:if>
- <b:if cond="data:blog.homepageUrl != data:blog.url">
- <a class="home-link" expr:href="data:blog.homepageUrl" shape="rect">
<data:homeMsg />
</a>
<b:else />
- <b:if cond="data:newerPageUrl">
- <a class="home-link" expr:href="data:blog.homepageUrl" shape="rect">
<data:homeMsg />
</a>
</b:if>
</b:if>
</div>
<div class="clear" />
</b:includable>
- <b:includable id="post" var="post">
- <div class="post hentry uncustomized-post-template">
<a expr:name="data:post.id" shape="rect" />
- <b:if cond="data:post.title">
- <h3 class="post-title entry-title">
- <b:if cond="data:post.link">
- <a expr:href="data:post.link" shape="rect">
<data:post.title />
</a>
<b:else />
- <b:if cond="data:post.url">
- <a expr:href="data:post.url" shape="rect">
<data:post.title />
</a>
<b:else />
<data:post.title />
</b:if>
</b:if>
</h3>
</b:if>
<div class="post-header-line-1" />
- <div class="post-body entry-content">
- <p>
<data:post.body />
</p>
<div style="clear: both;" />
- <!-- clear for photos floats
-->
</div>
- <div class="post-footer">
- <p class="post-footer-line post-footer-line-1">
- <span class="post-author vcard">
- <b:if cond="data:top.showAuthor">
<data:top.authorLabel />
- <span class="fn">
<data:post.author />
</span>
</b:if>
</span>
- <span class="post-timestamp">
- <b:if cond="data:top.showTimestamp">
<data:top.timestampLabel />
- <b:if cond="data:post.url">
- <a class="timestamp-link" expr:href="data:post.url" rel="bookmark" title="permanent link" shape="rect">
- <abbr class="published" expr:title="data:post.timestampISO8601">
<data:post.timestamp />
</abbr>
</a>
</b:if>
</b:if>
</span>
- <span class="post-comment-link">
- <b:if cond="data:blog.pageType != "item"">
- <b:if cond="data:post.allowComments">
- <a class="comment-link" expr:href="data:post.addCommentUrl" expr:onclick="data:post.addCommentOnclick" shape="rect">
- <b:if cond="data:post.numComments == 1">
1
<data:top.commentLabel />
<b:else />
<data:post.numComments />
<data:top.commentLabelPlural />
</b:if>
</a>
</b:if>
</b:if>
</span>
- <!-- backlinks
-->
- <span class="post-backlinks post-comment-link">
- <b:if cond="data:blog.pageType != "item"">
- <b:if cond="data:post.showBacklinks">
- <a class="comment-link" expr:href="data:post.url + "#links"" shape="rect">
<data:top.backlinkLabel />
</a>
</b:if>
</b:if>
</span>
- <span class="post-icons">
- <!-- email post links
-->
- <b:if cond="data:post.emailPostUrl">
- <span class="item-action">
- <a expr:href="data:post.emailPostUrl" expr:title="data:top.emailPostMsg" shape="rect">
<span class="email-post-icon"> </span>
</a>
</span>
</b:if>
- <!-- quickedit pencil
-->
<b:include data="post" name="postQuickEdit" />
</span>
</p>
- <p class="post-footer-line post-footer-line-2">
- <span class="post-labels">
- <b:if cond="data:post.labels">
<data:postLabelsLabel />
- <b:loop values="data:post.labels" var="label">
- <a expr:href="data:label.url" rel="tag" shape="rect">
<data:label.name />
</a>
<b:if cond="data:label.isLast != "true"">,</b:if>
</b:loop>
</b:if>
</span>
</p>
<p class="post-footer-line post-footer-line-3" />
</div>
</div>
</b:includable>
- <b:includable id="postQuickEdit" var="post">
- <b:if cond="data:post.editUrl">
- <span expr:class=""item-control " + data:post.adminClass">
- <a expr:href="data:post.editUrl" expr:title="data:top.editPostMsg" shape="rect">
<span class="quick-edit-icon"> </span>
</a>
</span>
</b:if>
</b:includable>
- <b:includable id="commentDeleteIcon" var="comment">
- <span expr:class=""item-control " + data:comment.adminClass">
- <a expr:href="data:comment.deleteUrl" expr:title="data:top.deleteCommentMsg" shape="rect">
<span class="delete-comment-icon"> </span>
</a>
</span>
</b:includable>
- <b:includable id="backlinkDeleteIcon" var="backlink">
- <span expr:class=""item-control " + data:backlink.adminClass">
- <a expr:href="data:backlink.deleteUrl" expr:title="data:top.deleteBacklinkMsg" shape="rect">
<span class="delete-comment-icon"> </span>
</a>
</span>
</b:includable>
- <b:includable id="comments" var="post">
- <div class="comments" id="comments">
<a name="comments" shape="rect" />
- <b:if cond="data:post.allowComments">
- <h4>
- <b:if cond="data:post.numComments == 1">
1
<data:commentLabel />
:
<b:else />
<data:post.numComments />
<data:commentLabelPlural />
:
</b:if>
</h4>
- <dl id="comments-block">
- <b:loop values="data:post.comments" var="comment">
- <dt class="comment-author" expr:id=""comment-" + data:comment.id">
<a expr:name=""comment-" + data:comment.id" shape="rect" />
- <b:if cond="data:comment.authorUrl">
- <a expr:href="data:comment.authorUrl" rel="nofollow" shape="rect">
<data:comment.author />
</a>
<b:else />
<data:comment.author />
</b:if>
<data:commentPostedByMsg />
</dt>
- <dd class="comment-body">
- <b:if cond="data:comment.isDeleted">
- <span class="deleted-comment">
<data:comment.body />
</span>
<b:else />
- <p>
<data:comment.body />
</p>
</b:if>
</dd>
- <dd class="comment-footer">
- <span class="comment-timestamp">
- <a expr:href=""#comment-" + data:comment.id" title="comment permalink" shape="rect">
<data:comment.timestamp />
</a>
<b:include data="comment" name="commentDeleteIcon" />
</span>
</dd>
</b:loop>
</dl>
- <p class="comment-footer">
- <a expr:href="data:post.addCommentUrl" expr:onclick="data:post.addCommentOnclick" shape="rect">
<data:postCommentMsg />
</a>
</p>
</b:if>
- <div id="backlinks-container">
- <div expr:id="data:widget.instanceId + "_backlinks-container"">
- <b:if cond="data:post.showBacklinks">
<b:include data="post" name="backlinks" />
</b:if>
</div>
</div>
</div>
</b:includable>
- <b:includable id="backlinks" var="post">
<a name="links" shape="rect" />
- <h4>
<data:post.backlinksLabel />
</h4>
- <b:if cond="data:post.numBacklinks != 0">
- <dl class="comments-block" id="comments-block">
- <b:loop values="data:post.backlinks" var="backlink">
- <div class="collapsed-backlink backlink-control">
- <dt class="comment-title">
<span class="backlink-toggle-zippy"> </span>
- <a expr:href="data:backlink.url" rel="nofollow" shape="rect">
<data:backlink.title />
</a>
<b:include data="backlink" name="backlinkDeleteIcon" />
</dt>
- <dd class="comment-body collapseable">
<data:backlink.snippet />
</dd>
- <dd class="comment-footer collapseable">
- <span class="comment-author">
<data:post.authorLabel />
<data:backlink.author />
</span>
- <span class="comment-timestamp">
<data:post.timestampLabel />
<data:backlink.timestamp />
</span>
</dd>
</div>
</b:loop>
</dl>
</b:if>
- <p class="comment-footer">
- <a class="comment-link" expr:href="data:post.createLinkUrl" expr:id="data:widget.instanceId + "_backlinks-create-link"" target="_blank" shape="rect">
<data:post.createLinkLabel />
</a>
</p>
</b:includable>
- <b:includable id="feedLinks">
- <b:if cond="data:blog.pageType != "item"">
- <!-- Blog feed links
-->
- <b:if cond="data:feedLinks">
- <div class="blog-feeds">
<b:include data="feedLinks" name="feedLinksBody" />
</div>
</b:if>
<b:else />
- <!-- Post feed links
-->
- <div class="post-feeds">
- <b:loop values="data:posts" var="post">
- <b:if cond="data:post.allowComments">
- <b:if cond="data:post.feedLinks">
<b:include data="post.feedLinks" name="feedLinksBody" />
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
- <b:includable id="feedLinksBody" var="links">
- <div class="feed-links">
<data:feedLinksMsg />
- <b:loop values="data:links" var="f">
- <a class="feed-link" expr:href="data:f.url" expr:type="data:f.mimeType" target="_blank" shape="rect">
<data:f.name />
(
<data:f.feedType />
)
</a>
</b:loop>
</div>
</b:includable>
- <b:includable id="status-message">
- <b:if cond="data:navMessage">
- <div class="status-msg-wrap">
- <div class="status-msg-body">
<data:navMessage />
</div>
- <div class="status-msg-border">
- <div class="status-msg-bg">
- <div class="status-msg-hidden">
<data:navMessage />
</div>
</div>
</div>
</div>
<div style="clear: both;" />
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
- <div id="sidebar-wrapper">
- <b:section class="links" id="links" preferred="yes">
- <b:widget id="Profile1" locked="false" title="Quem sou eu" type="Profile">
- <b:includable id="main">
- <b:if cond="data:title != """>
- <h2>
<data:title />
</h2>
</b:if>
- <div class="widget-content">
- <b:if cond="data:team == "true"">
- <!-- team blog profile
-->
- <ul>
- <b:loop values="data:authors" var="i">
- <li>
- <a expr:href="data:i.userUrl" shape="rect">
<data:i.display-name />
</a>
</li>
</b:loop>
</ul>
<b:else />
- <!-- normal blog profile
-->
- <b:if cond="data:photo.url != """>
- <a expr:href="data:userUrl" shape="rect">
<img class="profile-img" expr:alt="data:photo.alt" expr:height="data:photo.height" expr:src="data:photo.url" expr:width="data:photo.width" />
</a>
</b:if>
- <dl class="profile-datablock">
- <dt class="profile-data">
<data:displayname />
</dt>
- <b:if cond="data:showlocation == "true"">
- <dd class="profile-data">
<data:location />
</dd>
</b:if>
- <b:if cond="data:aboutme != """>
- <dd class="profile-textblock">
<data:aboutme />
</dd>
</b:if>
</dl>
- <a class="profile-link" expr:href="data:userUrl" shape="rect">
<data:viewProfileMsg />
</a>
</b:if>
<b:include name="quickedit" />
</div>
</b:includable>
</b:widget>
</b:section>
- <b:section class="sidebar" id="sidebar2" preferred="yes">
- <b:widget id="Label1" locked="false" title="Marcadores" type="Label">
- <b:includable id="main">
- <b:if cond="data:title">
- <h2>
<data:title />
</h2>
</b:if>
- <div class="widget-content">
- <ul>
- <b:loop values="data:labels" var="label">
- <li>
- <b:if cond="data:blog.url == data:label.url">
<data:label.name />
<b:else />
- <a expr:href="data:label.url" shape="rect">
<data:label.name />
</a>
</b:if>
(
<data:label.count />
)
</li>
</b:loop>
</ul>
<b:include name="quickedit" />
</div>
</b:includable>
</b:widget>
- <b:widget id="BlogArchive1" locked="false" title="Arquivo do blog" type="BlogArchive">
- <b:includable id="main">
- <b:if cond="data:title">
- <h2>
<data:title />
</h2>
</b:if>
- <div class="widget-content">
- <div id="ArchiveList">
- <div expr:id="data:widget.instanceId + "_ArchiveList"">
- <b:if cond="data:style == "HIERARCHY"">
<b:include data="data" name="interval" />
</b:if>
- <b:if cond="data:style == "FLAT"">
<b:include data="data" name="flat" />
</b:if>
- <b:if cond="data:style == "MENU"">
<b:include data="data" name="menu" />
</b:if>
</div>
</div>
<b:include name="quickedit" />
</div>
</b:includable>
- <b:includable id="flat" var="data">
- <ul>
- <b:loop values="data:data" var="i">
- <li class="archivedate">
- <a expr:href="data:i.url" shape="rect">
<data:i.name />
</a>
(
<data:i.post-count />
)
</li>
</b:loop>
</ul>
</b:includable>
- <b:includable id="menu" var="data">
- <select expr:id="data:widget.instanceId + "_ArchiveMenu"">
- <option value="">
<data:title />
</option>
- <b:loop values="data:data" var="i">
- <option expr:value="data:i.url">
<data:i.name />
(
<data:i.post-count />
)
</option>
</b:loop>
</select>
</b:includable>
- <b:includable id="interval" var="intervalData">
- <b:loop values="data:intervalData" var="i">
- <ul>
- <li expr:class=""archivedate " + data:i.expclass">
<b:include data="i" name="toggle" />
- <a class="post-count-link" expr:href="data:i.url" shape="rect">
<data:i.name />
</a>
(
- <span class="post-count">
<data:i.post-count />
</span>
)
- <b:if cond="data:i.data">
<b:include data="i.data" name="interval" />
</b:if>
- <b:if cond="data:i.posts">
<b:include data="i.posts" name="posts" />
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
- <b:includable id="toggle" var="interval">
- <b:if cond="data:interval.toggleId">
- <b:if cond="data:interval.expclass == "expanded"">
- <a class="toggle" expr:href="data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen" shape="rect">
<span class="zippy toggle-open">▼</span>
</a>
<b:else />
- <a class="toggle" expr:href="data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen" shape="rect">
<span class="zippy">►</span>
</a>
</b:if>
</b:if>
</b:includable>
- <b:includable id="posts" var="posts">
- <ul class="posts">
- <b:loop values="data:posts" var="i">
- <li>
- <a expr:href="data:i.url" shape="rect">
<data:i.title />
</a>
</li>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
- <!-- end content-wrapper
-->
<b:section class="footer-widgets" id="footer" />
- <div class="footer">
- <div class="copyright">
- <div class="left">
2007
<a href="index.html" shape="rect">Your Website</a>
</div>
- <div align="right">
- <small>
<a href="http://www.tfy.burajiru.blog.br" shape="rect">by</a>
<a href="http://www.temas.burajiru.blog.br" shape="rect">TFY</a>
-
<a href="http://www.burajiru.blog.br" shape="rect">Burajiru</a>
, from
<a href="http://arcsin.se" shape="rect">Arcsin</a>
<a href="http://templates.arcsin.se" shape="rect">template</a>
.
</small>
</div>
</div>
</div>
</div>
</div>
- <!-- end outer-wrapper
-->
</body>
</html>
Observaciones
Contenido:
Si alguien le interesa la plantilla y decide aplicarla y no le dá errores como a mi, y le funciona le agradezco me lo comunique por medio de los comentarios.
jueves, 13 de diciembre de 2007
[+/-] |
Agrandar Imagenes |
Mostrar las imagenes y que se agranden cada vez que se tocan o pasen el ratón del mouse por encima.Es un truco que resulta curioso e interesante, Para llevarlo a cabo iremos a plantilla y justo antes de la etiqueta de ...</head>
añadiremos este código:
<style type='text/css'>
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: black;
padding: 5px;
left: -100px;
border: 1px dashed gray;
visibility: hidden;
color: #FFFF00;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}
</style>
Después sólo nos faltará aplicar este otro en el sitio que queramos mostrarlo bien sea un post o en el -sidebar-:
<a class="thumbnail" href="#thumb"><img src="http://i81.photobucket.com/albums/j219/jgutierrezs/arbol-2.jpg" width="100px" height="100px" border="0" /><span><img src="http://i81.photobucket.com/albums/j219/jgutierrezs/arbol-2.jpg" /><br />Inseguridad</span></a>
Ejemplo
Inseguridad
miércoles, 12 de diciembre de 2007
martes, 11 de diciembre de 2007
domingo, 9 de diciembre de 2007
[+/-] |
Más trucos de texto |
Si queremos escribir texto en las entradas en varios colores cada letra y simplemente poner el texto de diferente forma, vertical u orizontal, solamente pondremos este código en las entradas tal como se señala:
<span style="color:red;">P</span>
<span style="color:orange;">E</span>
<span style="color:green;">P</span>
<span style="color:blue;">I</span>
<span style="color:indigo;">T</span>
<span style="color:indigo;">O</span>
Ejemplo:
P
E
P
I
T
O
Otro ejemplo sería este:
<DIV style="width:350px;margin:0px auto;"><div style="font-weight:bold;text-align:center;line-height: 95%;"><br><span >J</span><br>O<br><span >S</span><br>E<br><span >E</span><br>G<br><span >U</span><br><big>gutiguti</big></div>
Ejemplo:
J
O
S
E
E
G
U
gutiguti