Como se abrán dado cuenta, estoy teniendo problemas para actualizar el blog.
Los tiempos realmente no me dan, ni siquiera estoy pudiendo contestar las consultas que me van llegando.
Como gran cantidad de las consultas son sobre el efecto que tengo en la parte superior derecha del blog, lo vuelvo a publicar.... no estaba segura de hacerlo, porque la idea es que naveguen por el blog, hay muchas notas y seguro alguna les va a servir tarde o temprano... pero como me siento en deuda con aquellos que a pesar que no estoy publicando siguen visitando este humilde espacio, aqui va el efecto que tanto piden ^_^
Miren también los comentarios que han dejado, son muy interesantes !!!
Espero pronto estar denuevo por aquí tan seguido como a mi me gusta .....
E ste truco me llegó desinteresadamente, de mano de Jose Luis de Caratulworld, que ya lo aplicó a su blog, y me lo hizo llegar vía mail.
En realidad no se como se llama el efecto, pero lo que produce, es el efecto que pueden ver al acercar el puntero del mousse a la esquina superior derecha, la página se dobla y deja ver la siguiente, esa imágen es un link que te lleva a otra página, en mi caso a mi blogroll. ^_^
Me pareció genial, así que lo he colocado en el blog, por un rato.
Además es muy simple !!!
Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^
Primero que nada debes descargar lo siguiente Descargar Zip
Una vez descomprimido, debes alojar los archivos Small.swf Small.jpg large.swf large.jpg en Google Pages Yahoo! GeoCities o algún servicio de alojamiento para conseguir las direcciones URL de cada archivo.
El archivo peel.js, lo tenés que editar, añadiendo las URL de los archivos anteriores, la URL de la imagen que se quiera visualizar al surgir el efecto de doblez (debe ser de 500 x 500 px), y la URL de la pagina a la que quieras dirigirte al hacer click en la imágen de fondo.
Como esto último entrevera un poquito, se los aclaro un poquito.
Lo siguiente es la transcripción de la parte del archivo peel.js que debemos modificar, fijarse en lo que está en negrita.
var jaaspeel = new Object();
jaaspeel.ad_url = escape('http://URL DE LA PAGINA A DIRIGIRNOS');
jaaspeel.small_path = 'http://URL DEL ARCHIVO small.swf';
jaaspeel.small_image = escape('URL DEL ARCHIVO small.jpg');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;
jaaspeel.big_path = 'http://URL DEL ARCHIVO large.swf';
jaaspeel.big_image = escape('http://URL DE LA IMAGEN DE FONDO GUARDADA COMO large.jpg');
jaaspeel.big_width = '650';
jaaspeel.big_height = '650';
jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url;
Una vez modificado esto, lo gurdás y también lo alojás para conseguir la URL del archivo.
Cuando ya tenemos todo esto realizado, nos dirigimos a Diseño/Edición Html y en la plantilla ubicamos </head> y abajo pegamos:
<script src='http://URL DEL ARCHIVO peel.js' type='text/javascript'/>
Antes de guardar lo vemos con la Vista Previa, para asegurarnos que está todo bien, y luego lo guardamos.
Pronto, fácil e ingenioso no?
Lo pueden ver en práctica en este blog, y en el de Jose Luis
Suerte !!!! ^_^
Actualización 11/04/08
Mi querida Eulalia nos hace llegar su descubrimiento, y nos dice:
"No es necesario sacar el archivo large.jpg, basta con preparar la imagen a mostrar, subirla y colocar la url en el sitio donde pone large.jpg del código peel.
Además, si quieres ponerlo en más de un blog, preparas la 2ª imagen, la subes, cambias las dos direcciones, la del blog a mostrar y la de la imagen y lo guardas como peel1, lo subes y la dirección de éste es la que añades al código.
Acabo de hacerlo en este otro blog de esta manera y también ha funcionado bien."
Muchas gracias Eulalia por tu aporte !!! ^_^
Seguir Leyendo...[+/-]
Efecto página doblada (?)
Buscador interno
U na herramienta super importante para los blogs, es la Búsqueda interna, con la cual nuestros visitantes podrán buscar aquella entrada, que una vez vieron pero que no se acuerdan hace cuanto, ni el nombre de a entrada, pero ingresando alguna palabra que la defina podrá encontrarla fácilmente.
Hasta ahora estaba utilizando un buscador interno basado en Google, pero estaba teniendo problemas, a veces buscaba cosas obvias y no encontraba nada, o encontrada algo que no tenía nada que ver.
Pero con el aporte desinteresado de Zilfarion mi problema se vió solucionado.
Es tan facil de aplicar como copiar y pegar.
El código sería así:<form id="searchthis" action="URL DE TU BLOG/search" style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="15" type="text"/>
<input id="b-searchbtn" value="Search" class="blue" type="submit"/>
</form>
Lo que está en rojo es lo que se modifica es decir todo se puede modificar, pero lo primero que marqué en color es en donde va la URL de tu blog, y lo segundo que marqué es el texto que aparecerá en el botón.
Lo pueden ver en funcionamiento en mi sidebar.
Desde ya muchas gracias a los aportes de
:D
Seguir Leyendo...[+/-]
Favicon o imagen en la Url - Otra manera
E n esta oportunidad Jorge del blog Jorge Key, me hace llegar esta interesante información.
Al parecer a implementado un código para que el Favicon pueda ser visto desde varios exploradores. (Hasta ahora solo se veía en Firefox)
Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^
1- Creamos nuestro Favicon, con la imagen que queremos.
2- Importante es guardar el Favicon en formato ICO y PNG
3- Alojamos la imágen y conseguimos su URL
4- Nos dirigimos a Draft Blogger ingresamos a nuestra plantilla, Diseño/Edición HTML y buscamos el siguiente código:
<title><data:blog.pageTitle/></title>
inmediatamente después pegamos lo siguiente<!-- Favicón-->
<link href='URL DE TU FAVICON ICO' type='image/x-icon'/>
<link href='URL DE TU FAVICON PNG' type='image/x-icon'/>
<link href='URL DE TU FAVICON ICO' rel='icon' type='image/png'/>
<link href='URL DE TU FAVICON PNG' rel='icon' type='image/png'/>
<link href='URL DE TU FAVICON ICO' rel='shortcut icon' type='image/x-icon'/>
<link href='URL DE TU FAVICON PNG' rel='shortcut icon' type='image/x-icon'/>
<!-- Termina Favicón -->
Nota: Como se darán cuenta está repetido, y es correcto, así debe ser para que funcione.
Pegamos las URL's que habíamos creado, y pronto.
Como siempre antes de guardar, nos fijamos en vista previa, para ver que todo funcione bien. ;)
Este es un excelente aporte de 
Gracias !!! :D
IMPORTANTE:
En estos días a sucedido que los Favicon que teníamos, desaparecieron, esto se debe a un cambio que ha hecho blogger; podría explicarlo, pero Jmiur lo está explicando mucho mejor.
Lo importante a saber es que, el código que aplicamos para agregar el Favicon, <link href='URLIMAGEN' rel='shortcut icon'/"> lo debemos poner antes de </head> y listo, se soluciona el tema. ;)
Seguir Leyendo...[+/-]
Desplegar y recoger - Otro modo
Y a anteriormente les había hablado de una genial forma de crear este truco.
Esta vez mi nuevo amigo Zilfarion, me hace llegar esta otra forma. (gracias por el aporte ^_^)
Sin necesidad de hacer cambios en la plantilla.
Con un simple script que pegamos en la entrada, e incluso es modificable.
Como suelo decir, con los códigos, el límite es el cielo ;)<div><div><div class="pre-spoiler"><span style="float: left; padding-top: 2px;"></span><input value="Ver" style="margin: 0px; padding: 0px; width: 80px; font-size: 14px; font-family: trebuchet ms;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver';}" type="button"> </div> <div> <div class="spoiler" style="display: none;"><span style="font-family:trebuchet ms;"><div style="text-align: center;"><div style="text-align: justify;"><u style="font-family: trebuchet ms;"></u>
TEXTO A OCULTAR
</span></div></div></span></div></div></div></div></fieldset>
Quedaría así:
Desde ya muchas gracias a los aportes de
:D
Seguir Leyendo...[+/-]
Comentarios Reciente - Otra forma
M i buen amigo Birdelo, me consulta sobre un truco que tengo en la sidebar, que es un botón que al clickearlo se desplegan los últimos comentarios.
Esta consulta me sirve de excusa, para comenzar a publicar nuevamente, después de 2 semanas sin poder conectarme.
Lo primero que debo explicar que son varios trucos, que fuí acomodando de modo tal que salió lo que salió ^_^
Bueno espesemos por el principio:
Como ya sabemos, Blogger nos da la posibilidad de desplegar en la sidebar los comentarios recientes de nuestros lectores, pero esta posibilidad no es compatible con el truco que generé.
1- Lo que debemos hacer es crear un widget de comentarios recientes, como los que utilizábamos antes de que Blogger lo hiciera por si mismo.
Para eso debemos visitar un generador creado por Blogger Templates, aquí podrás configurar el widget con tus caracterísiticas: Título, tu url, la cantidad de comentarios que quieres que se despleguen, si quieres la fecha y el titulo del post donde se comentó etc., es muy fácil.
Una vez que termines de confirgurarlo, le das al botón de agregar widget a tu blog y se abre otra pantalla, que te ayuda a añadirlo a tu blog, o simplemente copias el código que te da en la parte de "Editar" que sería mas o menos así:<script style="text/javascript" src="http://giga.ovh.org/rc"></script><script style="text/javascript">var a_rc=5;var m_rc=true;var n_rc=true;var o_rc=100;</script><script src="URL DE TU BLOG/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
a_rc=5;var m_rc=true;var n_rc=true;var o_rc=100 esta parte es lo que podrás modificar
a_rc=5; cantidad de comentarios cambiando el número
m_rc=true le pones "false" si no querés que aparezca la fecha
n_rc=true le pones "false" si no querés que aparezca el título del post
o_rc=100 longitud de los comentarios que se desplegarán
2- Muy bien, como verán, este generador crea el widget muy facilmente pero en ingles, para traducirlo debemos hacer algunos cambios.
Lo primero que debes hacer es alojar este archivo RC.js.
Ahora, debes buscar en el código del widget generado anteriormente, esta dirección http://giga.ovh.org/rc y reemplazarla por la URL del archivo que alojaste.
3- Para el efecto de "Desplegar" deben verlo AQUI que ya lo había explicado.
4- Para el efecto del Botón apretado deben verlo AQUI que también ya lo había explicado.
En fin luego de haber explicado y aplicado todo esto, el código quedaría mas o menos así:
<script type='text/JavaScript'></script>
<div class="EJ-COMENTARIOS">
<span class="pushbutton"><a href="javascript:desplegar('EJ-COMENTARIOS');">
<img src="URL DE LA IMAGEN DE BOTON"/></a></span>
<ul id="EJ-COMENTARIOS" class="ocultar_menu"><br/>
<script style="text/javascript" src="URL DEL ARCHIVO RC.js"></script>
<script style="text/javascript">var a_rc=5;var m_rc=true;var n_rc=false;var o_rc=50;</script><script src="URL DE TU BLOG/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
<br/></ul></div>
En fin a probarlo, es una recopilación de trucos, como ya había dicho, asi que el cielo es el límite :D
Seguir Leyendo...[+/-]
Imagenes que se agrandan
E ste es un muy buen truco, que descubrí hace tiempo, y que nunca es tarde para desenterrar, es para agrandar una imagen con simplemente pasarle el puntero del mouse sobre el.
Ej:
Asi es Key
Para llegar a este resultado nos debemos situar en Plantilla/ Edición de HTML y justo después de <head> aplicamos el siguiente código:
Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^<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: white;
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 de añadir el código en la plantilla, queda añadir el siguiente código justo donde deseamos que salgan las imágenes en nuestra entrada.
<a class="thumbnail" href="#thumb"><img src="aquí-la-url-de-la-imagen" /><span><img src="aquí-la-url-de-la-imagen" width="100px" height="100px" border="1" /><br />Texto si se desea poner</span></a>
Con este código podemos configurar a nuestro gusto el tamaño de la imágen que se amplía, la posición (width="100px" height="100px"), el borde (border="1"), y nos da la posibilidad de agregar un texto en la base de la imágen.
Y pronto, magia...
Lo descubrí hace tiempo en el blog de César, gran fuente de conocimiento, que lamentablemente ya no está publicando. (César, gracias totales !) ;)
Seguir Leyendo...[+/-]
Favicon
H ace unos días en uno de los comentarios, mi querida Evan preguntaba como hacer para poner la pequeña imagen al lado de la dirección URL, en nuestro navegador.
Ya anteriormente había hablado sobre el Favicon, entonces en esta oportunidad les voy a pasar un listado de generadores de Favicon, para poder crearlos desde la imagen de su preferencia.
AntiFavicon
Collabyrinth
Dynamic Drive: FavIcon Generator
Favikon
Favicon from Pics
Free Online ICON Editor
favicon.cc
Favicon Generator
DeGraeve: Favicon Editor
GenFavicon
Graphics Guru: Favicon Generator
Paginación como en Wordpress
N uevamente recibo de manos de José Luis de Caratulworld, este interesante truco, que lo que hace es que en vez de que nos aparezca al final de la página, Entradas Recientes, Pagina principal, Entradas Antiguas.
Jose nos explica:
Aquí te envío algo que muchos bloggers hemos estado esperando hace tiempo, aunque creo que necesita mejorar pero para empezar esta bien, se trata de enumerar las paginas el método utilizado por Wordpress, en vez del tradicional entradas antiguas o entradas recientes, con el código que te adjunto solo has de ponerlo en Añadir Artilugios justo debajo de entradas del blog y ya tendrás la numeración.
Se pueden cambiar los colores, asi como el número de paginación que quieres que salga, yo he puesto 5 pero eso va a gusto de cada uno...
<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
</style>
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount = 4;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>
Podés ver el efecto en CARATULWORLD
También Jmiur tocó excelentemente el tema. ^_^
Seguir Leyendo...[+/-]
Novedades Blogger Draft
H ace rato que está circulando en la web, los variados cambios que se están encontrando en Blogger in Draft.
El más importante, y mas comentado de todos, y el que estábamos esperando impacientemente hace muuuucho tiempo, el tema de los comentarios, del cual no voy ahondar, porque ya hay varios artículos sumamente interesantes en la blogesfera, y sería simplemente reiterativo.
Están las estrellitas también, la posibilidad de importar y exportar el blog, el cambio en el modo de agregar imágenes, el cambio en la vista previo, etc.
Pero hoy me vengo a dar cuenta de esto....
Esto, aunque no lo parezca, a los blogs de ayuda, nos ahorra el tener que convertir los códigos HTML que queramos mostrar ;)
Curioso no? ^_^
Emoticones
Labels: TrucoMe encantaron y es re fácil de incluirlos en el blog, lo que tenés que hacer es:
Primero descargar este script addSmiley.js y alojarlo en algún servicio como Yahoo! GeoCities para obtener la dirección URL, que luego debes pegar, inmediatamente después de ]]></b:skin> agregando el siguiente código en la plantilla (Plantilla/EdiciónHTML/Expandir artilugios):
Quedaría así: los 2 puntitos seguidos de...
) :) D :D $ :$ ( :( p :p k :k @ :@ # :# x :x o :o ó con el punto y coma primero (;) y ) ;)
Quedan bárbaros !!!
Atención que demoran un poquito en aparecer en el blog, no sé porqué, a mi me sucedió así, y por lo que pude consutar no fuí la única. ;)
Fuente: Rosa
Actualización 23/09/08
Como muy bien señala mi querida amiga Pau, podemos también incluir emoticones a todas partes en nuesto blog, esto sería en la sidebar, y comentarios, y el métodos que nos da es muy fácil:
Ubicamos en la plantilla de nuestro blog (SIN expandir artilugios)
<section class='main' id='main' showaddelement='no'>
<widget id='Blog1' locked='false' title='Entradas del Blog' type='Blog'>
<b:section>
y a continuación agregamos lo siguiente:
<script language="javascript">
addSmiley('post-author', 'post-notes', 'comment-author');
</script>
Y pronto !!! ;)
Mejorando la apariencia de los comentarios
H ace ya un tiempo que he aplicado un truco por el cual, los comentarios se despliegan en el blog como parte de cada entrada, disimulando un poco el interfaz que Blogger le a dado a la plantilla de comentarios, que queda tan mal estéticamente hablando con nuestros blogs.
Es que nos matamos para que nuestros blogs, sean únicos, y reflejen nuestros gustos, "tuneándolos" de la mejor manera posible, pero los comentarios son algo que hasta ahora no se podían cambiar.
Vromo consulta, y yo le cuento:
Gracias a la genialidad de Rosa, (una gran maestra para todos), que ha encontrado hace un tiempo este truco en un blog en inglés que ya no existe, se tomó el trabajo, de corregirlo y publicarlo par todos.
Y yo lo transcribo para darle una respuesta a Vromo ^_^, aunque pueden ir a la fuente ;)
Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^
1- Vamops a la pestaña "Configuración" de nuestra plantilla y de ahí a "Comentarios" y seleccionamos SI en "¿Mostrar comentarios en una ventana emergente?"
2- Luego vamos a Plantilla/Edición HTML, expandir artilugios y encima de </head> colocamos este código:<style>
#comenta-outter {
margin: 50px 0;
}
#comenta-inner {
display: block;
height: 650px;
width: 500px;
margin:0;
border:none;
background-color: #ddd;
}
</style>
3- Luego tratamos de localizar esta parte del código en la plantilla y lo seleccionamos:<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<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'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<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'>
<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'>
<data:postCommentMsg/>
</a>
</p>
</b:if>
(Recuerden que todas las plantillas son distintas, y esta parte del código puede ser que esté un poco distinta, es cuestión de encontrar el principio y el final, lo van viendo y de paso se acostumbran a los códigos. Lo comento por experiencia propia. ;) )
4- Una vez que seleccionamos todo el código anterior, lo sustituimos por el siguiente:<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<center>
<div id='comenta-outter'>
<div id='comenta-inner'>
<iframe align='middle'
expr:src='data:post.addCommentUrl'
frameborder='0' marginheight='0' marginwidth='0' scrolling='auto'
style='width:100%;height:100%;'/>
</div>
</div>
</center>
</b:if>
5- Ahora tenemos que localizar esta otra parte del código y lo seleccionamos:<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'>
<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>
6- Sustituímos lo seleccionado por este código:<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.url + "#comments"' >
<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>
Pronto, ya queda :D
Como bien marca Rosa en su blog, podemos modificar el código CSS, para adaptar el formulario y darle una apariencia mucho más original.
#comenta-inner {
display: block;
height: 650px;
width: 500px;
margin:0;
border:none;
background-color: #ddd;
}
height: 650px; Altura del formulario
width: 500px; Ancho del formulario
border:none; Borde del formulario, es modificable el grosor, tipo y color, por ej, border:2px solid #000;
background-color: #ddd; Color de fondo del formulario, no solo podemos cambiar el color, sino que podemos añadir una imagen de fondo al formulario, cambiando background-color: #ddd; por background: url(URL DE LA IMAGEN);
Listo !!!!
Yo, como les comentaba, ya lo tengo en funcionamiento hace tiempo, asi que si lo quieren ver, solo hagan click en comentarios y ahí está ;)
Seguir Leyendo...[+/-]
Imagen en el título del post
M e llega una consulta de carmncitta.
Ella me pregunta como poner una imagen en el título del post, y por suerte es un proceso muy fácil ^_^
Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^
-Primero que nada debes tener la dirección URL de la imágen que deseas poner en el título de la entrada.
-Despúes tenés que ir a la plantilla: Diseño/Plantilla HTML/Expandir artilugios
-Una vez allí debes ubicar esta parte del código
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a><b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
-Enseguida después de <a expr:href='data:post.url'> que está en negrita, debes añadir la dirección URL de la imagen, quedaría así
<a expr:href='data:post.url'><img src="URL DE LA IMAGEN"/>
Lo miran con la vista previa, y si están conformes, le dan a guardar.
Pruébenlo y cualquier cosa me avisan, pero pueden ver como queda AQUI ^_^
Imageflow - Nueva Galeria de fotos
Y a desde hace algunos días mi querido Jose de Caratulworld me hizo llegar una nueva idea para crear una plantilla que sirva de Galería de Fotos.
Esta no es como la anterior, no es una alternativa a Fotolog, es con todas las palabras, una galería de fotos.
Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^
Primero que nada debes descargar este archivo Imageflow
Una vez descomprimido, debes instalar la plantilla.
Cuando ya está instalada, sube el archivo imageflow.js a un hosting propio (ej:
Una vez hecho esto sube el archivo a un hosting propio, busca en la plantilla y los pegas en las siguientes lineas:
<script src='AQUI TU URL/imageflow.js' type='text/javascript'/>
<link href='AQUI TU URL/screen.css' media='screen' rel='stylesheet' type='text/css'/>
Se puede añadir un logo en esta linea:
<div align='left'><img height='200' src='AQUI LA URL DE TU LOGOTIPO!!se puede modificar la altura y la anchura¡¡¡' width='200'/>
</div>
Por ultimo solo queda subir las imágenes y añadirlas en esta lineas:
<img alt='Image 1' src='AQUI LA URL DE TU IMAGEN.jpg'/>
<img alt='Image 2' src='AQUI LA URL DE TU IMAGEN.jpg'/>
<img alt='Image 3' src='AQUI LA URL DE TU IMAGEN.jpg'/>
<img alt='Image 4' src='AQUI LA URL DE TU IMAGEN.jpg'/>
<img alt='Image 5' src='AQUI LA URL DE TU IMAGEN.jpg'/>
<img alt='Image 6' src='AQUI LA URL DE TU IMAGEN.jpg'/>
<img alt='Image 7' src='AQUI LA URL DE TU IMAGEN.jpg'/>
<img alt='Image 8' src='AQUI LA URL DE TU IMAGEN.jpg'/>
<img alt='Image 9' src='AQUI LA URL DE TU IMAGEN.jpg'/>
Donde pone image 1,2,3 etc.. es donde se puede poner el titulo de la foto.
Y pronto, no es nada difícil y el resultado es super lindo :)
Gracias
Seguir Leyendo...[+/-]
Tab Menu
C omo en ocasiones recientes, el genial Jose Luis de Caratulworld me hace llegar sus inventos para difundirlos.
En esta ocasión se trata de un genial menú, que da al blog una vista super profesional.
Actualización 29/04/08
Lo prometido es deuda, lo pueden ver también acá
Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^
Primero que nada debes descargarte este archivo
Una vez que está descomprimido verás que en el están los archivos de imagen del ejemplo que pueden ser reemplazados por los de tu elección, o mejor dicho los que queden mejor en tu blog, también encontrarás los archivos .js, que deben ser subidos a un hostin ejemplo Google Pages Yahoo! GeoCities.
Una vez que tenemos la URL de los scripts, debemos pegar lo siguiente justo a continuación de </head>
<script src='http:AQUI URL DE TU/prototype.js' type='text/javascript'/>
<script src='http:AQUI URL DE TU/effects.js' type='text/javascript'/>
<script src='http:AQUI URL DE TU/tabslide.js' type='text/javascript'/>
A continuación debemos agregar el siguiente código Css si es que tu blog no cuenta con un menú, de lo contrario debemos sustitirlo por el mismo.
#MENU {
border: 1px solid #1F669B;
width: 600px;
height: 310px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 11px;
position:relative !important;
display:block;
overflow:hidden;
background-image:url(http://img363.imageshack.us/img363/5102/astonoz8.jpg);
background-repeat:no-repeat;
background-position:top left;
}
h3 {
font-size: 12px;
padding: 6px 6px 4px 35px;
margin: 0;
color:#fff;
border-bottom:1px solid #333333;
cursor:pointer;
display:block;
background-image:url(http://img292.imageshack.us/img292/3439/tableftpj1.gif);
background-position:top left;
background-repeat:no-repeat;
}
#visible {
background-image:url(http://img296.imageshack.us/img296/9015/tableftactivevc5.gif);
border-bottom:1px solid #DA1074;
}
.panel_body {
height:150px;
background-color:#333333;
display:block;
position:relative;
color:#FFFFFF;
}
.panel_body div {
padding:3px 5px;
}
.panel{
bottom:0px;
margin:0px;
padding:0px;
background-image:url(http://img178.imageshack.us/img178/750/tabrightyy7.gif);
background-position:top right;
background-repeat:repeat-x;
background-color:#333333;
}
.wrapper{
bottom:0px;
position:absolute;
}
En este ejemplo ya están incluidas las urls de las imágenes del ejemplo (en negrita), pero en el caso que tengas tus propias imágenes deben ser sustituidas por las urls de tus imágenes.
Ahora vamos la estructura del menu haciendo la llamada al Div:(que iria donde tienes actualmente el tuyo o en elementos de pagina)
<CENTER><div id='MENU'>
<div class='panel' id='panel1'>
<h3><a href='http:AQUI URL A ENLAZAR/'>TITULO 1</a></h3>
<div class='panel_body' id='panel1-body'>
<div>
Galería flash para Blogger
</div>
</div>
</div>
<div class='panel' id='panel2'>
<h3><a href='http:AQUI URL A ENLAZAR/'>TITULO 2</a></h3>
<div class='panel_body' id='panel2-body'>
<div>
Contenido del panel 2
</div>
</div>
</div>
<div class='panel' id='panel3'>
<h3><a href='AQUI URL A ENLAZAR/'>TITULO 3</a></h3>
<div class='panel_body' id='panel2-body'>
<div>
Contenido del panel 3
</div>
</div>
</div>
<div class='panel' id='panel4'>
<h3><a href='http:AQUI URL A ENLAZAR/'>TITULO 4</a></h3>
<div class='panel_body' id='panel2-body'>
<div>
Contenido del panel 4
</div>
</div>
</div>
</div></CENTER>
Una vez realizado todo esto, primero nos fijamos en la vista previa, antes de guardar los cambios, para asegurarnos de que todo se ve bien.
Pronto ya está para ver un ejemplo realizado por Jose Luis pueden visitarlo AQUI
NOTA:
Esta es la parte básica, los códigos pueden ser cambiados de manera tal que quede mejor en el estilo de tu blog.
Por un tema de tiempo no lo he podido instalar todavía en ninguno de mis blogs, estoy bastante atrazada en todos :$ asi que prometo que en el correr de la semana lo instalaré y avisaré para que vean mi creación ;)
Gracias
Seguir Leyendo...[+/-]
Entradas Relacionadas
E ncontré en Blogmundi una manera de poder incluir a cada entrada, una lista de otras entradas que estén relacionadas.
Me gustó tanto la idea, que ya lo estoy probando. Pienso que es una buena manera de que los visitantes se interesen o puedan encontrar más entradas, sin necesidad de estar navegando a ciegas.
El único tema que no me termina de convencer, es que el truco, para que funcione, lo que hace es relacionar las entradas según las etiquetas, por las relaciones pueden no tener mucho que ver, si la entrada tiene varias etiquetas.
Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^
Manos a la obra....
Tenés que ir a Diseño/Edición Html/Expandir artilugios y copias el siguiente código antes de </head>
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
(Lo que está en negrita lo podés cambiar por la cantidad de temas relacionados que querés que aparezcan, yo por ejemplo lo puse en 5.)
Una vez esto es recomendable guardar, y seguir con el truco.
Lo que debes hacer ahora es buscar esta parte en la plantilla:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
Una vez que lo ubicaste, lo debes cambiar por esto:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
Nuevamente guardamos para que no se pierda nada.
Ahora vas a Elementos de página/Agregar nuevo elemento Html
Como título le puedes poner lo que quieras, ej: "Relacionados", pero no te olvides ponerle título porque luego lo usaremos.
Lo que debes pegar allí es lo siguiente:
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
Lo puedes ubicar en donde mejor te quede, por ejemplo yo lo he pegado al final de cada post.
Ya casi queda pronto, lo último que debemos hacer es ir nuevamente a Diseño/edición Html/expandir artilugios, y debes ubicar el nuevo elemento Html que acabamos de agregar, la manera más fácil es hacerlo mediante el buscador de tu explorador (ej: Ctrl F (Firefox) Ctrl B (IE)), poniendo el título del elemento.
Una vez que lo ubicaste debes agregar lo que está en negrita:
<b:widget id='HTML13' locked='false' title='Relacionados' type='HTML'><b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'> Añade esta línea
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != ""’>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<data:content/>
</div> <b:include name=’quickedit’/>
</b:if> Añade esta línea
</b:includable></b:widget>
Ya está pronto ^_^
Solo quiero destacar que este truco solo aparece cuando estamos dentro de alguna entrada, no aparece cuando estamos en la página principal.
Seguir Leyendo...[+/-]
Botón de enlace
H ace un tiempo, les habia dado un método para que a los que les gusta nuestro blog, obtuvieran el código para que nos enlacen.
El tema es que como le pasó a código para inhabilitar el botón derecho, para que no le copiaran los contenidos, indirectamente bloqueaba a los que querían copiar el código para llevarse su botón de linkeo.
Justo en la misma época, Alive me solicitaba la manera de poner un botón de linkeo, pero sin tener que copiar el código.
Entonces me puse a experimentar con el código y lo que salió fué este código:
<form action="http://beta.blogger.com/add-widget" method="post"><input value="FAVOURITE" name="widget.title" type="hidden"/><textarea style="display: none;" name="widget.content"><a href="URL DEL BLOG" target="_blank"><img alt="NOMBRE DEL BLOG" src="URL DE LA IMAGEN DE TU BOTON"/></a></textarea><input value="http://buzz.blogger.com" name="infoUrl" type="hidden"/><input value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/><input src="URL DE LA IMAGEN DE TU BOTON" type="image"/></form>
Quedaría así:
Con esto no es necesario copiar y pegar, haciendo click en la imágen se abre una ventana para agregar el botón directamente en el blog.
Espero haya aportado ^_^
Ver una entrada al Azar
E sto ya es bastante común en los blogs, aunque su utilidad es limitada, creo que sirve más que nada para desenterrar nuestras entradas más viejas.
Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^
Nos dirigimos a Diseño/Edición html/Expandir artilugios
Agregar antes de </head>
<script type="text/javascript">
//<![CDATA[
var _yourBlogUrl = "URL DE NUESTRO BLOG";
function randomPost() {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTotalPostsCallback&start-index=1&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTotalPostsCallback(json) {
var totalResults = json.feed.openSearch$totalResults.$t;
if (totalResults > 0) {
getRandomPostNumber(totalResults);
}
};
function getRandomPostNumber(totalResults) {
var randomNumber = Math.floor((Math.random() * totalResults) + 1);
getRandomUrl(randomNumber);
};
function getRandomUrl(randomNumber) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTheUrlCallback&start-index=" + randomNumber + "&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTheUrlCallback(json) {
var theUrl = json.feed.entry[0].link[0].href;
window.location.href = theUrl;
}
//]]>
</script>
Luego salvamos y vamos a añadir un elemento Html a nuestra plantilla en nuestra sidebar, y en el agregamos lo iguiente:
<a href="javascript:randomPost();">Entrada al Azar</a>
Donde dice "Entrada al Azar" lo podemos cambiar por una imágen, quedaría así:
<a href="javascript:randomPost();"><img src="URL DE LA IMAGEN"/></a>
Seguir Leyendo...[+/-]
Orientar titulo del blog
C omo ya todos sabemos no todas las plantillas son iguales.
Entre esas diferencias está la orientación del texto de la cabecera, siempre y cuando no se le haya puesto una imagen en su lugar.
Para aquellos que quieran corregir la orientación del título del blog, simplemente lo que se debe hacer es:
Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^
En Plantilla/Edición Html
Buscamos en el CSS
#header{
Una vez localizado debemos agregar inmediatamente después esta línea:
text-align: center; para centrar
text-align: left; para la izquierda
text-align: right; para la derecha
Antes de guardar el cambio, fijate primero en Vista previa, si estás satisfecho con el resultado, le das a guardar. Suerte !!!
Textarea
E ste tipo de truco, o mejor dicho de recurso, es muy útil, para destacar ciertas cosas y también porque no, para hacer el mejor uso posible de los espacios de nuestro blog.
<textarea cols="30" rows="5" readonly="readonly" style="background-color: rgb(255, 228, 225);">AQUI EL TEXTO A DESTACAR</textarea>
Se le puede cambiar el color de fondo, incluso ponerle una imágen de fondo, y cambiarle el tamaño.
Otra opción para seguir ahorrando espacio en nuestras entradas, es el llamado IFRAME, donde podemos ver en una pequeña ventana la página a la que hacemos referencia, por ejemplo.
<iframe src="AQUI LA URL DE LA PAGINA"frameborder=0 FRAMEBORDER=no scrolling=yes></iframe>
Seguir Leyendo...[+/-]
Sobre Navbar 2
A clarnado la entrada anterior.
Gracias a los aportes de 2 genios como son Rosa y Jmiur, pudimos llegar a una respuesta convincente para lo que nos planteaba Sole, y de la información que nos proporcionaron, se desprende que la falta de Navbar en los blogs de Blogger NO afecta al PageRank.
Aparentemente la confusión surgió cuando Sole consulto en el foro de google.dirson y solicitó una evaluación. (http://foros.dirson.com/23481-evaluar-mis-blogs/)
A este pedido recibió algunas respuestas, de donde salió la de la confución con la Navbar.
Vale aclarar que google.dirson "NO tiene ninguna afiliación ni relación con Google Inc." y como dice Jmiur "En el foro de referencia quienes "evaluan" y responden son usuarios comunes y corrientes y sus opiniones son tan válidas e inválidas como la de cualquiera de nosotros. Lamentablemente, lo hacen con bastante menos prudencia a la hora de afirmar cosas."
Por lo tanto vuelvo a repetir, la falta de la Navbar NO afecta al PageRank
Mil gracias a Rosa y Jmiur por desaznarnos con este asunto, tan rápido. Son unos genios ^_^
