tag:blogger.com,1999:blog-370943702024-03-12T23:10:24.649-05:00Ayuda para el Blog®Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.comBlogger86125tag:blogger.com,1999:blog-37094370.post-13004490786115412192010-03-03T16:18:00.002-05:002010-03-04T22:26:18.354-05:00Entradas relacionadas con imagen (2) -84-<div align="justify"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 362px; DISPLAY: block; HEIGHT: 213px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5444506939274528786" border="0" alt="" src="http://3.bp.blogspot.com/_wIBBe1JWnPQ/S47GNwybiBI/AAAAAAAAATg/8lspRCG68b8/s400/Lit3.bmp" /><strong>LinkWithin</strong> es un servicio web que permite a través de un widget enlazar con post antiguos que guarden relación con el contenido del nuevo artículo publicado, el cual incrementa el número de visitas y el tiempo de permanencia de tus usuarios en tu blog.<br />El widget dispone de la imagen en miniatura que contenga el artículo, es gratuito y sencillo de instalar.<br /><br /><strong>1.</strong> Accedemos a la página de <a href="http://www.linkwithin.com/learn" target="_blank"><span style="color:#3333ff;"><u>LinkWithin</u></span></a> y a la derecha veremos el formulario para obtener el Widget, en donde tenemos:<span class="fullpost"><br /><span style="color:#ff6600;">-</span> Introducir un correo electrónico<br /><span style="color:#cc6600;">-</span> La url del blog donde vamos a colocar el Gadget.<br /><span style="color:#ff6600;">-</span> En que plataforma esta el blog, es decir en donde esta alojado, si en Wordpress, Blogger, Typepad u otros.<br /><span style="color:#ff6600;">-</span> El número de entradas que se muestre, puede ser 3, 4 ó 5.<br /><br /><span style="color:#ff0000;">****</span>Si el blog tiene fondo oscuro en las entradas, marcamos la opción que dice: “My blog has light text on a dark background”, para que el widget se adapte al color de fondo del blog.<br /><br /><span style="color:#ff6600;">-</span> Finalmente click en Get Widget.</div><br /><a href="http://4.bp.blogspot.com/_wIBBe1JWnPQ/S47H69TQY5I/AAAAAAAAATw/Fm-uYd4R-uk/s1600-h/Entradas+con+imagen.bmp" target="_blank"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 200px; DISPLAY: block; HEIGHT: 137px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5444508815239177106" border="0" alt="" src="http://4.bp.blogspot.com/_wIBBe1JWnPQ/S47H69TQY5I/AAAAAAAAATw/Fm-uYd4R-uk/s200/Entradas+con+imagen.bmp" /></a><div align="center"><span style="color:#3333ff;">Click en la imagen para agrandar</span></div><br /><div align="justify"><strong>2.</strong> En la siguiente página se muestra instrucciones sobre como instalarlo en la plataforma elegida:<br /><strong>Blogger</strong><br /><span style="color:#ff6600;">-</span> Click Install Widget. Si es necesario ingresas a tu blog.<br /><span style="color:#ff6600;">-</span> Seleccionas tu blog, luego Add Widget.<br /><span style="color:#ff6600;">-</span> Para un mejor funcionamiento de este widget, ponerlo debajo de las entradas del blog.<br /><span style="color:#ff6600;">-</span> Finalmente Guardar.<br /><br /><strong>Tener en cuenta:</strong><br />Este Widget se demora en mostrar, dependiendo del número de entradas que se quiera visualizar.<br />Por ejemplo: Mostrar 5 entradas.<br /><br />Wordpress<br />- Hay que descargar un archivo ZIP y descomprimirlo en una carpeta.</div><br /><div align="justify"><strong>Nota:</strong><br /><strong>1.</strong> La frase que lleva el widget en su título “You may also like stories” se cambia automáticamente al español por “Quizás también le interese”, simplemente esperar a que se haga el cambio respectivo. En caso contrario, si queremos poner un texto mucho mejor, editamos el widget y colocamos lo siguiente:<br /><br /><span style="color:#3333ff;"><script>linkwithin_text='El texto aquí:'</script></span><br /><br /><strong>2.</strong> Podemos hacer que el widget se vea en la parte del blog que nosotros queramos, ya sea arriba o abajo, simplemente colocando esta línea de código:<br /><br /><span style="color:#3333ff;"><div class="linkwithin_div"></div></span><br /><br /><strong>3.</strong> Si queremos mostrar este widget dentro del post porque utilizamos entradas ampliables -Leer más o Continúa Leyendo-, buscar lo siguiente:<br /><strong><b:widget id='HTML12' locked='false' title='LinkWithin' type='HTML'></strong> y después agregar lo siguiente (lo que esta de color azul):<br /><br /><b:widget id='HTML12' locked='false' <strong>title='LinkWithin'</strong> type='HTML'><br /><b:includable id='main'><br /><br /><span style="color:#3333ff;"><b:if cond='data:blog.pageType == "item"'></span><br /><br /><!-- only display title if it's non-empty --><br /> <b:if cond='data:title != ""'><br /> <h2 class='title'><data:title/></h2><br /> </b:if><br /> <div class='widget-content'><br /> <data:content/><br /> </div><br /> <b:include name='quickedit'/><br /> <br /><span style="color:#3333ff;"></b:if></span><br /><br /></b:includable><br /><strong></b:widget></strong><br /><br /><span style="color:#ff0000;">**</span> id='HTML12' = Número de Widget.</div><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com114tag:blogger.com,1999:blog-37094370.post-87544621300518947352009-01-03T16:21:00.008-05:002010-03-03T16:14:16.276-05:00¿Cómo añadir Entradas Relacionadas a tu blog? (1) -83-<div align="justify"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 357px; height: 158px;" src="http://4.bp.blogspot.com/_wIBBe1JWnPQ/SV_N6LdOJfI/AAAAAAAAASA/feIsOUeKE4k/s400/PostRelacionados.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5287170886947710450" />Entradas Relacionadas.- Muestra una serie de entradas relacionadas con la actual para proveer a los usuarios de otros temas en el blog que podrían interesarles.<br />El proporcionar una lista de entradas relacionadas tiene como consecuencia el que los usuarios se mantengan más tiempo en tu blog en lugar de tener que recurrir a un buscador para encontrar información sobre un tema que puede ser que ya hayas hablado.<br /><br /><strong>1.</strong> Ir a Diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios. Después agregar el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues al final (antes de <strong>]]></b:skin></strong>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.</div><span class="fullpost"><br /><div align="left">.related-posts{<br />float:center;<br />width:450px;<br />height:100%;<br />min-height:100%;<br />padding-top:5px;<br />padding-left:5px;<br />}<br />#related-posts .widget{<br />padding-left:6px;<br />margin-bottom:10px;<br />background-color:#fff<br />}<br />#related-posts .widget h4, .related-posts h4{<br />font-size: 1.2em;<br />font-weight: bold;<br />color: #666666; <br />font-family: Georgia, "Times New Roman", Times, serif;<br />margin-bottom: 0.75em;<br />margin-top: 0em; <br />padding-top: 0em; <br />} <br />.related-posts a{<br />color:#A10000;<br />} <br />.related-posts a:hover{<br />color:#369;<br />} <br />.related-posts ul{<br />list-style-type:none;<br />margin:0 0 0px 0;<br />padding:0px;<br />text-decoration:bold;<br />font-size:13px;<br />text-color:#000000;<br />} <br />.related-posts ul li{<br />background:transparent url(http://www.blogblog.com/tictac/tictac_orange.gif) no-repeat 0 6px;<br />display:block;<br />list-style-type:none;<br />margin-bottom: 8px; <br />padding-left: 15px;<br />padding-top:0px;<br />}</div><br /><div align="justify"><strong>**</strong> Este código se refiere el estilo de los <strong>Post Relacionados</strong> o Entradas Relacionadas, el cual se podrá realizar cambios utilizando tu criterio.</div><br /><div align="justify"><strong>2.</strong> Agregar el siguiente código entre ]]></b:skin> y </head>. Preferible que lo pegues después de <strong>]]></b:skin></strong>, es decir antes que cualquier otro script que hayas definido después de ]]></b:skin>.</div><br /><div align="left"><script type='text/javascript'><br />//<![CDATA[<br />var relatedTitles = new Array();<br />var relatedTitlesNum = 0;<br />var relatedUrls = new Array();<br /> <br />function related_results_labels(json) {<br />for (var i = 0; i < json.feed.entry.length; i++) {<br />var entry = json.feed.entry[i];<br />relatedTitles[relatedTitlesNum] = entry.title.$t;<br />for (var k = 0; k < entry.link.length; k++) {<br />if (entry.link[k].rel == 'alternate') {<br />relatedUrls[relatedTitlesNum] = entry.link[k].href;<br />relatedTitlesNum++;<br />break;<br />}<br />}<br />}<br />}<br /> <br />function removeRelatedDuplicates() {<br />var tmp = new Array(0);<br />var tmp2 = new Array(0);<br />for(var i = 0; i < relatedUrls.length; i++) {<br />if(!contains(tmp, relatedUrls[i])) {<br />tmp.length += 1;<br />tmp[tmp.length - 1] = relatedUrls[i];<br />tmp2.length += 1;<br />tmp2[tmp2.length - 1] = relatedTitles[i];<br />}<br />}<br />relatedTitles = tmp2;<br />relatedUrls = tmp;<br />}<br />function contains(a, e) {<br />for(var j = 0; j < a.length; j++) if (a[j]==e) return true;<br />return false;<br />}<br /> <br />function printRelatedLabels() {<br />var cuantosPosts = 0;<br />var r = Math.floor((relatedTitles.length - 1) * Math.random());<br />var i = 0;<br />var dirURL = document.URL;<br />document.write('<ul>');<br />while (i < relatedTitles.length && i < 20) {<br />if (relatedUrls[r] != dirURL) {<br />document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '<br />+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');<br />}<br />if (r < relatedTitles.length - 1) {<br />r++;<br />} else {<br />r = 0;<br />}<br />i++;<br />cuantosPosts++;<br /><span style="color:#3333ff;">if (cuantosPosts == 3)</span> {<br />break;<br />}<br />}<br />document.write('</ul>');<br />}<br />//]]><br /></script></div><br /><div align="justify"> <strong>-</strong> if (cuantosPosts == 3).- Se refiere a la cantidad máxima a mostrar, es decir que solamente se verán tres entradas. <br />Puedes cambiarlo por el número de entradas que quieras que se vean</div><br /><div align="justify"><strong>3.</strong> Buscar la siguiente sección de código y agregar lo siguiente (lo que esta de color azul):</div><br /><div align="left"><strong><p class='post-footer-line post-footer-line-2'></strong><span class='post-labels'><br /> <strong><b:if cond='data:post.labels'></strong><br /> <data:postLabelsLabel/><br /> <b:loop values='data:post.labels' var='label'><br /> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><br /><strong><b:if cond='data:label.isLast != "true"'>,</b:if></strong><br /><span style="color:#3333ff;"><b:if cond='data:blog.pageType == "item"'><br /><script expr:src='"/feeds/posts/default/-/" + data:label.name +<br />"?alt=json-in-script&callback=related_results_labels&max-results=10"'<br />type='text/javascript'/><br /></b:if></span><br /> <strong></b:loop></strong><br /> </b:if><br /> </span> </p></div><br /><div align="justify"><strong>4.</strong> Finalmente, una vez que han pegado el código anterior, ahora pegar lo siguiente (lo que está con color azul) después de:</div><br /><div align="left"><strong><p class='post-footer-line post-footer-line-3'/></strong><br /><span style="color:#3333ff;"><div class='related-posts'><br /><b:if cond='data:blog.pageType == "item"'><br /><h4>Entradas Relacionadas</h4><br /><script type='text/javascript'><br />removeRelatedDuplicates();<br />printRelatedLabels();<br /></script><br /></b:if><br /></div></span></div><br /><strong>5.</strong> Guardar.<br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com145tag:blogger.com,1999:blog-37094370.post-5517218580037871252009-01-02T08:37:00.002-05:002009-01-03T15:50:06.697-05:00¿Como añadir una Lista de Blogs? -82-<div align="justify"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 130px; height: 400px;" src="http://1.bp.blogspot.com/_wIBBe1JWnPQ/SV4XUXSbiMI/AAAAAAAAAR4/GyUXjpl79CI/s400/ListaBlogs.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5286688651195680962" />La Lista de Blog mejora la lista de enlaces de nuestros elementos de página, utilizando feeds RSS o Atom para mostrar información actualizada con frecuencia, títulos de posts y resúmenes. <br />Puedes utilizar la Lista de Blog para poner un listado de los enlaces de tus blogs favoritos en la barra lateral, o utilizarlo para categorizar los blogs que sueles leer.<span class="fullpost"><br />La Lista de Blog funciona muy bien para cualquier página que tiene feeds RSS o Atom, así que puedes ser creativo: enlaza sitios de noticias, podcasts, Twitter stream, resultados de búsqueda o cualquier otra información con un feed.<br /><br /><strong><span style="color:#3333ff;">»</span></strong> Ir a diseño de la plantilla, luego en Elementos de la página añadimos un Gadget o Widget y seleccionas Lista de Blogs.<br /><strong>-</strong> Agregar un título, como por ejemplo: Mis blogs favoritos, los blogs que leo, mi lista de blogs, blogs de tu interés, etc.<br /><strong>-</strong> Ordenar alfabéticamente o por última fecha de actualización.<br /><strong>-</strong> Mostrar todos los enlaces o esconderlos detrás de un enlace de "Ver todos".<br /><br /><strong><strong>**</strong></strong> Para agregar un blog a tu lista puedes hacerlo de 2 maneras:<br />- Añadir por URL. (http://ayudaparaelblog.blogspot.com)<br />- Blogs de los que soy asiduo.</div><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com35tag:blogger.com,1999:blog-37094370.post-71857087617666412862008-12-04T21:03:00.001-05:002009-01-03T15:49:51.416-05:00Conoce a los "Seguidores" de tu blog -81-<div align="justify"><img id="BLOGGER_PHOTO_ID_5275771805834151986" style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 174px; CURSOR: hand; HEIGHT: 264px; TEXT-ALIGN: center" alt="" src="http://3.bp.blogspot.com/_wIBBe1JWnPQ/STdOgVLECDI/AAAAAAAAAQ4/ejvYY1FJKTc/s320/Seguidores5.bmp" border="0" />¿Tienes un blog favorito y deseas que el autor y los lectores conozcan que tú eres un seguidor de su blog? <br />Pues ahora puedes hacer un seguimiento de los blogs con el widget <strong>Seguidores</strong>. Incluso puedes estar al tanto de los blogs que sigues a través de la <strong>Lista de lectura </strong>ubicada bajo la lista de blogs del escritorio.<br /><strong>Seguidores</strong> del blog se utiliza para crear una especie de comunidad en el blog, en la cual se encuentran personas que siguen tu blog, es decir que lo leen, pero normalmente no se da. <br />Por ejemplo, tú lees mi blog y yo leo el tuyo, esto es como decir <strong>“comenta en mi blog que yo comentare en el tuyo”</strong>, el cual he visto que no siempre sea cierto.<br />Con esto podrás ver quienes son tus seguidores, seguir así mismo a otros blogs que nos interesan, ver el número de seguidores en nuestro panel y leer las últimas entradas de los blogs que seguimos.<br /><br /><strong>¿Cómo añadir el widget “Seguir” a tu blog?</strong><span class="fullpost"><br /><strong>1.</strong> Ir a diseño de la plantilla, luego en Elementos de la página añadimos un Gadget o Widget y seleccionas Seguidores.<br /><strong>2.</strong> Después le introduces el título que desees para tu widget Seguir. Una vez hayas elegido el título, haz clic en Guardar, para que se agregue el widget Seguir a tu blog.<br /><strong>Resultado:</strong><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 217px; height: 129px;" src="http://2.bp.blogspot.com/_wIBBe1JWnPQ/STdPmst27VI/AAAAAAAAARA/RI2Wh5QOVp0/s320/Seguir.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5275773014744952146" /><strong>* </strong>Ahora los lectores pueden ir a tu blog y ser Seguidores. Una vez que tus lectores se conviertan en seguidores de tu blog, la imagen del perfil se mostrará en el widget Seguir. Además se mostrará una cuenta acumulativa de tus seguidores junto al nombre del blog en el escritorio.<br /><a href="http://2.bp.blogspot.com/_wIBBe1JWnPQ/STdWKsQ-ePI/AAAAAAAAARY/uLi8yEh9sQ0/s1600-h/Seguir5.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 96px;" src="http://2.bp.blogspot.com/_wIBBe1JWnPQ/STdWKsQ-ePI/AAAAAAAAARY/uLi8yEh9sQ0/s320/Seguir5.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5275780230168869106" /></a><strong>¿Cómo puedo hacerme seguidor de un blog?</strong><br /><strong>3.</strong> Visitar un blog que haya añadido el widget Seguir y hacer clic en el enlace Seguir este blog o en Seguir.<br /><strong>4.</strong> Verás una ventana emergente con las opciones para seguirlo de forma pública o anónima.<br />* Público: Al seguir un blog de forma pública, aparece la imagen de tu perfil y un enlace a tu perfil de Blogger en el widget Seguidores del blog.<br />* Anónimo: Al seguir un blog de forma anónima, la imagen y el enlace de tu perfil NO se mostrarán en el widget Seguidores del blog.<br />Finalmente, seleccionar el modo en que deseas seguir el blog y luego haz clic en Follow (Seguir).<br /><a href="http://2.bp.blogspot.com/_wIBBe1JWnPQ/STdS4Z2nvaI/AAAAAAAAARI/0t0uMtRNclc/s1600-h/seguir2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 200px; height: 177px;" src="http://2.bp.blogspot.com/_wIBBe1JWnPQ/STdS4Z2nvaI/AAAAAAAAARI/0t0uMtRNclc/s200/seguir2.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5275776617453960610" /></a><br /><strong>5.</strong> Cuando te hagas seguidor de un blog, dicho blog también se añadirá a tu Lista de lectura del escritorio de Blogger. Además, puedes hacerte seguidor de cualquier blog o URL (aun si el blog no tiene el widget Seguidores) añadiendo el blog a tu <strong>Lista de lectura</strong> en el escritorio.<br /><br /><strong>¿Cómo utilizo la Lista de lectura?</strong><br /><strong>6.</strong> Con la Lista de lectura, puedes leer las últimas entradas de tus blogs favoritos en el Escritorio. <br />La Lista de lectura, ubicada bajo la lista de blogs del escritorio, te permite suscribirte a cualquier blog con un feed. Éste se actualizará al instante cada vez que se publique una nueva entrada en cualquier blog de la Lista de lectura. <br /><br /><strong>7.</strong> Para añadir un blog a la <strong>Lista de lectura </strong>tienes que hacer clic en la pestaña Blogs que sigo y luego Añadir.<br /><a href="http://3.bp.blogspot.com/_wIBBe1JWnPQ/STdZYJ-xwlI/AAAAAAAAARo/6FtuLfgOyG4/s1600-h/Lista.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 222px;" src="http://3.bp.blogspot.com/_wIBBe1JWnPQ/STdZYJ-xwlI/AAAAAAAAARo/6FtuLfgOyG4/s320/Lista.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5275783760018784850" /></a><strong>8.</strong> Después, introduce la URL del blog que te gustaría seguir. Puedes añadir tantos blogs como desees haciendo clic en Añadir otro. Una vez que hayas añadido todos tus blogs favoritos, haz clic en Añadir. <br /><a href="http://2.bp.blogspot.com/_wIBBe1JWnPQ/STdTteDvwXI/AAAAAAAAARQ/GQSJ1wkV4b4/s1600-h/seguir3.bmp"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 126px;" src="http://2.bp.blogspot.com/_wIBBe1JWnPQ/STdTteDvwXI/AAAAAAAAARQ/GQSJ1wkV4b4/s320/seguir3.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5275777529115820402" /></a><br /><strong>*</strong> Ahora, cada vez que se actualicen los blogs, se mostrará la última entrada en la <strong>Lista de lectura</strong> bajo la sección "Elementos".<br /><a href="http://4.bp.blogspot.com/_wIBBe1JWnPQ/STdXcSNhEbI/AAAAAAAAARg/bRT0PWUhrnc/s1600-h/seguir4.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 143px;" src="http://4.bp.blogspot.com/_wIBBe1JWnPQ/STdXcSNhEbI/AAAAAAAAARg/bRT0PWUhrnc/s320/seguir4.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5275781631924310450" /></a></div></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com55tag:blogger.com,1999:blog-37094370.post-56360690688531478732008-11-23T19:33:00.002-05:002008-11-23T19:48:31.594-05:00Paginación en el blog -80-<div align="justify"><img id="BLOGGER_PHOTO_ID_5272003180716132306" style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 320px; CURSOR: hand; HEIGHT: 194px; TEXT-ALIGN: center" alt="" src="http://1.bp.blogspot.com/_wIBBe1JWnPQ/SSnq9elQh9I/AAAAAAAAAQM/wUOT0J0fhhg/s320/Paginacion.bmp" border="0" />La <strong>paginación</strong> es cualquier tipo de sistema de control que permite al usuario navegar a través de las páginas de resultados de búsqueda, archivos, o cualquier otro tipo de contenidos.<br />La paginación se encuentra también en algunos blogs, foros de debate y en la web de comics.<br /><br /><strong>1.</strong> Ir a diseño de la plantilla, luego en Elementos de la página añadimos un Gadget, seleccionas HTML/Javascript y pegas el siguiente código:</div><span class="fullpost"><br /><div align="left"><style><br />.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;<br />}<br /><br />.showpageArea a {border: 1px solid #505050;<br />color: #000000;font-weight:normal;<br />padding: 3px 6px !important;<br />padding: 1px 4px ;margin:0px 2px;<br />text-decoration: none;<br />}<br /><br />.showpageArea a:hover { <br />font-size:11px; <br />border: 1px solid #333;<br />color: #000000;<br />background-color: #FFFFFF;<br />}<br /><br />.showpageNum a {border: 1px solid #505050;<br />color: #000000;font-weight:normal;<br />padding: 3px 6px !important;<br />padding: 1px 4px ;margin:0px 2px;<br />text-decoration: none;<br />}<br /><br />.showpageNum a:hover {<br />font-size:11px; <br />border: 1px solid #333;<br />color: #000000;<br />background-color: #FFFFFF;<br />}<br /><br />.showpagePoint {font-size:10px;<br />padding: 2px 4px 2px 4px; <br />margin: 2px;<br />font-weight: bold;<br />border: 1px solid #333;<br />color: #fff;<br />background-color: #000000;<br />}<br /><br />.showpage a:hover {font-size:11px; <br />border: 1px solid #333;<br />color: #000000;<br />background-color: #FFFFFF;<br /><br />} <br />.showpageNum a:link,.showpage a:link {<br />font-size:11px;<br />padding: 2px 4px 2px 4px; <br />margin: 2px;<br />text-decoration: none;<br />border: 1px solid #0066cc;<br />color: #0066cc;<br />background-color: #FFFFFF;<br />}<br /><br />.showpageNum a:hover {font-size:11px; <br />border: 1px solid #333;<br />color: #000000;<br />background-color: #FFFFFF;<br />}<br /></style><br /><br /><script type="text/javascript"><br /><br />function showpageCount(json) {<br />var thisUrl = location.href;<br />var htmlMap = new Array();<br />var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";<br />var isLablePage = thisUrl.indexOf("/search/label/")!=-1;<br />var isPage = thisUrl.indexOf("/search?updated")!=-1;<br />var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : ""; <br />thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;<br />var thisNum = 1;<br />var postNum=1;<br />var itemCount = 0;<br />var fFlag = 0;<br />var eFlag = 0;<br />var html= '';<br />var upPageHtml ='';<br />var downPageHtml ='';<br /><br />var pageCount=5; <br />var displayPageNum=1; <br />var firstPageWord = 'Primera'; <br />var endPageWord = 'Última'; <br />var upPageWord ='Anterior';<br />var downPageWord ='Siguiente';<br /><br />var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';<br /><br />for(var i=0, post; post = json.feed.entry[i]; i++) {<br />var timestamp = post.published.$t.substr(0,10);<br />var title = post.title.$t;<br />if(isLablePage){<br />if(title!=''){<br />if(post.category){<br />for(var c=0, post_category; post_category = post.category[c]; c++) {<br />if(encodeURIComponent(post_category.term)==thisLable){ <br />if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />if(thisUrl.indexOf(timestamp)!=-1 ){<br />thisNum = postNum; <br />}<br /><br />postNum++;<br />htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;<br />} <br />} <br />}<br />}//end if(post.category){<br /><br />itemCount++;<br />}<br /><br />}else{<br />if(title!=''){<br />if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />if(thisUrl.indexOf(timestamp)!=-1 ){<br />thisNum = postNum;<br />}<br /><br />if(title!='') postNum++;<br />htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;<br />} <br />}<br />itemCount++;<br />}<br />}<br /><br />for(var p =0;p< htmlMap.length;p++){<br />if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br />if(fFlag ==0 && p == thisNum-2){<br />if(thisNum==2){<br />if(isLablePage){<br />upPageHtml = labelHtml + upPageWord +'</a></span>'; <br />}else{<br />upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';<br />}<br />}else{<br />upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';<br />}<br /><br />fFlag++;<br />}<br /><br />if(p==(thisNum-1)){<br />html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';<br />}else{<br />if(p==0){<br />if(isLablePage){<br />html = labelHtml+'1</a></span>'; <br />}else{<br />html += '<span class="showpageNum"><a href="/">1</a></span>'; <br />}<br />}else{<br />html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';<br />}<br />}<br /><br />if(eFlag ==0 && p == thisNum){<br />downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';<br />eFlag++;<br />}<br />}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br />}//end for(var p =0;p< htmlMap.length;p++){<br /><br />if(thisNum>1){<br />if(!isLablePage){<br />html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';<br />}else{<br />html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';<br />}<br />}<br /><br />html = '<div class="showpageArea"><span style="font-size:10px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Página '+thisNum+' de '+(postNum-1)+': </span>'+html;<br /><br />if(thisNum<(postNum-1)){<br />html += downPageHtml;<br />html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';<br />}<br /><br />if(postNum==1) postNum++; <br />html += '</div>';<br /><br />if(isPage || isFirstPage || isLablePage){<br />var pageArea = document.getElementsByName("pageArea");<br />var blogPager = document.getElementById("blog-pager");<br /><br />if(postNum <= 2){<br />html ='';<br />}<br /><br />for(var p =0;p< pageArea.length;p++){<br />pageArea[p].innerHTML = html;<br />}<br /><br />if(pageArea&&pageArea.length>0){<br />html ='';<br />}<br /><br />if(blogPager){<br />blogPager.innerHTML = html;<br />}<br />}<br /><br />}<br /></script><br /><br /><script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script></div><br /><div align="justify"><span style="color:#3333ff;"><strong>Explicación</strong></span>:<br />- <strong>.showpageArea</strong> .- Es el rectángulo donde se va a mostrar la paginación. <br /><br />- <strong>.showpageArea a</strong> .- Son los enlaces en general (los números de las páginas y los textos Anterior y Siguiente). Podemos usar cualquier propiedad, como ponerles una imagen y un borde.<br /><br />- <strong>.showpageArea a:hover</strong> .- Se refiere al efecto gráfico cuando colocamos el ratón encima de la paginación.<br /><br />- <strong>.showpageNum a</strong> y <strong>.showpageNum a:hover</strong> .- Son los enlaces con los números de las páginas si es que queremos que se vean diferentes.<br /><br />- <strong>.showpage a</strong> y <strong>.showpage a:hover </strong>.- Son los enlaces con los textos si es que - queremos que se vean diferentes.<br /><br />- <strong>.showpagePoint</strong> .- Es el texto que se muestra en la página actual, es decir los números.<br /><br />- <strong>var pageCount</strong> .- La cantidad de posts que se mostrarán por página.<br />Si var pageCount=4 entonces se mostraran por pagina 4 artículos publicados.<br /><br />- <strong>var displayPageNum</strong> .- La cantidad de páginas listadas. <br />Si var displayPageNum=1 entonces se listarán 1 más 1 página, serian 2.<br /><br /><strong>2.</strong> Finalmente, después de haber pegado el código en un HTML/Javascript necesitas arrastrar el widget y ponerlo debajo de Entradas del blog.<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 246px;" src="http://img241.imageshack.us/img241/8351/paginacion2fq2.gif" border="0" alt=""/><br /><span style="color:#3333ff;"><strong>Resultado</strong></span>:<br /><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 324px; height: 44px;" src="http://4.bp.blogspot.com/_wIBBe1JWnPQ/SSnsfK0klpI/AAAAAAAAAQU/jLozoGeXQhA/s400/Paginacion1.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5272004859038832274" /><br />- Por ejemplo, si deseas eliminar <strong>Página 1 de 88</strong> entonces tendrías que eliminar el siguiente código que se encuentra casi al final:</div><br /><div align="left">html = '<div class="showpageArea"><span style="font-size:10px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Página '+thisNum+' de '+(postNum-1)+': </span>'+html;</div><br />Via: <a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-menu-widget-for-blogger.html" target="_blank"><span style="color:#3333ff;"><u>Blogger Accessories</u></span></a></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com70tag:blogger.com,1999:blog-37094370.post-24414967450116973362008-11-21T15:37:00.001-05:002008-11-21T15:42:36.929-05:00¿Cómo insertar el formulario para comentarios en los post? -79-<div align="justify">Este formulario para comentarios aparecerá al final de cada post y es más conveniente para los lectores porque pueden publicar un comentario rápidamente.<br /><br /><strong>1.</strong> Ir a Configuración. Después a Comentarios. De ahí, en donde dice: Ubicación del formulario de comentarios, escogemos la siguiente opción:<br /><br /><a href="http://2.bp.blogspot.com/_wIBBe1JWnPQ/SScRvuCO1iI/AAAAAAAAAP0/n3HH917iCVY/s1600-h/Comentario1.bmp"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 54px;" src="http://2.bp.blogspot.com/_wIBBe1JWnPQ/SScRvuCO1iI/AAAAAAAAAP0/n3HH917iCVY/s400/Comentario1.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5271201400369370658" /></a><br />* No te olvides que tienes que Guardar valores.<br /><br /><strong>2.</strong> Finalmente vas a tu blog y verás el siguiente resultado:<span class="fullpost"> <br /><a href="http://2.bp.blogspot.com/_UrIU2wmCWlo/SScXp7tVq5I/AAAAAAAABRw/gtYMaACe81U/s1600-h/FormularioComentario.bmp"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 193px;" src="http://2.bp.blogspot.com/_UrIU2wmCWlo/SScXp7tVq5I/AAAAAAAABRw/gtYMaACe81U/s400/FormularioComentario.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5271207898030386066" /></a><p align="center"><span style="color:#3333ff;">Click en las imagenes para agrandarla</span></p><a href="http://4.bp.blogspot.com/_UrIU2wmCWlo/SScaayMHj1I/AAAAAAAABSI/DpzRuYlY1vQ/s1600-h/VistaComentario.bmp"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 200px; height: 174px;" src="http://4.bp.blogspot.com/_UrIU2wmCWlo/SScaayMHj1I/AAAAAAAABSI/DpzRuYlY1vQ/s200/VistaComentario.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5271210936311975762" /></a></div></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com77tag:blogger.com,1999:blog-37094370.post-54298233593422152982008-08-23T13:48:00.001-05:002008-08-23T13:52:34.575-05:00¿Cómo mostrar los comentarios numerados? -78-<div align="justify"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_wIBBe1JWnPQ/SLBbv5RNDII/AAAAAAAAAL4/H6JaN9iFgEw/s320/comentarionumerado.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5237787245016845442" /><strong>1</strong>. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantilla de artilugios, agregar el siguiente código entre <b:skin><![CDATA[ <strong>y</strong> ]]></b:skin>. Preferible que lo pegues al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para eliminarlo.</div><br /><div align="left">.CommentIndex{<br />float:right;<br />position:relative;top:25px;left:3px;<br />margin-left:-200px;<br />font: italic bold 30pt 'Century Gothic','Trebuchet MS';<br />color:red;<br />opacity:0.3;<br />-moz-opacity:0.3;<br />filter:alpha(Opacity=30);<br />}<br /> <br />.CommentIndex:hover{<br />font-size:80px;<br />}</div><span class="fullpost"><br /><div align="justify"><strong>Explicación:</strong><br />- En float, puedes cambiarlo de posición, sea left (izquierda) o right (derecha).<br />- En margin, ver <a href="http://htmlhelp.com/es/reference/css/box/margin.html" target="_blank"><span style="color:#3333ff;"><u>aquí</u></span></a>.<br />- En font y color, si deseas le cambias.<br />- En opacity, el número aparecerá opaco o transparente (sobre puesto), si deseas lo eliminas y desaparecerá lo transparente.</div><br /><div align="justify"><strong>2</strong>. Buscar lo siguiente:<br /><strong><dl id='comments-block'></strong><br /><b:loop values='data:post.comments' var='comment'></div><br /><div align="justify"><strong>3</strong>. Agregar lo siguiente (lo que está con color azul) después de:</div><br /><div align="left"><dl id='comments-block'><br /><span style="color:#3333ff;"><script type='text/javascript'>Index = 1;</script></span><br /><b:loop values='data:post.comments' var='comment'></div><br /><div align="justify"><strong>4</strong>. Debajo de: <strong><b:loop values='data:post.comments' var='comment'></strong> pegar lo siguiente:</div><br /><div align="left"><span style="color:#3333ff;"><span class='CommentIndex' title='solo comentario enumerado'><script type='text/javascript'>document.write(Index); Index= Index+1 ;</script></span></span></div><br /><div align="justify"><strong>5</strong>. Finalmente, guardamos los cambios.</div><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com61tag:blogger.com,1999:blog-37094370.post-78582747382462619652008-08-11T23:16:00.002-05:002008-08-23T11:30:26.413-05:00¿Cómo mostrar la foto del autor del comentario en la página principal? -77-<div align="justify"><a href="http://3.bp.blogspot.com/_wIBBe1JWnPQ/SJ-Rjp7LaKI/AAAAAAAAALw/sDyp0loHtW4/s1600-h/FotoAutorComentario.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_wIBBe1JWnPQ/SJ-Rjp7LaKI/AAAAAAAAALw/sDyp0loHtW4/s320/FotoAutorComentario.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5233061333763319970" /></a><strong>1.</strong> Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios, buscar lo siguiente:<br /><strong><dl id='comments-block'></strong><br /><b:loop values='data:post.comments' var='comment'><br /><br /><strong>2.</strong> Agregar lo siguiente (lo que está con color azul) después de:<br /><strong><b:loop values='data:post.comments' var='comment'></strong></div><span class="fullpost"><br /><div align="left"><span style="color:#3333ff;"><div style="clear:both"><br /><dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'><br /></dt><br /><b:if cond='data:comment.authorUrl'><br /><script type="text/javascript"> <br />if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':'<data:comment.authorUrl/>'});<br /></script> <br /><b:else/><br /><script type="text/javascript"> if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':''});<br /></script> <br /></b:if></span><br /><br /><dt class='comment-author' expr:id='"comment-" + data:comment.id'><br /> <a expr:name='"comment-" + data:comment.id'/><br /> <b:if cond='data:comment.authorUrl'><br /> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br /> <b:else/><br /> <data:comment.author/><br /> </b:if><br /> <data:commentPostedByMsg/><br /> </dt><br /><br /> <b:if cond='data:comment.author == data:post.author'><br /> <dd class='comment-body-author'><br /> <p><data:comment.body/></p><br /> </dd><br /> <b:else/><br /><br /> <dd class='comment-body'><br /> <b:if cond='data:comment.isDeleted'><br /> <span class='deleted-comment'><data:comment.body/></span><br /> <b:else/><br /> <p><data:comment.body/></p><br /> </b:if><br /> </dd><br /><br /> </b:if><br /><br /> <dd class='comment-footer'><br /> <span class='comment-timestamp'><br /> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'><br /> <data:comment.timestamp/><br /> </a><br /> <b:include data='comment' name='commentDeleteIcon'/><br /> </span><br /> </dd><br /><br /><span style="color:#3333ff;"></div></span><br /><br /> <strong></b:loop></strong><br /> </dl><br /></div><br /><div align="justify"><strong>Explicación:</strong><br /><div style="clear:both"><br /><dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'><br />- En float, puedes cambiarlo de posición, sea left (izquierda) o right (derecha).<br />- En margin, ver <a href="http://htmlhelp.com/es/reference/css/box/margin.html" target="_blank"><span style="color:#3333ff;"><u>aquí</u></span></a>.</div><br /><div align="justify"><strong>3.</strong> Pegar lo siguiente antes de: </body> (esto se encuentra al final de la plantilla)</div><br /><div align="left"><span style="color:#3333ff;"><script type='text/javascript'><br />//<![CDATA[ <br />function commentPhotoDo() { <br />var tag; <br />for(var i = 0; i < commentPhotoIds.length; i++) { <br />tag = document.createElement('script'); <br />tag.type = 'text/javascript'; <br />tag.src = 'http://scrape.singpolyma.net/avatar.php?maxwidth=70&url='+encodeURIComponent(commentPhotoIds[i].url)+'&id='+encodeURIComponent(commentPhotoIds[i].id)+'&defaultimage='+encodeURIComponent('http://img139.imageshack.us/img139/1011/defaultavatarad7.png'); <br />document.body.appendChild(tag); <br />}//end for var i in commentPhotoIds <br />}//end function commentPhotoDo <br />if(typeof(commentPhotoIds) != "undefined") commentPhotoDo(); <br />//]]><br /></script></span></div><br /><div align="justify">* Agregar tu propia imagen en donde dice: &defaultimage='+encodeURIComponent('<strong>http://aquí-la-dirección-de-tú-imagen</strong>'), porque algunos no agregan su foto y aparecerá una imagen como un anónimo(?), pero si están registrados en Blogger (con-enlace). <br />En el caso del anónimo aparecerá simplemente la imagen que ustedes han puesto.<br />- Con respecto a la imagen tiene que ser de ancho 60px por 45px de alto aproximadamente. <br />** px.- pixeles<br /><br /><strong>4.</strong> Finalmente, guardamos los cambios.</div><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com31tag:blogger.com,1999:blog-37094370.post-80659753359062354462008-06-24T00:00:00.008-05:002008-12-08T18:31:44.793-05:00¿Cómo calificar los post de tu blog? -76-<div align="justify"><img id="BLOGGER_PHOTO_ID_5215302536205194162" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://1.bp.blogspot.com/_wIBBe1JWnPQ/SGB6Blq0U7I/AAAAAAAAAK4/SOQKMvb_vf0/s320/Estrellas.JPG" border="0" />Un <strong>Widget</strong> es uno de esos artilugios que habitualmente adornan las barras laterales de los blogs.<br /><br />Si quieres saber lo que piensan tus lectores acerca del contenido de tu blog o de los posts de tu blog, puedes añadir el widget <span style="color:#3333ff;">Outbrain ratings</span> y tus lectores podrán calificar cada post con una determinada cantidad de estrellas (1 al 5) el contenido de tu blog o página web.<span class="fullpost"><br />El <strong>Outbrain ratings</strong> es el más completo y elegante. Sencillo de instalar y funciona en las plataformas Blogger, TypePad, WordPress, Drupal, javascript y FeedBurner RSS feed.<br />El widget inserta automáticamente el selector de <strong>5 estrellas</strong>, en la parte inferior de cada entrada que se publica.<br />Te recomiendo que te registres para que lleves un registro de tus propias votaciones y asi poder solicitar las estadísticas de tu blog.<br />Outbrain ratings, incluye soporte para varios idiomas, incluyendo el español. Además te muestra en el blog las <strong>3 Publicaciones más Populares</strong>.<br /><br /><strong>1.</strong> Ingresar a <a href="http://www.outbrain.com/get/ratings"><span style="color:#3333ff;"><u>Outbrain ratings</u></span></a>.<br /><strong>2.</strong> Selecionar la plataforma que esta alojado tu blog (Blogger, WordPress, TypePad, Drupal u otros).<br /><strong>3.</strong> Registrarse (Opcional). Caso contrario instalas el widget.<br />Ejemplo:<br /><a href="http://1.bp.blogspot.com/_wIBBe1JWnPQ/SJX0-orbUvI/AAAAAAAAALY/psSkg72HgJo/s1600-h/CalificarPost.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_wIBBe1JWnPQ/SJX0-orbUvI/AAAAAAAAALY/psSkg72HgJo/s320/CalificarPost.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5230355899169329906" /></a><p align="center"><span style="color:#3333ff;">Click en la imagen para agrandarla</span></p><br /><strong>4.</strong> Recibirás un correo en caso de que te hayas registrado.<br /><strong>5.</strong> En caso de que no te hayas registrado te aparecera lo siguiente:<br /><a href="http://3.bp.blogspot.com/_wIBBe1JWnPQ/SJX2KYxy4TI/AAAAAAAAALg/KetCx1r2Ln0/s1600-h/CalificarPost01.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_wIBBe1JWnPQ/SJX2KYxy4TI/AAAAAAAAALg/KetCx1r2Ln0/s320/CalificarPost01.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5230357200571130162" /></a><p align="center"><span style="color:#3333ff;">Click en la imagen para agrandarla</span></p><br /><strong>6.</strong> Finalmente:<a href="http://2.bp.blogspot.com/_wIBBe1JWnPQ/SGB-KokhCVI/AAAAAAAAALI/ME9yoI8E-yE/s1600-h/Calificar+un+post.JPG" target="_blank"><img id="BLOGGER_PHOTO_ID_5215307089649404242" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://2.bp.blogspot.com/_wIBBe1JWnPQ/SGB-KokhCVI/AAAAAAAAALI/ME9yoI8E-yE/s320/Calificar+un+post.JPG" border="0" /></a><p align="center"><span style="color:#3333ff;">Click en la imagen para agrandarla</span></p></div><br />Existen otras páginas como: <br /><a href="http://spotback.com/widgets/intro" target="_blank"><span style="color:#3333ff;"><u>Spotback</u></span></a><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com57tag:blogger.com,1999:blog-37094370.post-4509399379109571812007-12-09T12:18:00.000-05:002008-12-08T18:31:45.051-05:00¿Como incluir una barra "Cargando Página"? -75-<div align="justify"><img id="BLOGGER_PHOTO_ID_5142024232649969922" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://3.bp.blogspot.com/_wIBBe1JWnPQ/R1wjy8WNUQI/AAAAAAAAAKw/mgcmD8B1hJg/s320/loading.gif" border="0" /><br />Permite insertar una barra en el centro de la página que especifica que el sitio está cargando su contenido. Una vez finalizado, se elimina la barra y muestra la página completa.<br /><br /><strong>1</strong>. Ir a Plantilla, luego a Edición de HTML y antes de </head> pegar el siguiente código:</div><br /><div align="left"><span style="color:#3333ff;"><script type='text/javascript'> <br />window.onload = detectarCarga; <br />function detectarCarga(){<br />document.getElementById("imgLOAD").style.display="none";<br />}<br /></script></span><br /></div><span class="fullpost"><br /><div align="justify"><strong>2</strong>. Después ir a Elementos de página y pegar el siguiente código:</div><br /><div align="left"><span style="color:#3333ff;"><div id='imgLOAD' style="TEXT-ALIGN: center"><br /><b>Cargando</b><br /><IMG src="http://i151.photobucket.com/albums/s137/andrewmusic1/loading.gif"><br /></div></span><br /></div><br /><div align="justify"><strong>*</strong> Después lo arrastramos en donde mejor nos parezca.<br /><br /><strong>Nota:</strong><br />Esto también lo podemos poner dentro del código de la plantilla.</div><br />Existen páginas que te ofrecen diferentes tipos de barras Cargando Página: <br /><a href="http://www.napyfab.com/ajax-indicators/"><span style="color:#3333ff;"><u>Napyfab</u></span></a> <br /><a href="http://www.loadinfo.net/"><span style="color:#3333ff;"><u>Load Info</u></span></a> <br /><a href="http://mentalized.net/activity-indicators/"><span style="color:#3333ff;"><u>Activity Indicators</u></span></a><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com48tag:blogger.com,1999:blog-37094370.post-70195681938661907862007-10-11T23:29:00.015-05:002008-12-08T18:31:45.067-05:00¿Cómo incluir una Radio Online en el Blog? -74-<div align="justify"><img id="BLOGGER_PHOTO_ID_5120244460715526674" style="FLOAT: right; MARGIN: 0px 0px 10px 10px; CURSOR: hand" alt="" src="http://2.bp.blogspot.com/_wIBBe1JWnPQ/Rw7DNXQcShI/AAAAAAAAAKg/FgySHR6C59Y/s200/EmisoraOnline.jpg" border="0" />Si deseas que tu radio favorita suene en tu blog, lo podrás hacer utilizando un simple código que a continuación te proporcionare:<br /><br /><strong>1.</strong> Necesitamos obtener la URL de la radio, es decir su dirección por donde transmite su señal. Generalmente se puede obtener desde el mismo reproductor que la emisora tiene en su página web, entonces tendrás que escuchar la radio, para luego poner el mouse sobre el reproductor, después presionar el botón derecho, el cual se abrirá una ventana y clic en Propiedades, es ahí en donde veras la URL por la cual transmite su música.<br /><br />2. Pegar el siguiente código en donde quieras, sea en la Sidebar o en la Columna principal:</div><span class="fullpost"><br /><div align="left"><span style="color:#3333ff;"><EMBED type="application/x-mplayer2" pluginspage="http://www.microsoft.com/windows/windowsmedia/en/Download/default.asp?tcode=9#location2" src="http://URL-de-la-Radio-Online" name="MC1" height=45 width=280 AutoStart=False ShowStatusBar=True ShowGotoBar=Talse TransparentAtStart=true bbclient=0></EMBED></span></div><br /><div align="justify">* En donde dice la URL de la radio online, pones la dirección de la emisora.<br />* Para que funcione debes cambiar: <strong>AutoStart=False</strong> por AutoStart=True. <br /><br /><strong>Nota:</strong> Por ejemplo, puedes poner el mouse sobre el reproductor, luego seguir los pasos anteriormente mencionados y verás que la dirección por donde se transmite la radio que estás escuchando es: <strong>http://216.246.4.18/asxfiles-live/ny60winlive7001.asx</strong></div><br /><div align="center"><EMBED type="application/x-mplayer2" pluginspage = "http://www.microsoft.com/windows/windowsmedia/en/Download/default.asp?tcode=9#location2" src="http://216.246.4.18/asxfiles-live/ny60winlive7001.asx" name="MC1" height=53 width="280" AutoStart="False" ShowStatusBar="True" ShowGotoBar="Talse" TransparentAtStart="true" bbclient="0"></EMBED><br />Estas escuchando Kiss Radio (España)</div><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com97tag:blogger.com,1999:blog-37094370.post-43680604318681161672007-09-07T19:25:00.000-05:002007-09-07T19:28:25.299-05:00¿Como hacer una Nube de Etiquetas? -73-<div align="justify">Una <strong>nube de etiquetas</strong> es una representación visual de las “etiquetas” o palabras clave usadas en un sitio web. Generalmente este listado de palabras se ordena alfabéticamente y con diferente tamaño según su relevancia.<br /><br />Para empezar a poner nuestra nube de etiquetas en el blog tenemos que <a href="http://ayudaparaelblog.blogspot.com/2007/04/cmo-poner-etiquetas-en-blogger-50.html"><span style="color:#3333ff;"><u>etiquetar</u></span></a> todos nuestros post.<br /><br /><strong>1.</strong> Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios y tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>).</div><br /><div align="left">/* Label Cloud Styles<br />----------------------------------------------- */<br />#labelCloud {text-align:center;font-family:arial,sans-serif;}<br />#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}<br />#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}<br />#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}<br />#labelCloud a{text-decoration:none}<br />#labelCloud a:hover{text-decoration:underline}<br />#labelCloud li a{}<br />#labelCloud .label-cloud {}<br />#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}<br />#labelCloud .label-cloud li:before{content:"" !important}</div><span class="fullpost"><br /><div align="justify"><strong>2.</strong> Después agregar el siguiente código entre ]]></b:skin> y </head>. Preferible que lo pegues casi al final (antes de </head>).</div><br /><div align="left"><script type='text/javascript'><br />// Label Cloud User Variables<br />var lcBlogURL = 'http://ayudaparaelblog.blogspot.com';<br />var maxFontSize = 20;<br />var maxColor = [0,0,255];<br />var minFontSize = 10;<br />var minColor = [0,0,0];<br />var lcShowCount = false;<br /></script></div><br /><div align="justify"><strong>3.</strong> Buscar el widget con el id Label1 y con el title Etiquetas. Esto lo encuentras donde dice:<br /><div id='sidebar-wrapper'><br /><strong><b:section class='sidebar' id='sidebar' preferred='yes'></strong></div><br /><div align="left"><b:widget id='Label1' locked='false' title='Etiquetas' type='Label'><br /><b:includable id='main'><br /><b:if cond='data:title'><br /><h2><data:title><h2><br /><b:if><br /><div class='widget-content'><br /><ul><br /><b:loop values='data:labels' var='label'><br /><li><br /><b:if cond='data:blog.url == data:label.url'><br /><data:label.name/><br /><b:else/><br /><a expr:href='data:label.url'><?xml:namespace prefix = data /><?xml:namespace prefix = data /><data:label.name></data:label.name></a><br /></b:if><br />(<data:label.count/>)<br /></li><br /></b:loop><br /></ul><br /><br /><b:include name='quickedit'/><br /></div><br /></b:includable><br /></b:widget></div><br /><div align="left"><strong>4.</strong> Una vez ubicado, tienes que reemplazar todo el código anterior por lo siguiente:</div><br /><div align="left"><span style="color:#3333ff;"><b:widget id='Label1' locked='false' title='Label Cloud' type='Label'><br /><b:includable id='main'><br /> <b:if cond='data:title'><br /> <h2><data:title/></h2><br /> </b:if><br /><br /> <div class='widget-content'><br /> <div id='labelCloud'/><br /><script type='text/javascript'><br /><br />// Do not change anything past this point -----------------<br />function s(a,b,i,x){<br /> if(a>b){<br /> var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)<br /> }<br /> else{<br /> var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)<br /> }<br /> return v<br /> }<br /><br />var ta=0<br />var c=[];<br />var labelCount = new Array(); <br />var ts = new Object;<br /><b:loop values='data:labels' var='label'><br />var theName = "<data:label.name/>";<br />ts[theName] = <data:label.count/>;<br /></b:loop><br /><br />for (t in ts){<br /> if (!labelCount[ts[t]]){<br /> labelCount[ts[t]] = new Array(ts[t])<br /> }<br /> }<br />tz = labelCount.length-1;<br />lc2 = document.getElementById('labelCloud');<br />ul = document.createElement('ul');<br />ul.className = 'label-cloud';<br />for(var t in ts){<br /> for (var i=0;3 > i;i++) {<br /> c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)<br /> } <br /> var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);<br /> li = document.createElement('li');<br /> li.style.fontSize = fs+'px';<br /> li.style.lineHeight = '1';<br /> a = document.createElement('a');<br /> a.title = ts[t]+' Posts in '+t;<br /> a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';<br /> a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);<br /> if (lcShowCount){<br /> span = document.createElement('span');<br /> span.innerHTML = '('+ts[t]+') ';<br /> span.className = 'label-count';<br /> a.appendChild(document.createTextNode(t));<br /> li.appendChild(a);<br /> li.appendChild(span);<br /> }<br /> else {<br /> a.appendChild(document.createTextNode(t));<br /> li.appendChild(a);<br /> }<br /> ul.appendChild(li);<br /> abnk = document.createTextNode(' ');<br /> ul.appendChild(abnk);<br /> }<br /> lc2.appendChild(ul); <br /></script><br /><br /><noscript><br /> <ul><br /> <b:loop values='data:labels' var='label'><br /> <li><br /> <b:if cond='data:blog.url == data:label.url'><br /> <data:label.name/><br /> <b:else/><br /> <a expr:href='data:label.url'><data:label.name/></a><br /> </b:if><br /> (<data:label.count/>)<br /> </li><br /> </b:loop><br /> </ul><br /></noscript><br /> <b:include name='quickedit'/><br /> </div><br /><br /></b:includable><br /></b:widget></span></div><br /><div align="justify">Explicación del paso <strong>Nº 2</strong><br /><strong>-</strong> En lcBlogURL, se debe poner la dirección de tu blog.<br /> <br /><strong>-</strong> En maxFontSize, podemos modificar el tamaño de la fuente mostrada.<br /><br /><strong>-</strong> En maxColor = [0,0,255], podemos modificar el color de la fuente mostrada.<br />Por ejemplo:<br />[255,0,0] = Rojo claro<br />[0,255,0] = Verde claro <br />[128,0,0] = Rojo oscuro<br />[0,128,0]= Verde oscuro<br />[0,0,128] = Azul oscuro<br />Mas combinaciones de colores en <a href="http://users.rcn.com/giant.interport/COLOR/ColorSpecifier.html" target="_blank"><span style="color:#3333ff;"><u>HYPE's Color Specifier</u></span></a>.<br /><br /><strong>-</strong> En minFontSize, podemos modificar el tamaño de la fuente mostrada.<br /> <br /><strong>-</strong> En minColor = [0,0,0], podemos modificar el color de la fuente mostrada.<br /><br /><strong>-</strong> En lcShowCount (true o false) .- Si es true se mostrará una nube de etiquetas con el número de entradas que existen. Mientras que en false simplemente se vera una nube de etiquetas sin su respectivo número.<br /><br /><strong>Nota:</strong> <br />- Para que te resulte este truco debes tener como máximo más de 2 entradas en caso contrario no se mostrará.</div><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com59tag:blogger.com,1999:blog-37094370.post-78943768621534015452007-08-18T13:35:00.000-05:002008-12-08T18:31:45.384-05:00Etiquetas (categorías o secciones) en forma de un menú de pestañas o solapas -72-<div align="justify"><a href="http://3.bp.blogspot.com/_wIBBe1JWnPQ/RuHV5QQO4qI/AAAAAAAAAKY/kswZsnvFRjk/s1600-h/Menu.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_wIBBe1JWnPQ/RuHV5QQO4qI/AAAAAAAAAKY/kswZsnvFRjk/s400/Menu.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5107598632007164578" /></a>En algunos sitios web encontramos un menú de pestañas en forma horizontal para una navegación mucho mejor. Probablemente para algunos es de bastante utilidad por su fácil y rápida navegación por la página.<br /><br />Para empezar a poner nuestro menú de pestañas en el blog tenemos que <a href="http://ayudaparaelblog.blogspot.com/2007/04/cmo-poner-etiquetas-en-blogger-50.html"><span style="color:#3333ff;"><u>etiquetar</u></span></a> todos nuestros post.<br /><br /><strong>1.</strong> Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios y buscas lo siguiente:</div><br /><div align="left"><b:section class="header" id="header" maxwidgets="<strong>1</strong>" showaddelement="<strong>no</strong>"></div><br /><div align="justify">* Cambia los valores de mawidgets="<strong>2</strong>" y showaddelement="<strong>yes</strong>".</div><span class="fullpost"><br /><div align="justify"><strong>2.</strong> Después buscas el widget con el id Label1 y con el title Etiquetas. Esto lo encuentras donde dice:<br /><div id='sidebar-wrapper'><br /><strong><b:section class='sidebar' id='sidebar' preferred='yes'></strong></div><br /><divalign="left"><b:widget id='Label1' locked='false' title='Etiquetas' type='Label'><br /><b:includable id='main'><br /><b:if cond='data:title'><br /><h2><data:title><h2><br /><b:if><br /><div class='widget-content'><br /><ul><br /><b:loop values='data:labels' var='label'><br /><li><br /><b:if cond='data:blog.url == data:label.url'><br /><data:label.name/><br /><b:else/><br /><a expr:href='data:label.url'><?xml:namespace prefix = data /><?xml:namespace prefix = data /><data:label.name></data:label.name></a><br /></b:if><br />(<data:label.count/>)<br /></li><br /></b:loop><br /></ul><br /><br /><b:include name='quickedit'/><br /></div><br /></b:includable><br /></b:widget><br /><br /><div align="justify"><strong>3.</strong> Una vez ubicado, tienes que reemplazar todo el código anterior por lo siguiente:</div><br /><div align="left"><span style="color:#3333ff;"><b:widget id='Label1' locked='false' title='' type='Label'><br /><b:includable id='main'><br /><div id='tabsE'><br /><ul><br /><li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li><br /><b:loop values='data:labels' var='label'><br /><li><a expr:href='data:label.url'><span><data:label.name/></span></a></li></b:loop><br /></ul><br /><!-- <b:include name='quickedit'/> --><br /></div><br /></b:includable><br /></b:widget></span></div><br /><div align="justify"><strong>4.</strong> Seguimos en la Plantilla. El siguiente código lo deje para el último, porque se refiere estilo del menú, el cual se podrá realizar cambios, utilizando tu criterio.<br />El código lo tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.</div><br /><div align="left">/*- Menu Tabs E--------------------------- */<br /><br />#tabsE {<br />float:left;<br />width:100%;<br />background:#000;<br />font-size:93%;<br />line-height:normal;<br /><br />}<br />#tabsE ul {<br />margin:0;<br />padding:10px 10px 0 50px;<br />list-style:none;<br />}<br />#tabsE li {<br />display:inline;<br />margin:0;<br />padding:0;<br />}<br />#tabsE a {<br />float:left;<br />background:url("http://i151.photobucket.com/albums/s137/andrewmusic1/tableftE.gif") no-repeat left top;<br />margin:0;<br />padding:0 0 0 4px;<br />text-decoration:none;<br />}<br />#tabsE a span {<br />float:left;<br />display:block;<br />background:url("http://i151.photobucket.com/albums/s137/andrewmusic1/tabrightE.gif") no-repeat right top;<br />padding:5px 15px 4px 6px;<br />color:#FFF;<br />}<br />/* Commented Backslash Hack hides rule from IE5-Mac \*/<br />#tabsE a span {float:none;}<br />/* End IE5-Mac hack */<br />#tabsE a:hover span {<br />color:#FFF;<br />}<br />#tabsE a:hover {<br />background-position:0% -42px;<br />}<br />#tabsE a:hover span {<br />background-position:100% -42px;<br />}<br /></div><br /><div align="justify">En donde dice:<br />#tabsE ul {<br />margin:0;<br />padding:10px 10px 0 <strong>50px</strong>;<br />el número 50 se refiere al posicionamiento, es decir moverlo hacia la izquierda, por ejemplo cambialo a 0 y mira lo que pasa.<br />Luego mas abajo dice: padding:<strong>5px</strong> 15px 4px 6px;<br />el número 5 se refiere al espacio, por ejemplo cambailo a 0 y mira lo que pasa.<br /><br /><strong>Nota:</strong> Te voy a proporcionar algunos estilos de menú que he subido a Photobucket para que lo utilices en tu blog. Pero al utilizar algún estilo, tendrás que hacer una simple modificación.<br /><br /><a href="http://andrewhonors.googlepages.com/TabsA.txt" target="_blank"><span style="color:#3333ff;"><u>Tabs A</u></span></a> Color de las Tabs: Blancas<br /><a href="http://andrewhonors.googlepages.com/TabsB.txt" target="_blank"><span style="color:#3333ff;"><u>Tabs B</u></span></a> Color de las Tabs: <span style="color:#cccccc;">Grises</span><br /><a href="http://andrewhonors.googlepages.com/TabsC.txt" target="_blank"><span style="color:#3333ff;"><u>Tabs C</u></span></a> Color de las Tabs: <span style="color:#009900;">Verdes</span><br /><a href="http://andrewhonors.googlepages.com/TabsD.txt" target="_blank"><span style="color:#3333ff;"><u>Tabs D</u></span></a> Color de las Tabs: <span style="color:#ffcccc;">Rosas<br /></span><span style="color:#3333ff;">Tabs E</span> Color de las Tabs: <span style="color:#ff0000;">Rojas</span><br /><a href="http://andrewhonors.googlepages.com/TabsF.txt" target="_blank"><span style="color:#3333ff;"><u>Tabs F</u></span></a> Color de las Tabs: <span style="color:#66cccc;"><span style="color:#33ccff;">Celeste</span><br /></span><a href="http://andrewhonors.googlepages.com/TabsG.txt" target="_blank"><span style="color:#3333ff;"><u>Tabs G</u></span></a> Color de las Tabs: <span style="color:#3333ff;">Azules </span><br /><a href="http://andrewhonors.googlepages.com/TabsH.txt" target="_blank"><span style="color:#3333ff;"><u>Tabs H</u></span></a> Color de las Tabs: <strong>Negras</strong><br /><a href=" http://andrewhonors.googlepages.com/TabsI.txt" target="_blank"><span style="color:#3333ff;"><u>Tabs I</u></span></a> Color de las Tabs: <span style="color:#ff6600;">Naranjas</span><br /><a href="http://andrewhonors.googlepages.com/TabsJ.txt" target="_blank"><span style="color:#3333ff;"><u>Tabs J</u></span></a> Color de las Tabs: Cristal<br /><a href="http://andrewhonors.googlepages.com/TabsK.txt" target="_blank"><span style="color:#3333ff;"><u>Tabs K</u></span></a> Color de las Tabs: Cafe<br /><br />Por ejemplo, si utilizas el estilo A, entonces te vas al <strong>paso 2</strong> y en <div id='tabsF'> le cambias el id por el estilo que haz escogido. En este caso hemos escogido el estilo A entonces seria, <div id='tabsA'><br /><br />5. Finalmente cuando vas a guardar los cambios te saldrá probablemente un mensaje:<br /><span style="color:#ff0000;">Están a punto de suprimirse los artilugios<br /></span><span style="color:#990000;">Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.</span><br /><span style="color:#990000;">• Label1</span><br /><span style="color:#ff6600;">Confirmar y guardar</span><br />Simplemente guardas y confirmas.<br /><br /><strong>Nota:</strong> Para que resulte todo esto debes irte a <strong>Elementos de la página</strong> y arrastrar <strong>Etiquetas</strong> poniendolo debajo de la cabecera.</div><br /></span><br /></data:label.name>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com136tag:blogger.com,1999:blog-37094370.post-91959797909463841222007-07-09T12:40:00.000-05:002008-12-08T18:31:46.017-05:00Plantillas con una 2da Sidebar (3 columnas) -71-<div align="justify"><strong>1.</strong> Para usar estas plantillas tienes que descargar el documento y copiar el código que se te brinda.<br /><strong>2.</strong> Ir al blog. Tienes que ir a diseño de plantilla, después a <strong>Edición de HTML</strong> (no necesitas Expandir plantillas de artilugios) y automáticamente te muestra el código de la plantilla que usas actualmente.<br /><strong>3.</strong> Selecciona todo el código y bórralo. Ahora pega el código que ya tenías copiado (la nueva plantilla).<br /><strong>4.</strong> Guarda los cambios. Reconstruye tu blog y listo.</div><br /><br /><div align="center"><a href="http://4.bp.blogspot.com/_wIBBe1JWnPQ/RpJoTwFg48I/AAAAAAAAAJ4/DGHCjJ-h-ac/s1600-h/PruebaBlog0.JPG"><img id="BLOGGER_PHOTO_ID_5085241617789543362" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://4.bp.blogspot.com/_wIBBe1JWnPQ/RpJoTwFg48I/AAAAAAAAAJ4/DGHCjJ-h-ac/s400/PruebaBlog0.JPG" border="0" /></a><strong>Minima</strong> <a href="http://www.fileden.com/files/2006/12/10/493922/Minima.zip" target="_blank"><span style="color:#ff6600;"><strong><u>Descargar</u></strong></span></a><br /><strong>Minima Black</strong> <a href="http://andrewhonors.googlepages.com/MinimaBlack1.xml" target="_blank"><span style="color:#ff6600;"><strong><u>Descargar</u></strong></span></a><br /><strong>Minima Blue</strong> <a href="http://andrewhonors.googlepages.com/MinimaBlue2.xml" target="_blank"><span style="color:#ff6600;"><strong><u>Descargar</u></strong></span></a><br /><strong>Minima Ochre</strong> <a href="http://andrewhonors.googlepages.com/MinimaOchre3.xml" target="_blank"><span style="color:#ff6600;"><strong><u>Descargar</u></strong></span></a><br /><span class="fullpost"><br /><br /><a href="http://2.bp.blogspot.com/_wIBBe1JWnPQ/RpJp4QFg49I/AAAAAAAAAKA/FJINSta-IMI/s1600-h/PruebaBlog01.JPG"><img id="BLOGGER_PHOTO_ID_5085243344366396370" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://2.bp.blogspot.com/_wIBBe1JWnPQ/RpJp4QFg49I/AAAAAAAAAKA/FJINSta-IMI/s400/PruebaBlog01.JPG" border="0" /></a><strong>Minima</strong> <a href="http://andrewhonors.googlepages.com/Minima.xml" target="_blank"><span style="color:#ff6600;"><strong><u>Descargar</u></strong></span></a><br /><strong>Minima Black</strong> <a href="http://andrewhonors.googlepages.com/MinimaBlack.xml" target="_blank"><span style="color:#ff6600;"><strong><u>Descargar</u></strong></span></a><br /><strong>Minima Blue</strong> <a href="http://andrewhonors.googlepages.com/MinimaBlue.xml" target="_blank"><span style="color:#ff6600;"><strong><u>Descargar</u></strong></span></a><br /><strong>Minima Ochre</strong> <a href="http://andrewhonors.googlepages.com/MinimaOchre.xml" target="_blank"><span style="color:#ff6600;"><strong><u>Descargar</u></strong></span></a><br /><br /><br /><a href="http://2.bp.blogspot.com/_wIBBe1JWnPQ/RpJqyQFg4-I/AAAAAAAAAKI/kzr-E7JykkM/s1600-h/PruebaBlog1.JPG"><img id="BLOGGER_PHOTO_ID_5085244340798809058" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://2.bp.blogspot.com/_wIBBe1JWnPQ/RpJqyQFg4-I/AAAAAAAAAKI/kzr-E7JykkM/s400/PruebaBlog1.JPG" border="0" /></a><strong>Denim</strong> <a href="http://andrewhonors.googlepages.com/Denim.xml" target="_blank"><span style="color:#ff6600;"><strong><u>Descargar</u></strong></span></a><br /><br /><br /><a href="http://1.bp.blogspot.com/_wIBBe1JWnPQ/RpJrOAFg4_I/AAAAAAAAAKQ/vSydOf2ZNtY/s1600-h/PruebaBlog2.JPG"><img id="BLOGGER_PHOTO_ID_5085244817540178930" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://1.bp.blogspot.com/_wIBBe1JWnPQ/RpJrOAFg4_I/AAAAAAAAAKQ/vSydOf2ZNtY/s400/PruebaBlog2.JPG" border="0" /></a><strong>Denim</strong> <a href="http://andrewhonors.googlepages.com/Denim4.xml" target="_blank"><span style="color:#ff6600;"><strong><u>Descargar</u></strong></span></a></div><br /><br /><strong>Nota:</strong> Poco a poco estre subiendo las demás.<br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com111tag:blogger.com,1999:blog-37094370.post-39601352290221505052007-06-30T21:12:00.000-05:002008-12-08T18:31:46.317-05:00Ocultar/Mostrar la barra de navegación de Blogger (2) -70-<p align="center">Acerca el mouse aquí abajo para que aparezca la imagen y alejalo para que desaparezca.<br /><img src="http://1.bp.blogspot.com/_Shc5vo0-mCI/Rl3Mc3X64fI/AAAAAAAAABQ/RUXEZID-it4/s320/nav03.jpg" border="0" alt="" id="mousetest" onmouseover="new Effect.Opacity('mousetest', {duration:0.5, from:0.0, to:1.0});" onmouseout="new Effect.Opacity('mousetest', {duration:0.5, from:1.0, to:0.0});" /></p><div align="justify">Consiste en ocultar la barra de navegación y mostrarla cuando se coloca el mouse en la parte superior del blog o página.<br /><span class="fullpost"> <br />Así que para ocultar esta barra tendrás que hacer lo siguiente:<br /><strong>-</strong> Ir a Plantilla, después a Edición de HTML (no necesitas Expandir plantillas de artilugios) y agregas el siguiente código entre ]]></b:skin> y </head>.</div><br /><div align="left"><span style="color:#3333ff;"><script src='http://wiki.script.aculo.us/javascripts/prototype.js' type='text/javascript'/><br /><script src='http://wiki.script.aculo.us/javascripts/scriptaculous.js?load=effects' type='text/javascript'/><br /><br /><script type='text/javascript'><br />function navbarShow() { <br />new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});<br />}<br />function navbarHide() { <br />new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});<br />}<br />function navbarHack() { <br />Event.observe('navbar-iframe', 'mouseover', navbarShow, false); <br />Event.observe('navbar-iframe', 'mouseout', navbarHide, false); <br />navbarHide();<br />}<br />Event.observe(window, 'load', navbarHack, false);<br /></script></span></div><br /><div align="jsutify"><span style="color:#cc0000;">Vía:</span> <a href="http://hodavame.blogspot.com/2007/05/jugando-con-la-navbar-4-ocultarmostrar.html" target="_blank"><span style="color:#3333ff;">Hodavame</u></span></a></div><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com59tag:blogger.com,1999:blog-37094370.post-49287303041798382922007-06-26T15:20:00.000-05:002008-12-08T18:31:46.481-05:00Menú desplegable, un simple botón (2) -69-<div align="justify"> Este menú desplegable consiste en hacer clic al botón y se muestra una lista de opciones.<br /><br /><strong>1.</strong> Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>)</div><br /><div align="left">.texthidden {<br />display:inline<br />}<br /><br />.shown {<br />display:block<br />}</div><span class="fullpost"><br /><div align="justify"><strong>2.</strong> Entre ]]></b:skin> y </head> agregar lo siguiente:</div> <br /><div align="left"><span style="color:#3333ff;"><script src='http://andrewhonors.googlepages.com/fecha.js' type='text/javascript'/></span></div><br /><div align="justify"><strong>-</strong> Guardar cambios.<br /><br /><strong>3.</strong> Ir a Elementos de la página, clic en Añadir un elemento de página y seleccionar HTML/Javascript. Ahí tendrán que agregar el siguiente código:</div> <br /><div align="left"><span style="color:#3333ff;"><a href="javascript:void(0);" onclick="expandcollapse('musica')"><img border="0" src="http://dirección-de-la-imagen-del-botón"/></a><br/><br /><br /><ul id="musica" class="texthidden"><br /><li><a href="http://www.radioblogclub.com/" target="_blank">Radio Blog</a></li><br /><li><a href="http://www.goear.com/index.php" target="_blank">Goear</a></li></ul><br /><br /><br /><a href="javascript:void(0);" onclick="expandcollapse('video')"><img border="0" src="http://dirección-de-la-imagen-del-botón"/></a><br/><br /><br /><ul id="video" class="texthidden"><br /><li><a href="http://www.youtube.com/" target="_blank">Youtube</a></li><br /><li><a href="http://www.veoh.com/" target="_blank">Veoh</a></li></ul></span></div><br /><div align="justify"><strong>**</strong>Como punto de partida hemos hecho un menú de <strong>música</strong> en el que aparece una lista: Radio Blog y Goear. Además, hay un menú de <strong>video</strong> en el que aparece: You Tube y Veoh<br /><br /><strong>-</strong> En esta parte de código puedes repetirla cuantas veces quieras, ustedes tendrán que armarlo a su gusto.<br /><strong>-</strong> Solo tendrán que agregar el botón, la dirección de la página con su respectivo nombre. <br />- Además, puedes añadir una imagen justo antes del texto que aparece la lista.<br /><br /><strong>Explicación:</strong><br />- Si por ejemplo, a parte de música deseamos poner video entonces al crear otro botón, en expandcollapse('musica') cambiamos en donde dice música por video. Además, el id=”música” lo modificamos por video.<br />- En <img border="0" src="http://direccion-de-la-imagen"/>, viene hacer la imagen del botón.<br />- En donde dice Radio Blog, Goear, You Tube, vienen a ser una lista.<br />- En <a href="http://www.radioblogclub.com/" target="_blank">, viene hacer el enlace de la página enlazada.<br /><br />Ejemplo:<br /><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://2.bp.blogspot.com/_wIBBe1JWnPQ/RoFuvoB0xOI/AAAAAAAAAJo/g9ks5E94OOE/s320/Blogs.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5080463619128607970" /><br /><br />Crear botones en <a href="http://www.buttonator.com/" target="_blank"><span style="color:#ff6600;"><u>Buttonator</u></span></a><br /><br /><span style="color:#cc0000;">Vía:</span> <a href="http://www.consumingexperience.com/2006/01/how-to-include-categories-for-your.html" target="_blank"><span style="color:#3333ff;"><u>A Consuming Experience</u></span></a></div><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com37tag:blogger.com,1999:blog-37094370.post-53324919896297831192007-06-18T23:00:00.000-05:002008-12-08T18:31:46.618-05:00Agregar Emoticones en el blog -68-<div align="justify"><strong>Emoticones</strong>.- Son figuras construidas con caracteres ortográficos, para expresar gestos o emociones en los mensajes enviados y los usuarios las utilizan diariamente en su chat. Algunas de las más usuales son:<br /><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_wIBBe1JWnPQ/RngBVoB0xMI/AAAAAAAAAJY/NF-A1zep788/s200/emoticones.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5077810050894185666" /><span class="fullpost"> <strong>1.</strong> Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <head> y </head>. Preferible que lo pegues casi al final (antes de </head>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.</div><br /><div align="left"><span style="color:#3333ff;"><script src='http://benjamin0331.googlepages.com/addSmiley.js' type='text/javascript'/></span></div><br /><div align="justify"><strong>2.</strong> Entre <b:skin><![CDATA[ y ]]></b:skin> agregar lo siguiente:</div><br /><div align="left">.post-body img#new {<br />margin:0;<br />padding:0;<br />border:none;<br />}</div><br /><div align="justify"><strong>*</strong> Esto es para evitar que los Emoticonos se desplacen o se vean con un borde.<br /><br /><strong>-</strong> Los emoticones se verán en los post (entradas) y en los comentarios cuando están expandidos. Una vez que el blog acabe de cargar aparecerán los emoticonos.<br /><br /><strong>Nota:</strong> Estos emoticones te funcionan bien si es que <strong>no</strong> utilizas el Leer Más (Entradas ampliables).</div><br /><div align="justify"><span style="color:#cc0000;">Vía:</span> <a href="http://ibenjamin.blogspot.com/2007/01/blog-post_07.html" target="_blank"><span style="color:#3333ff;"><u>Ben's</u></span></a></div><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com27tag:blogger.com,1999:blog-37094370.post-40183622454828294282007-06-17T00:12:00.000-05:002008-12-08T18:31:46.780-05:00Cambiar el color de fondo de los comentarios -67-<div align="justify"><a href="http://2.bp.blogspot.com/_wIBBe1JWnPQ/RnS_o4B0xKI/AAAAAAAAAJI/8jh4YsN-_E0/s1600-h/Comments.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://2.bp.blogspot.com/_wIBBe1JWnPQ/RnS_o4B0xKI/AAAAAAAAAJI/8jh4YsN-_E0/s320/Comments.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5076893388909102242" /></a>Consiste en agregar un color de fondo a los comentarios, el cual puedes asignar un color de fondo para el autor del blog (un color de texto también) y otro para el autor de los otros blogs. <br /><br /><strong>1.</strong> Ir a diseño de la Plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios. Buscar el id ='comments-block'.</div><br /><span class="fullpost"><div align="left"><dl id='comments-block'><br /> <b:loop values='data:post.comments' var='comment'><br /> <dt class='comment-author' expr:id='"comment-" + data:comment.id'><br /> <a expr:name='"comment-" + data:comment.id'/><br /> <b:if cond='data:comment.authorUrl'><br /> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br /> <b:else/><br /> <data:comment.author/><br /> </b:if><br /> <data:commentPostedByMsg/><br /> </dt><br /><br /><span style="color:#ff0000;"><b:if cond='data:comment.author == data:post.author'><br /> <dd class='comment-body-author'><br /> <p><data:comment.body/></p><br /> </dd><br /> <b:else/></span><br /><br /> <dd class='comment-body'><br /> <b:if cond='data:comment.isDeleted'><br /> <span class='deleted-comment'><data:comment.body/></span><br /> <b:else/><br /> <p><data:comment.body/></p><br /> </b:if><br /> </dd><br /><br /><span style="color:#ff0000;"></b:if></span><br /><br /><dd class='comment-footer'></div><br /><div align="justify"><strong>*</strong> Agregar lo que está de color rojo.<br /><br /><strong>3.</strong> Seguimos en la plantilla. Entre <b:skin><![CDATA[ y ]]></b:skin> buscar lo siguiente (estilo del comentario):</div><br /><div align="left">/* Comments<br />----------------------------------------------- */<br /><strong>#comments h4 {</strong><br /> margin: 1em 0;<br /> color: $dateHeaderColor;<br />}<br />#comments h4 strong {<br /> font-size: 110%;<br />}<br />Sigue más código de estilo<br />…..<br />…..<br />….<br /><strong>.deleted-comment {</strong><br /> font-style:italic;<br /> color:gray;<br /> }</div><br /><div align="justify"><strong>4.</strong> El siguiente código lo deje para el último porque se refiere al estilo del comentario (modificado), el cual se podrá realizar cambios utilizando tu criterio. Una vez ubicado el estilo del comentario lo reemplazamos por lo siguiente:</div><br /><div align="left"><span style="color:#3333ff;">#comments { <br />margin:0; <br />}<br />#comments h4 { <br />margin:0 0 10px; <br />padding-top:.5em; <br />line-height: 1.4em; <br />font: bold 110% Georgia,Serif; <br />color:#333; <br />}<br />#comments-block { <br />line-height:1.6em; <br />}<br />.comment-author { <br />background:#e6e6e6 url("http://4.bp.blogspot.com/_wIBBe1JWnPQ/RjoyOtvN3eI/AAAAAAAAAGA/PsaYcfwBLQg/s200/page_edit.png") no-repeat 2px .35em; <br />margin:.5em 0 0;<br />padding:3px 0 0 18px; <br />font-weight:bold; <br />}<br />.comment-body { <br />background:#eeeee6; <br />margin:0; <br />padding:7px 7px 7px 7px;<br />}<br />.comment-body p { <br />margin:0 0 .5em; <br />}<br />.comment-body-author { <br />background:#e5e5e5; <br />margin:0; <br />padding:7px 7px 7px 10px;<br />}<br />.comment-body-author p { <br />font-size:105%; <br />margin:0 0 .2em 0; <br />color:#6728B2; <br />text-decoration:bold;<br />}<br />.comment-footer { <br />background:#e6e6e6;<br />margin:0 0 .5em; <br />padding:0 0 .75em 20px; <br />color:#996; <br />}<br />.comment-footer a:link { <br />color:#996; <br />}<br />.deleted-comment { <br />font-style:italic; <br />color:gray; <br />}</span></div><br /><div align="justify"><strong>Explicación:</strong><br />- En .comment-author, aparece el nombre del autor y puedes cambiar el color de fondo y la url que viene a ser el icono<br />- .comment-body, ahí se visualiza el color de fondo para los que dejan comentarios.<br />- .comment-body-author, ahí se visualiza el color de fondo para el autor del blog.<br />- .comment-body-author p, puedes cambiar el color de texto del autor del blog.<br />- .comment-footer, aparece la fecha y puedes cambiar el color de fondo.</div><br /><div align="justify"><span style="color:#cc0000;">Vía:</span> <a href="http://stubborn-fanatic.blogspot.com/2006/12/add-background-colors-to-comments.html" target="_blank"><span style="color:#3333ff;"><u>Stubborn Fanatic</u></span></a></div><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com29tag:blogger.com,1999:blog-37094370.post-10607180269538415562007-06-12T21:30:00.000-05:002007-06-19T10:50:43.397-05:00Colores aleatorios en el fondo del blog -66-<div align=justify>Consiste en un color distinto cada vez que entramos al blog.<br /><br /><strong>1.</strong> Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y buscas lo siguiente: <br /><span class="fullpost"><br />body {<br /> background:$bgcolor;<br /> ...<br /> }<br /><br /><strong>*</strong> Eliminar <strong>background:$bgcolor;</strong><br /><br /><strong>2.</strong> Agregar el siguiente código después de <body></div><br /><div align="left"><span style="color:#3333ff;"><script type='text/javascript'><br />var bgcolorlist=new Array("#626868", "#515f6c", "#999966", "#9ea8a8", "#b2bdbd", "#41485e", "#777777", "#eeeee6")<br />document.bgColor=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]</script></span></div><br /><div align="justify">- En new Array (), puedes cambiar los códigos de los colores que deseas.<br />Por otro lado, si quieres que más colores cambien le agregas más o en caso contrario le quitas.<br /><br />- Para que veas el resultado en tu blog presiona F5 de tu teclado y veras que aparecen distintos colores en el fondo del blog.</div><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com13tag:blogger.com,1999:blog-37094370.post-55325918130620232892007-06-11T00:00:00.000-05:002008-12-08T18:31:47.178-05:00Últimos Post (2) -65-<div align="justify"><a href="http://4.bp.blogspot.com/_wIBBe1JWnPQ/RmzqvYB0xGI/AAAAAAAAAIo/x7klm_CHG7I/s1600-h/Post.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://4.bp.blogspot.com/_wIBBe1JWnPQ/RmzqvYB0xGI/AAAAAAAAAIo/x7klm_CHG7I/s200/Post.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5074688979764560994" /></a>En Blogger existe la manera de agregarle a nuestro blog los títulos de los últimos post, pero a muchos no les ha gustado, quizás sea porque el número máximo de post es cinco, entre otras cosas. Pero existe un nuevo truco y me parece mucho mejor.<br /><span class="fullpost"><br /><span style="color:#ff6600;"><strong>»</strong></span> Ir a diseño de plantilla, clic en Añadir un elemento de página y seleccionan <strong>HTML/Javascript</strong>. Ahí tendrán que agregar lo siguiente:</div><br /><div align="left"><span style="color:#3333ff;"><script src=" http://andrewhonors.googlepages.com/showrecentposts_es.js"></script><br /><script language="javascript"><br /> var numposts = 7;<br /> var numchars = 100;<br /> var showpostdate = true;<br /> var showpostsummary = true;<br /> var standardstyling = true;<br /></script><br /><script src="http://andrewmusicmovie.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></span></div><br /><div align="justify"><strong>Explicación:</strong> <br />Podemos modificar lo siguiente:<br /><br />numpost .- Es el número de post a mostrar desde 1 hasta 25.<br /><br />numchars .- Se mostrará un número de palabras para cada comentario. <br /><br />showpostdate (true o false) .- Si es true se muestra la fecha del post.<br /><br />showpostsummary (true o false) .- Si es true se mostrará el resumen del post (entradas).<br /><br />standardstyling (true o false) .- Si es true se aplicará un estilo estándar. El resumen se mostrará en letra cursiva y existirá un espacio entre cada comentario. Mientras que en false se vera todo junto.<br /><br /><strong>**</strong> En donde dice: andrewmusicmovie.blogspot.com cámbialo por <strong>la dirección de tu blog</strong>.<br /><br /><span style="color:#cc0000;">Vía:</span> <span style="color:#3333ff;">Beautiful Beta</span><br /><br /><a href="http://ayudaparaelblog.blogspot.com/2007/02/ltimos-post-en-el-blog-27.html"><span style="color:#3333ff;"><u>Últimos Post (Blogger)</u></span></a></div><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com34tag:blogger.com,1999:blog-37094370.post-33181811373179874102007-06-08T13:49:00.000-05:002007-06-19T10:48:51.943-05:00¿Cómo modificar la Columna Pricipal y la Sidebar del blog? -64-<div align="justify">Para aumentar o disminuir el tamaño de la Columna principal o Sidebar necesitaremos hacer algunas modificaciones en el blog. <br />Esto prácticamente resulta para las siguientes plantillas: Todas las Minima (Dark, Blue, Ochre, Lefty, Stretch, Lefty Stretch), Denim.<br /><span class="fullpost"> <br /><span style="color:#ff6600;"><strong>»</strong></span> Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios).<br /><br /><strong>1.</strong> En la plantilla tenemos que ubicar lo siguiente:<br />/* Header<br />-----------------------------------------------<br /><strong>#header-wrapper</strong> {<br /> width:660px;<br /> ...<br /> }<br /><br />/* Outer-Wrapper<br />----------------------------------------------- */<br /><strong>#outer-wrapper</strong> {<br /> width: 660px;<br /> ...<br /> }<br /><br /><strong>#main-wrapper</strong> {<br /> width: 410px;<br /> ...<br /> }<br /><br /><strong>#sidebar-wrapper</strong> {<br /> width: 220px;<br /> ...<br />}<br /><br /><strong>2.</strong> Tendremos que modificar el <strong>width</strong> (ancho) del #header-wrapper, #outer-wrapper, del #main-wrapper y de la #sidebar-wrapper.<br /><strong>Ejemplo:</strong><br />#header-wrapper {<br /> width: <strong>900</strong>px;<br />...<br />}<br /><br />#outer-wrapper {<br />width: <strong>900</strong>px;<br />...<br />}<br /><br />#main-wrapper {<br />width: <strong>500</strong>px;<br />...<br />}<br /><br />#sidebar-wrapper {<br />width: <strong>320</strong>px;<br />...<br />}<br /><br /><strong>3.</strong> Para que veas los cambios haces clic en <strong>Vista Previa</strong> y si crees que has hecho bien las modificaciones, simplemente clic en Guardar Plantilla.<br /><br /><strong>Nota:</strong> Quizás esto te pueda servir como una guía para las demás plantillas.</div><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com33tag:blogger.com,1999:blog-37094370.post-32556114730401275842007-06-04T00:00:00.000-05:002007-06-19T10:47:43.366-05:00¿Cómo poner un texto en movimiento en la barra de estado y título? -63-<div align="justify"><strong>La barra de título</strong>, está en la parte superior y nos indica la página web en la que el navegador está situado.<br /><br /><strong>La barra de estado</strong>, nos aparece en los exploradores por lo general abajo y suele mostrar información sobre la página.<br /><br />Para agregar el siguiente código tienes dos formas de agregarlo:<br /><strong>-</strong> Ir a diseño de la plantilla, clic en Añadir un elemento de página y seleccionas <strong>HTML/Javascript</strong>.<br /><strong>-</strong> Ir a diseño de la plantilla, luego Edición de HTML y lo agregas antes de <strong></head></strong><br /><span class="fullpost"><br /><strong><span style="color:#990000;">Para la barra de título</span></strong></div><br /><div align="left"><script type="text/JavaScript"><br />var repeat=1 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1<br />var title=document.title<br />var leng=title.length<br />var start=1<br />function titlemove() {<br />titl=title.substring(start, leng) + title.substring(0, start)<br />document.title=titl<br />start++<br />if (start==leng+1) {<br />start=0<br />if (repeat==0)<br />return<br />}<br />setTimeout("titlemove()",140)<br />}<br />if (document.title)<br />titlemove()<br /></script></div><br /><div align="justify"><strong>**</strong> setTimeout("titlemove()",140), esta línea se refiere al movimiento del texto, si deseas le cambias el valor de 140 por otro valor.<br />Probablemente el texto lo veas muy junto o no se aprecie bien, entonces en <strong>Opciones</strong>, Básico y en el Título le agregas guiones o puntos. Pero acuérdate que cambiaria el titulo de tu blog, es decir estaría con puntos o guiones.<br /><br /><strong><span style="color:#990000;">Para la barra de estado</span></strong></div><br /><div align="left"><script language="JavaScript"><br />var MessageText = "Bienvenidos a Ayuda para el Blog..."<br />var DisplayLength = 50<br />var pos = 1 - DisplayLength;<br />function ScrollInStatusBar(){<br />var scroll = "";<br />pos++;<br />if (pos == MessageText.length) pos = 1 - DisplayLength;<br />if (pos<0)<br />{<br />for (var i=1; i<=Math.abs(pos); i++)<br />scroll = scroll + "";<br />scroll = scroll + MessageText.substring(0, DisplayLength - i + 1);<br />}<br />else<br />scroll = scroll + MessageText.substring(pos, pos + DisplayLength);<br />window.status = scroll;<br />setTimeout("ScrollInStatusBar()",100);<br />}<br />ScrollInStatusBar()<br /></script></div><br /><div align="justify"><strong>-</strong> En var MessageText, escribes tu mensaje.<br /><strong>-</strong> var DisplayLength, viene a ser la longitud de tu mensaje. <br /><strong>-</strong> setTimeout("ScrollInStatusBar()",100), esta línea se refiere al movimiento del texto, si deseas le cambias el valor de 100 por otro valor.</div> <br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com49tag:blogger.com,1999:blog-37094370.post-83743974775573110652007-06-01T00:00:00.001-05:002008-12-08T18:31:47.507-05:00Personalizar la fecha de los post (entradas) -62-<div align="justify"><a href="http://3.bp.blogspot.com/_wIBBe1JWnPQ/Rm9UJYB0xHI/AAAAAAAAAIw/CJtUA2-n8eU/s1600-h/Ejem.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_wIBBe1JWnPQ/Rm9UJYB0xHI/AAAAAAAAAIw/CJtUA2-n8eU/s320/Ejem.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5075367825115497586" /></a>Blogger coloca por defecto la fecha de los post en una sola línea, asi que en esta oportunidad vamos a cambiar la apariencia de la fecha en un estilo diferente, el cual podrás personalizarla a tu gusto.<br /><span class="fullpost"><br /><strong>1.</strong> Ir a Configuración. Después a Formato. De ahí, en donde dice: Formato de cabecera de fecha, escogemos la siguiente opción:<br /><br /><a href="http://3.bp.blogspot.com/_wIBBe1JWnPQ/Rm9U-YB0xJI/AAAAAAAAAJA/gea8kfxuV-s/s1600-h/Fecha.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_wIBBe1JWnPQ/Rm9U-YB0xJI/AAAAAAAAAJA/gea8kfxuV-s/s200/Fecha.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5075368735648564370" /></a><p align="center"><span style="color:#3333ff;">Clic en la imagen para agrandarla</span></p><strong>*</strong> No te olvides que tienes que Guardar valores.<br /><br /><strong>2.</strong> Ir a plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios. Después agregas el siguiente código entre <head> y </head>. Preferible que lo pegues al final (antes de <strong></head></strong>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.</div><br /><div align="left"><span style="color:#3333ff;"><script src='http://andrewhonors.googlepages.com/fecha.js' type='text/javascript'/></span></div><br /><div align="justify"><strong>3.</strong> Después buscas lo siguiente:</div><br /><div align="left"><div class='blog-posts'><br />....<br /> <b:if cond='data:post.dateHeader'><br /> <h2 class='date-header'><span style="color:#3333ff;"><data:post.dateHeader/></span></h2><br /> </b:if></div><br /><div align="jsutify"><strong>4.</strong> Una vez ubicado, reemplazas <span style="color:#3333ff;"><data:post.dateHeader/></span> por lo siguiente:</div><br /><div align="left"><span style="color:#ff0000;"><div id='fecha'><br /><script>remplaza_fecha('<data:post.dateHeader/>');</script><br /></div></span></div><br /><div align="justify"><strong>5.</strong> Seguimos en la Plantilla. El siguiente código lo deje para el último, porque se refiere al estilo de la fecha, el cual se podrá realizar cambios, utilizando tu criterio.<br />El código lo tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de <strong>]]></b:skin></strong>), porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.</div><br /><div align="left">#fecha {<br />display: block;<br />margin: 0px 1px;<br />float: right;<br />padding: 5px;<br />color: #464646;<br />background: #cccccc;<br />border: #cccccc 1px solid;<br />text-transform: capitalize;<br />}<br /><br />.fecha_dia {<br />display: block;<br />font-size: 16px;<br />font-weight:bold;<br />}<br /><br />.fecha_mes {<br />display: block;<br />font-size: 10px;<br />}<br /><br />.fecha_anio {<br />display: block;<br />font-size: 10px;<br />}<br /></div><br /><div align="justify"><strong>Explicación:</strong><br />#fecha {<br />En margin, ver <a href="http://htmlhelp.com/es/reference/css/box/margin.html" target="_blank"><span style="color:#3333ff;"><u>aquí</u></span></a>.<br />float, puedes cambiarlo de posición, sea left o right.<br />padding, puedes aumentar o disminuir el formato de la fecha.<br />color y background, puedes modificar los colores del texto como el fondo.<br />border, cambiar el color y en 1px por otro valor, sea 2 ó 3 (aumenta mas el borde).<br /><br />.fecha_dia, .fecha_mes y .fecha_anio {<br />En font-size, puedes cambiar el tamaño de la letra.</div><br /><div align="justify"><span style="color:#cc0000;">Vía:</span> <a href="http://blogyweb.blogspot.com/2007/03/persolizar-la-forma-en-que-se-muestra.html" target="_blank"><span style="color:#3333ff;"><u>Recursos Blog & Web</u></span></a></div><br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com61tag:blogger.com,1999:blog-37094370.post-68955930960869729472007-05-27T13:50:00.000-05:002008-12-08T18:31:47.803-05:00¿Cómo utilizar un bloque entrecomillado? (blockquote) -61-<div align="justify"><a href="http://4.bp.blogspot.com/_wIBBe1JWnPQ/RlnPSv_inXI/AAAAAAAAAH4/lvXXkIdGeMc/s1600-h/entrecomillado.JPG"><img id="BLOGGER_PHOTO_ID_5069310776609774962" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://4.bp.blogspot.com/_wIBBe1JWnPQ/RlnPSv_inXI/AAAAAAAAAH4/lvXXkIdGeMc/s400/entrecomillado.JPG" border="0" /></a><strong>Blockquote</strong>.- Define una cita. Es comúnmente usado para definir citas largas como párrafos. <blockquote> </blockquote><br /><br />En algunos blogs/sitios web encontramos citas o frases con una imagen de unas dobles comillas de apertura, el cual nos puede servir para citar algo que dijo alguna actriz, cantante, entre otras cosas.<br /><span class="fullpost"><br /><strong>1.</strong> Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de <strong>]]></b:skin></strong>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.</div><div align="left"><br /><span style="color:#3333ff;">blockquote {<br />background: url(http://aquí-la-direccion-de-la-imagen) no-repeat 0 3px;<br />color: #666;<br />padding-left: 25px;<br />font-size : 15pt;<br />font-style: italic;<br />margin-bottom: 1px;<br />display:block;<br />padding-top:5px;<br />}</span></div><br /><div align="justify">Explicación<br />- En <strong>url</strong>, se debe poner el enlace a la imagen con las dobles comillas.<br />- En <strong>padding-left</strong>, sirve para mover el texto entre le borde izquierdo.<br />- En <strong>font-size</strong>, podemos modificar el tamaño de la fuente mostrada.<br />- En <strong>font-style</strong>, define que la fuente se muestre en una de tres formas: normal, italic u oblique (inclinada).<br />- <strong>En padding-top</strong>, sirve para desplazar el texto hacia abajo.<br /><br /><strong>2.</strong> Para que las dobles comillas tengan efecto en una entrada hacemos lo siguiente:<br />Escribimos alguna cita o frase, luego lo sombreamos y clic en bloque entrecomillado o sino en edición de HTML también lo podemos insertar.</div><br /><a href="http://4.bp.blogspot.com/_wIBBe1JWnPQ/RlnN1v_inUI/AAAAAAAAAHg/fZwPriROYVo/s1600-h/bloquentrecomillado.JPG"><img id="BLOGGER_PHOTO_ID_5069309178881940802" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://4.bp.blogspot.com/_wIBBe1JWnPQ/RlnN1v_inUI/AAAAAAAAAHg/fZwPriROYVo/s200/bloquentrecomillado.JPG" border="0" /></a> <p align="center"><span style="color:#3333ff;">Clic en la imagen para agrandarla</span></p><div align="justify"><strong>Nota:</strong> Te voy a proporcionar algunas comillas que he subido a Photobucket para que lo utilices en tu blog.</div><br /><img src="http://i151.photobucket.com/albums/s137/andrewmusic1/quoteblack.gif" border="0" alt="Photo Sharing and Video Hosting at Photobucket"><br />http://i151.photobucket.com/albums/s137/andrewmusic1/quoteblack.gif<br /><br /><img src="http://i151.photobucket.com/albums/s137/andrewmusic1/quotefirebrick.gif" border="0" alt="Photo Sharing and Video Hosting at Photobucket"><br />http://i151.photobucket.com/albums/s137/andrewmusic1/quotefirebrick.gif<br /><br /><img src="http://i151.photobucket.com/albums/s137/andrewmusic1/quote.gif" border="0" alt="Photo Sharing and Video Hosting at Photobucket"><br />http://i151.photobucket.com/albums/s137/andrewmusic1/quote.gif<br /></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com15tag:blogger.com,1999:blog-37094370.post-9891500426238050172007-05-21T10:54:00.000-05:002008-12-08T18:31:47.924-05:00Últimos Comentarios (2) -60-<div align="justify"><a href="http://4.bp.blogspot.com/_wIBBe1JWnPQ/RlHGzv_inSI/AAAAAAAAAHQ/KDTkqIkZfYg/s1600-h/UC.bmp"><img id="BLOGGER_PHOTO_ID_5067049648127122722" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://4.bp.blogspot.com/_wIBBe1JWnPQ/RlHGzv_inSI/AAAAAAAAAHQ/KDTkqIkZfYg/s200/UC.bmp" border="0" /></a>En Blogger existe la manera de agregarle a nuestro blog los últimos comentarios que nos dejan los que nos visitan, pero a muchos no les ha gustado, quizás sea porque el número máximo de comentarios es cinco, tarda en actualizarse, entre otras cosas. Pero existe un nuevo truco y me parece mucho mejor.<br /><span class="fullpost"><br /><span style="color:#ff6600;"><strong>»</strong></span> Ir a diseño de plantilla, clic en Añadir un elemento de página y seleccionan HTML/Javascript. Ahí tendrán que agregar lo siguiente:</div><div align="left"><br /><script style="text/javascript" src="http://andrewhonors.googlepages.com/showrecentcomments2_sp.js"></script><br /><script style="text/javascript"><br />var numcomments = 6;<br />var showcommentdate = true;<br />var showposttitle = true;<br />var numchars = 30;<br />var standardstyling = true;<br /></script><br /><script src="http://andrewmusicmovie.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></div><br /><div align="justify"><strong>Explicación: </strong>Podemos modificar lo siguiente:<br /><br />numcomments .- Es el número de comentario a mostrar desde 1 hasta 25.<br /><br />showcommentdate (true o false) .- Si es true se muestra la fecha del comentario.<br /><br />showposttitle (true o false) .- Si es true se mostrará el titulo del post (entradas), en donde el usuario ha dejado su comentario.<br /><br />numchars .- Se mostrará un número de palabras para cada comentario.<br /><br />standardstyling (true o false) .- Si es true se aplicará un estilo estándar. El resumen se mostrará en letra cursiva y existirá un espacio entre cada comentario. Mientras que en false se vera todo junto.<br /><br /><strong>**</strong> En donde dice: andrewmusicmovie.blogspot.com cámbialo <strong>por la dirección de tu blog</strong>.<br /><br /><span style="color:#cc0000;">Vía:</span> <span style="color:#3333ff;">Hasckospere</span> y <span style="color:#3333ff;">Beautiful Beta</span><br /><br /><a href="http://ayudaparaelblog.blogspot.com/2007/01/ltimos-comentarios-en-el-blog-22.html"><span style="color:#3333ff;"><u>Últimos Comentarios (Blogger)</u></span></a></div></span>Andréshttp://www.blogger.com/profile/04548942015666698493noreply@blogger.com37