En otro post os contaba como insertar también un reproductor mp3 en vuestro blog o web pero debido a algunos problemas ya no funciona correctamente.
Hoy os traigo una herramienta increible y mucho más sencilla que la anterior. Se trata de un reproductor online y lo podemos encontrar en Goear.
Lo unico que tendremos que hacer es entrar en la web, buscar la canción que deseamos que suene en nuestra página web y una vez encontrada (los resultados aparecen más abajo), pinchamos sobre ella. Se nos abrirá una página con el reproductor y la canción que hemos elegido, de tal modo que solo tenemos que copiar el código que aparece en el campo This song in your site: y pegarlo en el lugar donde deseamos que aparezca en nuestra página web. Aqui os dejo una canción que seguro que os gusta como ejemplo:
Reproductor insertado en tu web o blog
Como agregar traductor google a nuestra web
Muchos de vosotros ya conoceréis esta herramienta pero siempre hay algún despistado que aún no la conoce.
Google deja a nuestra disposición un widget que permite traducir nuestra página web a infinidad de idiomas, dando asi la posibilidad a nuestros visitantes extranjeros a exarle un vistazo al blog antes de asustarse. Aquí os explicaré dos sencillos pasos para implementar este widget en vuestra web o blog:
1) Si poseéis un blog en blogger, os he facilitado la implementación en un sencillo paso. Simplemente tendréis que buscar el traductor que tengo implementado en la parte derecha del blog y pulsar en el botón Obtener este widget.
De esta manera se os abrirá vuestro perfil de blogger preguntandoos si deseáis añadir el nuevo artilugio. Aceptais y después podéis mover el widget en la parte de la plantilla que más os guste, así de sencillo.
2) Si deseáis añadirlo a una página web su implementación es bien sencilla, entramos en la página del widget de google y pulsamos el botón Añadir a tu página web.
Una vez realizado este paso, nos permitirá personalizar el traductor a nuestro gusto, tamaño, colores, idioma. Es importante seleccionar primero el idioma ya que si lo cambiamos despues nos deshará todos los cambios realizados hasta el momento.
Una vez tengamos personalizado el traductor pulsamos Vista previa de las modificaciones y por último Obtener el código.
Para implementarlo solo tendremos que copiar el código obtenido donde queramos mostrarlo.
Es importante que escribáis correctamente ya que las faltas ortográficas no las traduce.
Como destacar los comentarios del autor en tu blog
Este es un truco tan sencillo como maravilloso ya que nos permite destacar los comentarios que escribimos como autores de nuestro blog entre los distintos comentarios de los lectores.
Guardamos nuestra plantilla actual como siempre antes de modificar nada. Entramos en edicion html y expandimos los artilugios. Una vez hecho esto buscamos la parte de codigo que hace referencia a los comentarios y añadimos el código en azul.
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
Una vez añadido este codigo, tendremos que poner el estilo que queremos que tenga nuestro comentario asique buscamos la parte css de nuestra plantilla (justo encima de ]]></b:) y añadimos lo siguiente:
blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
background:#C3FDB8;
}
Con estos sencillos pasos haremos que nuestro comentario destaque sobre los demas, cosa que vendra muy bien a nuestros visitantes a la hora de resolver sus dudas y nos encuentren facilmente.
Para personalizar el estilo del comentario a vuestro gusto lo podréis hacer cambiando los valores de estas lineas:
border:1px dotted #254117;
background:#C3FDB8;
Espero que no os sea muy complicado y que os dirva de ayuda, aqui os dejo un ejemplo con mi comentario personalizado:
Como poner efecto nieve en mi web o blog
Con motivo de las fechas en las que nos encontramos, me puse ha buscar algo con lo que poder decorar nuestra página web o blog durante el invierno y las navidades. Pues bien, lo encontre gracias al Escaparate de Rosa. Se trata de un script que da un efecto de nieve en nuestro sitio web.
Para integrarlo es muy fácil, simplemente tendremos que ir a la pestaña diseño, editar html y justo antes de la etiqueta </body> , pegamos el siguiente código:
<script type="text/javascript" src="http://agudovk.googlepages.com/snow.js"></script>
Recordar que antes de modificar la plantilla de nuestra web es importante guardarla por si acaso hacemos algo mal. También os recomiendo descargaros el script y alojarlo en el servidor que soláis utilizar para vuestras imágenes y demás archivos.
AQUI os dejo una página de ejemplo
Como integrar enlaces exponsor en blogger
Hace unas semanas les comentaba que iba a probar eXponsor, un sistema de venta de enlaces en el que te pagan una cuota fija al mes. Pues bien, hasta el momento no sabía que tal funcionaría ya que los enlaces los asignan los primeros 15 días de cada mes. Hoy día 12 cuando ya pensaba que este mes no iba a tener noticias de ellos... sorpresa, 21 enlaces asignados.
eXponsor me ha asignado primero los enlaces en las paginas que más PR tengo (2 páginas de PR3), asignandome 10 enlaces a cada uno. Calculando lo que paga Exponsor por cada PR y teniendo los 500 enlaces vendidos he calculado la parte que generaria con esos primeros enlaces y la verdad es que para ser el primer mes me ha sorprendido. Con esos 21 enlaces solo con dos páginas PR3 genero unos 9$/mes, pero mes a mes tengo la esperanza y conocimiento de que irá a más.
En blogger, ya que este no soporta php, la integración a de acerse de forma manual. Si se trata de la página principal es sencillo, creamos un nuevo widget html/javascript y pegamos los enlaces que nos envian. Si los enlaces que nos asignan deben encontrarse en un post particular, la integración será también sencilla. Buscamos el post deseado y lo editamos añadiendole los enlaces en la parte que queramos. Podemos utilizar tablas u otros recursos para que no distorsione nuestro diseño o intentarlo disimular.
En definitiva, a pesar de lo que pensaba en un principio, parece que eXponsor puede ser un sistema bastante rentable. Si queréis probarlo podéis registraros aqui. Para cuanquier duda consultarme
Como poner una encuesta en mi web o blog
Crear una encuesta para nuestra página web o blog puede servir de mucha ayuda para conocer la opinión de nuestros visitantes acerca de nuestro blog, web o simplemente algún tema de interés que tengamos.
En blogger como muchos sabréis existe la posibilidad de crear encuestas pero no permite modificar el diseño a nuestro gusto por lo que no siempre es demasiado útil está utilidad. Para aquellos webmaster que dispongan de una web en lugar de un blog también les será de gran utilidad esta herramienta.
Poll4you nos da la posibilidad de crear y personalizar nuestras propias encuestas y colocarlas en nuestro sitio web. Es muy sencillo de utilizar y no es necesario registrarse en su página web. Para colocar nuestra encuesta tendremos que seguir estos 4 pasos:
1) Entramos en http://www.poll4you.com/ y en la parte superior derecha encontraremos un recuadro donde iremos poniendo las opciones de nuestra encuesta. El primer paso será escribir la pregunta que deseamos realizar a nuestros visitantes y el numero de respuestas posibles que tendrán.
2) En el segundo paso, escribiremos las posibles respuestas que deben elegir los usuarios.
3) En este paso será donde diseñaremos nuestra encuestra, colores, tamaño, texto de los botones... Escribimos nuestro email y la url de nuestra web y pulsamos en el botón Give me the Poll.
4) Por último colocaremos la encuesta en nuestra web. Si tienes un blog en blogger, bastará con copiar el código que nos proporcionan y añadir un nuevo elemento html/javascript. Pegamos el código y listo. Si nuestro sitio es una página web, pearemos el código en la parte donde queramos que aparezca la encuesta.
Como véis es muy sencillo de integrar y apenas se tardan 2 minutos. Creo que puede ser de muicha utilidad
Como cambiar el icono del raton
Hoy os mostraré como podemos cambiar el típico icono del cursos cuando entremos a nuestra pagina web o blog. Es un recurso que puede resultar muy llamativo y original, siempre que se elija bien en nuevo cursor que pongamos, ya que puede no gustar a todo el mundo.
Si tenemos un blog en blogger, nos vamos a diseño, edicion html, y donde tenemos todos los estilos de nuestra plantilla buscamos el estilo definido para nuestro body. Este código tiene que estar encima de la etiqueta ]]></b:skin>. Una vez localizado, el texto que debemos colocar dentro de body { es el siguiente:
CURSOR: url(URL DEL CURSOR);
Si nuestro sitio web es una página normal y corriente, tenemos dos posibilidades. Si disponemos de una hoja de estilos css externa simplemente añadimos la misma linea dentro del estilo de nuestro body. Si por el contrario no tenemos una hoja de estilos, tendremos que insertar el siguiente código justo encima de la etiqueta </head>:
<style type="text/css">
CURSOR: url(URL DEL CURSOR);
</style>
Por último, solo tendremos que cambiar donde pone URL DEL CURSOR por la dirección donde tengamos alojado el nuevo icono para nuestro ratón.
Como poner nube de etiquetas en movimiento
Practicamente todo los blogs hoy en día tienen sus articulos clasificados en una lista de categorías normal y corriente, yo el primero jeje.
Bien pues desde El Escaparate de Rosa nos enseñan un truco para añadir a nuestra sidebar de blogger una curiosa y bonita nube de etiquetas en movimiento. La verdad es que queda bastante bien y original asique os recomiendo probarla.
Para colocarla nos vams a blogger, diseño, edicion de html y sin expandir los artilugios buscamos la etiqueta <b:section class='sidebar' id='sidebar' preferred='yes'>. Justo debajo añadimos el siguiente código:
<b:widget id='Label50' locked='false' title='Nube de etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Probarlo seguro que os gustará
Como quitar el numero de las etiquetas en blogger
¿Les resulta poco atractivo o algo molesto ver el número de entradas que hay en cada etiqueta de vuestro blog?.
Hoy os explicaré como eliminando una sola linea, este número entre paréntesis desaparecerá. Lo único que deberemos hacer será ir a diseño, edición html, expandimos los artilugios de nuestra plantilla y buscamos la etiqueta (<data:label.count/>).
Una vez localizada, eliminamos la etiqueta de tal modo que el aspecto de nuestro blogger quedará de la siguiente manera.
Como véis en la imágen desaparece el paréntesis con el numero de articulos de cada etiqueta quedando el diseño de nuestro blog mucho mas vistoso y agradable.
Leer más......
Como poner emoticonos en comentarios de blogger
Aquí les traigo un script que permite introducir emoticonos en los comentarios de blogger. Antes de nada quiero comentaros que para que el script funcione correctamente, deberemos tener los comentarios incrustados en el post.
¿Cómo funciona?
Se trata de un script que recibe todo el texto de nuestro comentario, busca una serie de caracteres y lo sustituye por la imágen que está asignada. También añadiremos una leyenda en la parte superior justo antes de la caja donde escribiremos el comentario, para que nuestros visitantes sepan en todo momento coo poner el emoticon que deseen.
¿Cómo añadirlo en nuestro blog?
Lo primero que debemos hacer es añadir justo antes de la etiqueta </body> el siguiente código:
<b:if cond='data:blog.pageType == "item"'>
<script src='http://agudovk.googlepages.com/Emoticonos.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>
De está manera hemos añadimos el script que sustituira los caracteres por emoticonos. El siguiente paso será colocar la leyenda, para ello buscamos la etiqueta <iframe allowtransparency='true' y justo encima pegamos el siguiente código html:
<table width='400px'>
<tr>
<td colspan='10'>Emoticonos en blogger</td>
<td colspan='3'><a href='http://ayudaparamiweb.com'><img src='http://agudovk.googlepages.com/ayudaweb.png' style='border:0;'/></a></td>
</tr>
<tr>
<td><img src='http://agudovk.googlepages.com/com-smile.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-cry.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sad.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-tongue.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-lol.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-oops.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-blink.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-neutral.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-secreto.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sorpresa1.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sorpresa2.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-mad.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-confuso.gif'/></td>
</tr>
<tr>
<td>:)</td>
<td>:'(</td>
<td>:(</td>
<td>:P</td>
<td>:D</td>
<td>:$</td>
<td>;)</td>
<td>:-I</td>
<td>:-X</td>
<td>:o</td>
<td>:O</td>
<td>O</td>
<td>:/</td>
</tr>
</table>
Pues ya está, a partir de ahora vuestros comentarios disfrutarán de graciosos emoticonos que animarán un poco más vuestro blog.
Como insertar juegos en mi blog
Está bien traerles siempre alguna herramienta o algún truco con el que podéis mejorar vuestro blog o página web, pero hoy me apetece hablarles de otra cosa. También es un elemento para vuestro sitio web, pero está vez un poco más entretenido.
¿A quién no le apetece de vez en cuando jugar una partidita a los típicos juegos para pc o consola, pero en tus blogs favoritos? Pues bien en poqbum nos ayudan a conseguirlo.
Podrémos encontrar una gran variedad de juegos que añadir en nuestro blog, para que, ¿porque no?, nuestros visitantes se entretengan un poco entre artículo y artículo.
Para insertarlos en nuesra web o blog es bien sencillo, busca el juego que más te guste, incluso podrás probarlo. Una vez encontrado copia el código que nos facilita la web y págalo donde quieras que aparezca en tu código html o plantilla del blog.
Iré agregando algunos juegos en mi blog para que de vez en cuando juguéis unas partidas, ya me comentaréis que os parecen. Os dejo uno para que probéis:
Como añadir últimos post en el sidebar de blogger
Buscando en la red alguna cosa útil que poder mostraros hoy, encontre un sencillo script que nos permitirá añadir en la sidebar, los últimos post que hemos publicado.
En El Escaparate de Rosa está muy bien explicado pero les haré una pequeña guía aquí tambien para que podáis integrarlo en vuestro blog.
Lo único que tendremos que hacer será ir a configuración, diseño, elementos de la página y aqui añadimos un nuevo elemento html/javascript. El código que debemos pegar será el siguiente:
<script src="http://lejaniaimposible.googlepages.com/ultimospost.js">
</script>
<script language="javascript">
var numposts = 10;
var numchars = 120;
var showpostdate = false;
var showpostsummary = true;
var standardstyling = true;
</script>
<script src="http://NOMBRE_DEL_BLOG.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts">
Tendréis que modificar donde pone Nombre_del_Blog por vuestra dirección. Tambien podréis modificar algunos valores el script:
var numposts Este es el número de entradas que queremos mostrar.
var numchars Aquí elegiremos el número de letras de cada post que mostraremos.
var showpostdate Elegiremos true o false depende de si queremos mostrar la fecha.
var showpostsummary Con true mostramos el ...(leer mas) y con false no se verá.
var standardstyling Según pongamos true o false, cambiará el estilo del texto. Os recomiendo dejarlo en true, queda mucho más bonito.
Deshabilitar botón derecho del ratón en nuestra web
Hoy vamos a ponerselo un poco más difícil a aquellos webmasters que se dedican a copiar el contenido de los blogs o web de otras personas. Para ello os traigo un pequeño truco el cual consiste en desactivar el botón derecho dentro de nuestra web.
Es cierto que hay otras formas de copiar el contenido e imágenes pero al menos no será tan sencillo como darle al botón derecho y copiar.
Lo que deberemos hacer es buscar la etiqueta <body> y la sustituimos por el siguiente código:<body oncontextmenu='return false' onkeydown='return false'>
Guardamos los cambios y listo, el botón derecho estará deshabilitado para todos los visitantes.
Como poner un menú en blogger
He recibido muchas peticiones sobre una guía para añadir un menú horizontal a nuestro blogger como el que tengo colocado en la parte superior de Ayuda para mi web.
Lo primero que deberéis hacer es leer este post donde explico donde y como descargar varios menús verticales.
En el fichero que hemos descargado encontraremos un archivo .css y un index.html, también encontraremos las imágenes necesarias para nuestro menú. Lo primero que debemos hacer es ir a edicion de plantilla de nuestro blogger y expandimos artilugios. Ahora abrimos el fichero .css como archivo de texto, copiamos el contenido de este y lo pegamos justo encima de la etiqueta
]]></b:skin>
ul#menu { width: 100%; height: 43px; background: #FFF url("images/menu-bg.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; }
ul#menu li { display: block; float: left; margin: 0 0 0 5px; }
ul#menu li a { height: 43px; color: #777; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; }
ul#menu li a:hover { color: #333; }
ul#menu li a.current{ color: #FFF; background: #FFF url("images/current-bg.gif") top left repeat-x; padding: 5px 15px 0; }
Lo siguiente que debemos hacer es alojar las imágenes de nuestro menú en un servidor para poder utilizarlas en nuestro blog, si no sabéis donde subir las imágenes os recomiendo este servidor de ficheros.
Una vez subidas nuestras imágenes, tendremos que cambiar en el código que hemos añadido anteriormente, donde pone URL de la imágen por la dirección donde las hemos subido.
Ya solo nos queda un paso, una vez que hemos definido el estilo de nuestro menú, solo nos faltará añadirlo a nuestro blog. Entre las etiquetas <body></body>, añadimos el siguiente código:
<ul id="menu">
<li><a href="#" title="">Pagina1</a></li>
<li><a href="#" title="">Pagina2</a></li>
<li><a href="#" title="">Pagina3</a></li>
<li><a href="#" title="">Pagina4</a></li>
<li><a href="#" title="">Pagina5</a></li>
</ul>
Cada fila será un apartado del menú por lo que podréis añadir y eliminar las que queráis. Por último sustituir "#" por la dirección de la página a la que queréis que vaya el enlace de cada apartado y "PaginaN" por el texto que quieres que aparzca en cada opción. De esta forma ya tendréis vuestro menú integrado en blogger.
Es más sencillo de lo que parece, intentarlo.
También te puede interesar:
Como crear un menús
Añadir enlace para agregar a menéame en cada post
Como muchos de vosotros sabéis, menéame es uno de los mayores portales de envío de artículos que existe.
Hoy quiero explicaros como podréis añadir un enlace para que vuestros visitantes envíen la noticia o artículo a menéame desde cada uno de vuestros post. De esta manera visitantes que hayan quedado agradados con un artículo específico podrán enviarlo sin que lo tachen de spammer (y eso que no es muy difícil que lo hagan jaja), y además tener la posibilidad de recibir las miles de visitas que está web puede acarrear. Cierto que la mayoria de estas visitas no vuelven, pero muchas otras si lo harán.
Lo primero que debemos hacer es elegir donde queremos colocar nuestro enlace. Yo os lo explicaré según como lo tengo en el blog, pero esto como todo es a gusto de cada uno.
Decidí colocarlo el primero, justo después de la hora. Para ello nos vamos a edición html, expandir artilugios y localizamos el siguiente código:
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
Justo debajo añadimos lo siguiente:
| <img alt='meneame' src='URL imagen menéame'/> <a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'> menéame </a>
Os explico el código. El caracter "|" ejercerá de un bonito separador que hará que el diseño parezca algo más profesional. A continuación añadimos la imágen de meneame y por último, el enlace que envía el artículo a la web. Solamente tendréis que cambiar URL imágen meneame por la dirección donde tengáis alojado vuestro icono.
Por último os aconsejo poner en el resto de elementos el separador "|", en mi caso lo tuve que colocar después de los siguientes códigos:
<b:if cond='data:post.allowComments'>
|
y...
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
|
Realmente lo que hacemos es añadir un enlace en una aparte determinada del blog, pero también sirve para blogs que no sean blogger y para vuestras páginas web. Añadir el enlace del código que os deje donde deseáis que se muestre y no tendréis problemas.
Si les gusta algún artículo en especial no duden en enviarlo, muchas gracias.
Ranking de cada post de blogger (estrellas)
Hace poco blogger por fin añadio la opción de poder calificar cada uno de los post de blogger. Para ello simplemente tendrás que entrar en la pestaña diseño, y en editar Entradas del blog seleccionar la opción:
El problema es que en algunas plantillas no está añadido el código necesario para mostrar el ranking por lo que tendremos que añadirlo nosotros mismo. Para ello vamos a editar plantilla, expandimos artilugios y buscamos la etiqueta <b:include name='feedLinks'/>. Justo debajo pegamos el siguiente código:
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
Una vez realizado este paso tendremos que colocar el ranking donde deseamos que se muestre. Podéis colocarlo debajo de cualquiera de estas tres etiquetas según vuestra preferencia:
class="post-footer-line post-footer-line-1">
class="post-footer-line post-footer-line-2">
class="post-footer-line post-footer-line-3">
El código que debeis pegar justo debajo de la etiqueta que hayáis elegido es el siguiente:
<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor'
expr:g:text-color='data:textColor'
expr:g:url='data:post.absoluteUrl'
g:height='42'
g:type='RatingPanel'
g:width='180'>
</div>
</b:if>
</span>
Una vez realizado este paso, damos a vista previa y si todo se muestra correctamente guardamos la plantilla. De esta manera vuestros visitantes podrán calificar cada uno de vuestros post y saber cuales gustan más que otros.
También te puede interesar:
Calificar los post de tu blog
Como añadir reproductor flash a mi web o blog
Hoy les explicaré como añadir un reproductor de música en vuestro blog o página web donde los visitantes puedan escuxar la canción que queráis ya sea cuand pulsen el botón play, o automaticamente al entrar en la web.
Simplemente tenéis que añadir este codigo donde queráis que aparezca el reproductor:
<object type="application/x-shockwave-flash" data="http://www.estvideo.net/dew/media/dewplayer-vol.swf?mp3=http://tucancion.mp3&bgcolor=FFFFFF&showtime=1" width="240" height="20">
<param name="movie"value="http://www.estvideo.net/dew/media/dewplayer-vol.swf?mp3=http://tucancion.mp3&bgcolor=FFFFFF&showtime=1">
</object>
Este código exclusivamente mostrará nuestro reproductor flash en nuestra web o blog. Para que reproduzca la canción que queremos debemos subir esta en al gun servidor de almacenamiento de ficheros. Si no conocéis ninguno os recomiento leer este post.
Una vez subido nuestro fichero de musica .mp3 deberemos cambiar en el código anterior la parte donde pone http://tucancion.mp3 por la ruta completa donde está almacenada tu canción.
Hay varios tipos de reproductor e incluso podréis cambiar el diseño del mismo. Para ello os aconsejo que leais este post exlicativo en Ayuda para el blog.
Aqui les dejo un ejemplo con mi canción:
Poner una imagen de calendario en la fecha de mi blog
Hoy, visitando varios blogs, he observado que muchos bloggers colocan la fecha de cada entrada dentro de una imágen de tipo calendario. He estado buscando varias imágenes y al final he encontrado una que queda bastante bien.
Asique os voy ha explicar como podeis hacerlo:
Lo primero que debemos hacer es cambiar el formato con el que muestra las fechas nuestro blog. Para ello nos vamos a configuración, formato y en la opción Formato de cabecera de la fecha elegimos la penúltima que aparece. Ejemplo: 05 agosto 2008.
Lo siguiente que debemos hacer es ir a edición de html, expandimos artilugios y justo antes de la etiqueta </head> pegamos el siguiente script:
<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(dia+mes+anio);
}
</script>
El siguiente paso será localizar la etiqueta <data:post.dateHeader/> y la sustituimos por el siguiente código:
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
por último buscamos la etiqueta ]]></b:skin>
y justo encima pegamos lo siguiente:
/* Calendario-Fecha
-------------------- */
#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(VUESTRA IMAGEN) no-repeat;
border: 0;
width:65px;
height:50px;
}
.fecha_mes {
font-size: 13px;
margin: 4px 0 0 13px;
color:white;
display: block;
}
.fecha_dia {
margin: 7px 0 0 14px;
display: block;
font-size: 14px;
color:#448088;
}
Tendréis que cambiar VUESTRA IMAGEN por la url donde tengais alojada vuestra imágen. Si colocais una imágen distinta a la que tengo yo puesta, es probable que la fecha no aparezca demasiado colocada y tengais que modificar los valores del margin.
Aqui os dejo la url donde esta alojada la imágen que tengo yo colocada por si la quereis coger.
http://agudovk.googlepages.com/calendar.jpg
Cualquier duda consultarme
Como abrir enlaces en una nueva ventana
Mucha gente por raro que resulte desconoce como puede hacer que sus enlaces se abran en un ventana nueva.
Simplemente tendremos que añadir la propiedad target="_blank" a nuestro enlace de tal modo que quede de la siguiente manera:<a href="http://ayudaparamiweb.blogspot.com" target="_blank">Ayuda para mi web</a>
Comentarios incrustados en blogger como wordpress
Hola a todos¡¡¡
Hoy tengo una buenísima noticia para todos los usuarios de blogger. Por fin, Blogger ha añadido la opción de añadir comentarios como en WordPress, es decir, incrustados en el árticulo, sin necesidad de pop-up, ni otra ventana, NADA, directamente, lo que hará que sea mucho más cómodo comentar y seguramente se notará en el número de comentarios que recibamos a partir de ahora de nuestras visitas.
Bien, la implementación es muy sencilla. Deberemos entrar en el draft de blogger ya que aun es una beta, pero parece que funciona perfectamente. Nos logueamos con nuestro usuario de google, vamos a configuración, comentarios, y seleccionamos la nueva opción que aparece, "incrustar comentarios...".
Así de fácil, a mi se me ha integrado perfectamente pero puede que haya personas a las que no le funcione a la primera al haber modificado algunas cosas de la plantilla. De todos modos no debería haber problema. si teneis algun problema postearlo e intentamos solucionarlo.Bueno chicos, a comentar como locos jeje no seais vagos
Aplicaciones Android recomendadas
Otros
Suscríbete
