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
martes, 27 de noviembre de 2007
[+/-] |
Imagen que cambia al pasar el cursor |
Según publica hoy el estupemdo blog de Gema@blog, este ejemplo de aplicación "Rollover", que cambia las imagenes al pasar el cursor.
Primeramente nos situamos en la plantilla edición HTML, y justo antes de -/head-, añadimos este código:
<script language="JavaScript" type="text/javascript">
imagenOn = new Image(300,200);
imagenOn.src = "images/avatar2.gif";
</script>
damos aceptar guardando los cambios y a continuación añadimos esto otro en el sitio que queramos ponerlo, bien sea una emtrada o en el sidebar;
<a href= "#" onclick="returnfalse;" onmouseover="document.ejemplo.src='url-imagen';" onmouseout="document.ejemplo.src='url-imagen';">
<IMG name="ejemplo" src="url-imagen-1ª" alt = "ejemplo de rollover"width="300" height="300" border= "0">
</a>
solamente sustituimos donde pone -url.imagen-, por la imagen nuestra: Ejemplo
domingo, 25 de noviembre de 2007
[+/-] |
Imagen efecto ir arriba |
Para aplicar en nuestro blog una imagen al pie de página con efecto de ir arriba, basta añadir el siguiente código en nuestra plantilla, preferiblemente antes de la etiqueta -/body-, casi al final, así podremos localizarle más facilmente en caso de querer suprimirla:
donde pone url de la imagen aplicar la url de la que os guste
[+/-] |
Mostrar/Ocultar |
Para que se muestre un desplegable en el cual podamos ocultar y al mismo tiempo expandir el texto, vamos a plantilla y localizaremos la etiqueta -/head-,y justo antes pondremos el siguiente texto:
[+/-] |
Seguir leyendo |
A veces vemos en los post de entradas, sobre todo cuando los textos son demasiados largos, la coletilla del "seguir leyendo", para que si lo creemos conveniente pulsemos y sigamos leyendo el resto del texto si nos interesa. Bien pues para aplicarlo basta seguir los siguientes pasos:
Primeramente buscamos la etiqueta -/head-, y a continuación pegamos lo siguiente:
<script src='http://forevergema.googlepages.com/functiontoggleIt.js' type='text/javascript'/>
Segundo paso es buscar en la plantilla, expandiendo artilugios primeramente este otro código:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
y esto mismo los sustituimos por el siguiente código:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>SIGA LEYENDO</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>CERRAR NOTA</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Aceptamos y ya está listo. Solamente nos queda en cada entrada o post ir añadiento esto otro para que funcione:
texto
<span id="fullpost">
texto
</span>
lunes, 19 de noviembre de 2007
[+/-] |
Traducir los post al inglés |
Para que aparezca la bandera de traducción al inglés vamos a plantilla edición HTML y después del siguiente código :<p class='post-footer-line post-footer-line-3'>
.
pondremos este otro código justo a continuación:
<a expr:href='"http://world.altavista.com/babelfish/trurl_pagecontent?url=" + data:post.url + "&lp=es_en"' title='Spanish to English'><img src='http://1.bp.blogspot.com/_XGtsagQTuUQ/RZk8DP2JNiI/AAAAAAAAADk/eRxHS5s1f10/s320/english.jpg' alt='Eng' /> English</a>
[+/-] |
Barras de separación |
Para añadir lineas de separación verticales dentro del blog, añadiremos lo siguiente:
Añadimos en #main-wrapper { el valor
border-left: solid #000000 1px; para conseguir una barra a la izquierda de la sidebar.
border-right: solid #000000 1px; para conseguir una barra a la derecha de la sidebar.
border-right:1px dashed #ffffff; la barra se verá punteada.
Si queremos incluir las entradas dentro de una caja,es decir, barra derecha-barra izquierda-barra arriba-barra abajo, añadimos en #main-wrapper { el valor border: solid #000000 1px;
Para verla punteada: border: dashed #000000 1px;
Si queremos que las esquinas de la caja se vean redondeadas, añadimos:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
Lo mismo puede hacerse en la sidebar, añadiendo esos valores en #sidebar-wrapper {
Observaciones:
*Si os parece que el texto de las entradas queda demasiado pegado al borde que acabamos de colocar, añadís el valor padding, por ejemplo asi: padding: 0 10px 0 10px; según se varie el valor de los pixeles (px) variará la distancia del texto al borde.
[+/-] |
Títulos Expandibles en Etiquetas |
Para que las entradas o post aparezcan normales, pero al entrar en -Etiquetas-, los post estén ocultos y que estos mismos se pueden expandir cuando nosotros queramos, tendremos que añadir los siguientes códigos.
Pimero entramos en la plantilla edición HTML, y antes de -/head-, añadimos esto:
<script src='http://www.anniyalogam.com/widgets/hackosphere.js' type='text/javascript'></script>
<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
</script>
Seguidamente tendremos que buscar el texto que les muestro escrito en negro y añadir justo encima la parte de código que está en rojo:
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>
[+/-] |
Drop Caps |
El Drop Caps consiste basicamente en hacer aparecer la primera letra de los Posts en un tamaño mayor al del resto del texto; al estilo revista o periódico.
Para implantarlo basta añadir el siguiente código en tu plantilla -HTML-, antes de :
]]></b:skin>.:
Código:
.dropcaps {
float:left;
color:#1B703A;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}
Luego cada vez que quieras que aparezca el -Drop Caps-, pega el siguiente código en la entrada correspondiente..., solamente cambia la letra -D-, por la que quieras:
<span class="dropcaps">D</span>
domingo, 18 de noviembre de 2007
[+/-] |
Mensaje de Alerta |
Con este truco pueden resaltar algo para que no pase inadvertido. Por gentileza del blog de -Cesar-.Para eso insertar el siguiente código antes de :]]></b:skin>
Código:
/* alerta */
.alert {
background: #fff6bf url(http://img527.imageshack.us/img527/3821/exclamationfs0.png) 15px center no-repeat;
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #ffd324;
border-bottom: 2px solid #ffd324;
}
para usarlo hay que emplear lo siguiente:
<p class="alert">ACA VA EL MENSAJE</p>
[+/-] |
Imagen transparente |
Convertir una imagen al pasar con el puntero. Gracias al estupando blog de -Cesar-.
-http://webjcp.blogspot.com-
que nos facilita el siguiente código para implantar en nuestra página:
<img
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" alt="imagen transparente"
style="-moz-opacity:0.4;filter:alpha(opacity=40)" src="http://img329.imageshack.us/img329/771/webjcpow1.jpg"/>
Ejemplo:
[+/-] |
Poner una página dentro del Blog |
Para poder mostrar cualquier página dentro de nuestro blog, bien sea en las entradas o en el sidebar, basta añadir el siguiente código donde lo queramos situar:
<iframe src="dirección de página"WIDTH="50%" HEIGHT="300"></iframe>
Ejemplo:
[+/-] |
Enlaces en la misma página |
Por gentileza del blog de César que nos muestra en su estupenda página cómo se ponen los enlaces dentro de la misma página, lo cual es bastante cómodo para pasar de un contenido a otro dentro del mismo blog. El código que nos muestra es el siguiente:
Primero pones el enlace de referencia
<a href="#1">Ir a mi casa</a>
Después el de destino
<a id="1"/>Mi casa</a>
En el ejemplo el num. -1-, que se muestra es un ejemplo, se puede cambiar este número por el que queramos o por cualquier nombre, eso sí siendo el mismo en las dos partes. Lo mismo que -Mi casa-, que pondremos lo que queramos.
sábado, 17 de noviembre de 2007
[+/-] |
Títulos dobles en la sidebar |
Si queremos poner algo diferente dentro del -sidebar-, y que lo que queramos mostrar sean títulos o textos pequeños, y que a la vez se vean dobles, pondremos lo siguiente
en nuestra plantilla dentro de CSS, por ejemplo antes de :]]></b:skin>
Aplicaremos este código :
/*- Doble título-------------------------- */
h5{
margin: 0;
font-weight: normal;
color: #d8f7af;
font-size: 2.2em;
position: relative;
}
h6{
margin: 0;
display: inline;
position: relative;
top: -.5em;
left: 2em;
font-size: 1.5em;
font-weight: normal;
color: #94c258;
}
Después vamos a nuestra plantilla a añadir un elemento HTML-Javascript y aplicaremos esto otro:
<h5>...NUESTRO TITULO...</h5>
<h6>...NUESTRO TITULO...</h6>
y obviamente donde pone -nuestro título-, pondremos lo que queramos, para que se vea doble.Guardamos los cambios y listo.
[+/-] |
Mostrar/Ocultar(+/-) |
Este es una herramienta bastante util a la vez que queda muy bien en cualquier parte del blog, ya que su principal característica es que muestra y oculta, textos, imagenes, links, posts, y cualquier cosa que se nos ocurra y que queramos tener oculto, bien sea por su tamaño o por cualquier otra circunstancia. Para su implantación tenemos qye añadir el siguiente código:
Primeramente añadiremos lo siguiente dentro de la plantilla, en el CSS:
.commenthidden {display:none}
.commentshown {display:inline}
Segundo colocamos este script justo antes de -/head-
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
Tercero, donde queramos situar el efecto añadiremos lo siguiente:
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">+/- Título</a><br />
<div class="commenthidden" id="UniqueName"></div>
La parte a ocultar hay que ponerla justo antes del -/div-, de la tercera parte.
También podemos poner el título que más nos guste a continuación de los signos +/-.
Asímismo si quisieramos añadir más segmentos dentro de la misma aplicación solamente tendríamos que ir añadiendo la parte de la fase tercera, pero habría que cambiar la parte que dice UNIQUENAME, por otro nombre diferente, por cada módulo que añadamos.