Bueno esto es bastante fácil, tan solo hay que elegir en blogspot: Diseño>Añadir un gadget>Feed

Y ponemos el enlace a nuestro feed de comentarios o de entradas.
¿cual es tu feed?, bueno es algo como esto:

El de comentarios:
http://urldetublog/feeds/comments/default

El de entradas:
http://urldetublog/atom.xml

Ejemplo de como queda en la barra lateral de este mismo blog.

La gente de bloggerbuster.com desarrollo un widget para mostrar los diez que mas te comentan, tan solo hay que completar los datos, en filter your name hay que poner el nick que usas para comentar asi no cuenta tus comentarios, hacer click en customize y add to Blog.

Enlace al widget: http://bloggerbuster.com/scripts/topcommentersFiltername.html

Para los que no tienen ganas de entrar al enlace pueden copiar y pegar lo siguiente en un nuevo elemento HTML/Javascript:


<script type="text/javascript">
function pipeCallback(obj) {
 document.write('<ol>');
 var i;
 for (i = 0; i < obj.count ; i++)
 {
 var href = "'" + obj.value.items[i].link + "'";
 var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
 document.write(item);
 }
 document.write('</ol>');
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=720a4578c7b83dfce64615cb0ad3c642&url=http%3A%2F%2F[[[ACA LA URL SIN EL HTTP]]]&num=10&filter=[[[ACA TU NICK PARA QUE NO TE CUENTE]]]" type="text/javascript"></script>
<span style="font-size: 80%">Widget by <a href="http://www.bloggerbuster.com">Blogger Buster </a></span>


Ejemplo al costado en este mismo blog.

Añadir, quitar, modificar columnas

Me hice un blog para poner enlaces a todos mis blogs y necesité agregar una columna, lo cual hice bastante bien con el siguiente tutorial se los dejo ;) cualquier cosa que no salga chiflen

Primero debes ingresar a Edición de HTML y sería bueno que descargues la plantilla antes de hacerle cualquier cambio, por razones de seguridad.
Para empezar busca (control+f) /* Page Structure

Ahora cambia sección por sección, el ancho (width) por el que aparece abajo.

En algunos casos los nombres tienen ligeros cambios , pero en general siempre suelen mantener la esencia como decir main-wrapper puede aparecer como #main-wrap ... y asi sucesivamente.




#outer-wrapper{ (En esta se predetermina el ancho total del sitio)
width:970px;

#main-wrapper {(En esta se predetermina el ancho del contenido)
width:500px;

#sidebar-wrapper {(Columna lateral)
width:270px;

----------> un poco más abajo

#Header-wrapper{
width:970px;

----------> un poco más abajo

#Footer{
width:970px;

----

Si apareciera en ves de px el % de porcentaje, nada más lo borras y lo agregas tal y como aparece ahí arriba. Ejemplo
Si apareciera en #main-wrapper width:30%, debes cambiarlo por width:500px;

Ahora para agregar la nueva columna a la que vamos a llamar #lanueva , tienes que copiar el código en rojo y pegarlo al final de el #sidebar-wrapper(el azul) (a manera de ejemplo)

#sidebar-wrapper {
width: 270px;
float: right;
word-wrap:
break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden;
/* fix for long non-text content breaking IE sidebar float */

}


#lanueva {
width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Si te fijas #lanueva le pusimos un ancho de 200px , pero realmente la puedes poner del ancho que prefieras.

Eso si, el total de la suma de anchos del #sidebar-wrapper , #main-wrapper y #lanueva , debe ser equivalente al ancho #outer-wrapper, nunca superior.

Para el caso especifico de este tutorial el #outer-wrap mide 970px , el #main-wrap 500px, y el sidebar-wrapper 270px y #lanueva 200 px. Para una suma total de 970px .


Así como estan esos códigos #lanueva va estar alineada a la izquierda y #sidebar-wrapper a la derecha. En algunos templates el sidebar puede venir a la izquierda, por lo que deberias cambiar el float: left; por float: right; para el caso de la nueva, generalmente al contrario del lado en que se encuentre la columna lateral original.

Ahora vamos a añadirle tu PERFIL a #lanueva de manera temporal, con el fin de agregar contenido, arribita de
Siempre dejando un espacio, no pegadito a main-wrapper ya que es aparte.




preferred='yes'>


type='Profile'/>






Si lo que quieres es que las dos columnas queden juntas , en alguno de los lados, debes pegar el código despues de

 Fuente:http://maestroweb.ticoblogger.com/2007/08/como-agregar-una-columna-extra-para-mi_12.html

Para cambiar el texto que dice entradas antiguas y entradas reciente por otro o por una imágen hay que ir a Diseño>Edición Html> activar "Expandir artilugios" y buscamos mas o menos lo siguiente





<DIV class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>

<SPAN id='blog-pager-newer-link'>

<A class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></A>

</SPAN>

</b:if>

<b:if cond='data:olderPageUrl'>

<SPAN id='blog-pager-older-link'>

<A class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></A>

</SPAN>

</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A>

<b:else/>

<b:if cond='data:newerPageUrl'>

<A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A>

</b:if>

</b:if>

</DIV>



<data:newerPageTitle/> - Corresponde al texto “Entrada más reciente”

<data:olderPageTitle/> - “Entradas antiguas”

<data:homeMsg/> - “Página principal”





Para cambiarlo directamente se eliminan y remplazan esas tres lineas  por lo que se quiera. Asi podemos remplazarlas por una imagen. por ejemplo





<img alt='data:newerPageTitle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi81kggXMpO8ziYRmC61AtHN25lKAxP8JZ7_sZ8o4S5BkC6LTwmvqeR6FMfBwCtk84ucXMPjmB1ixppbOMM4UAF_hyphenhyphentUjpt1yT1bwzMPQuQwaA1x4icn5_4aE312PjVTOYE60wdRZFP21U/s1600/botong_atras.gif' />





Ejemplo de como queda en este mismo blog.

Cuadritos, Cajas de textos.

Bueno dejo algunos ejemplos útiles de cajas para poner texto e imagenes. Se le pueden ir modificando los atributos como el color de  fondo, ancho largo, etc.
Scroll automático


<div align="center"><table bgcolor="#990000" border="1" width="200"><tbody><tr><td align="center"><marquee scrollamount="1" direction="up" height="50"><span style="color:#ffffff;">

</span></marquee></td></tr></tbody></table></div>



Scroll con barrita


Este sería:




<DIV style="BORDER-RIGHT: #6666ff 3px dashed; BORDER-TOP: #000000 3px dashed; SCROLLBAR-FACE-COLOR: #00FF66; SCROLLBAR-HIGHLIGHT-COLOR: #cce9fd; OVERFLOW: scroll; BORDER-LEFT: #000000 3px dashed; WIDTH: 193px; SCROLLBAR-SHADOW-COLOR: #ffbbf1;  SCROLLBAR-3DLIGHT-COLOR: #ddaaff; SCROLLBAR-ARROW-COLOR: #b444ff; BORDER-BOTTOM: #000000 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #333366; HEIGHT: 220px; BACKGROUND-COLOR: #99FF99" align=center>



<P> XXXXXXXXXXXXXXXXXXXXXXXXXX </P></DIV>


BACKGROUND-COLOR es el color de fondo

SCROLLBAR--FACE-COLOR es el color de las flechitas

Y hay mas colores que podéis probar
XXXXXXXXXXXXXXXXXXXXXXXXXX


Otra con barrita:



<DIV align=center>

<DIV style="SCROLLBAR-FACE-COLOR: #000000; BORDER-LEFT-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #333333; OVERFLOW: scroll; WIDTH: 259px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px dashed; BORDER-RIGHT-STYLE: ridge; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; BORDER-LEFT-STYLE: ridge; HEIGHT: 211px; BACKGROUND-COLOR: #000000; BORDER-RIGHT-COLOR: #ffffff" align=center>

<P> <P></P></DIV></DIV>




Bueno esas se pueden ir modificando para lo que necesite cada uno, para obtener un color en Bgcolor se puede usar, por ejemplo  esta pagina

Cuadro "suscribirse por e-mail"

Para hacer esto es necesario tener una cuenta en feedburner como conte en la entrada anterior.
Luego vamos a feedburner, a la pestaña “Publicize”, y en la barra de la izquierda elegimos la opción “Suscripciones por email”.
Ponemos Activar, copiamos el código y lo pegamos en un nuevo Gadget HTML/JAVASCRIPT, se puede cambiar el texto que esta en ingles por uno en español, y hasta se puede eliminar el enlace a feedburner.
Con eso ya esta listo ;)

Si tenes un blog de blogger aunque no lo sepas ya tenes un feed este es:

http://tublog.blogspot.com/atom.xml


Podes usar este pero el probelma es que no te dice cuanta gente se suscribió, no podes agregarle publicidad, no podes hacer que se suscriban por e-mail, en fin no podes hacer mucho. Para hacer todas estas cosas el mejor que vi y que recomendaban todos es
feedburner, que no es casualdad que sea del dominio de google el cual lo compro por rumores ya que no ha dicho por mas o menos una modesta suma de 100 millones de dolares. 0.o


1.hay que  Registrarse.
2. ponemos en el cuadro que aparece nuestro feed:
http://tublog.blogspot.com/atom.xml
3. elegimos el titulo del blog para el feed y el nombre del feed.
4. podemos
abajo donde dice “ir directamente a la gestión del feed”
5.Hay que ir a nuestro panel de blogger, y elegir la pestaña “Configuración”>la subpestaña “Feed del sitio”> en la opción “Publicar URL redireccionada del feed”, copiamos la URL del feed de feedburner que acabamos de crear, que será algo parecido a: http://feeds.feedburner.com/titulodetublog.

6. Para terminar vamos a la pestaña "diseño"> "añadir gadget">"enlaces de suscripcion" y listo.

Nube de etiquetas, muy coqueto.

Viste en la blogueria, la cual lo tomo de bloggerbusters
Ejemplo al costado de este blog o al costado de este blog

Para añadirlo buscamos en edición>Html, con la casilla de expandir artilugios tildada

<b:section class='sidebar' id='sidebar' preferred='yes'>
Y abajo pegar este código:
<b:widget id='Label99' locked='false' title='Labels' 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>


Y listo se agrega como un gadget mas.

La mejor forma de comentarios en blogger

La mejor forma que vi hasta ahora es la que uso, asi que para el ejemplo tan solo toca en comentarios o anda bajo la entrada y fijate como lo tengo

Primero en blogger>configuración>comentarios tiene que estar la opcion en ventana emergente para que se vean bien.

Expande la plantilla de artilugios y busca </body>, y añade este código justo antes:


<script languange='javascript'>function showcomment(a,b){var jackbookdotcom = document.getElementById(a);jackbookdotcom.style.display = 'none';jackbookdotcom = document.getElementById(b);jackbookdotcom.style.display = 'block';}</script>

Después buscamos este:

<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/>

</b:if></a></b:if></b:if></span>


Y lo sustituímos por este:

<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.url + "#comments"' ><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></b:if></b:if></span>

Por último buscamos este:

<b:includable id='comments' var='post'>

<div class='comments' id='comments'><a name='comments'/>

<b:if cond='data:post.allowComments'><h4><b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:<b:else/><data:post.numComments/> <data:commentLabelPlural/>:</b:if></h4><dl id='comments-block'><b:loop values='data:post.comments' var='comment'><dt class='comment-author' expr:id='"comment-" + data:comment.id'><a expr:name='"comment-" + data:comment.id'/><b:if cond='data:comment.authorUrl'><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><b:else/><data:comment.author/></b:if><data:commentPostedByMsg/></dt><dd class='comment-body'><b:if cond='data:comment.isDeleted'><span class='deleted-comment'><data:comment.body/></span><b:else/><p><data:comment.body/></p></b:if></dd><dd class='comment-footer'><span class='comment-timestamp'><a expr:href='"#comment-" + data:comment.id' title='comment permalink'><data:comment.timestamp/></a><b:include data='comment' name='commentDeleteIcon'/></span></dd></b:loop></dl><p class='comment-footer'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></p></b:if><div id='backlinks-container'><div expr:id='data:widget.instanceId + "_backlinks-container"'><b:if cond='data:post.showBacklinks'><b:include data='post' name='backlinks'/>

</b:if></div></div></div>

</b:includable>

Y lo sustituímos todo por este:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<!--
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
-->
<div class='onepx'>
<dl id='comments-block' style='height: 1px;overflow:hidden;'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
<!--
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
-->
<div id='comment-parent' onmouseover='showcomment("hoverme", "comment-child");' style='margin-bottom: 50px;'>
<h3 id='hoverme' style='display:block;'>
<img alt='Deja aqui tu comentario' src='URL IMAGEN QUE OCULTA EL FORMULARIO' title='Deja aqui tu comentario'/>
</h3>

<!-- este iframe de abajo es el formulario de comentarios. Puedes modificar el alto y el ancho y añadir imagen de fondo, entre otras modificaciones -->

<div id='comment-child' style='border:none; display: none; height:750px; width: 440px; margin-bottom: 5px; background-image: url (AQUI LA URL IMAGEN FONDO FORMA COMENTARIOS); border: 2px solid red;'>
<iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' style='border:none;' width='100%'/>
<br/>
</div>
<!-- fin del iframe -->
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>


Donde hay que poner donde dice las imágenes, la que se muestra y se va al pasarle el mousse por encima y la imagen de fondo. Si queres poner un color de fondo, sustituí
backgound-image: url (AQUI LA URL IMAGEN FONDO FORMA COMENTARIOS)

Por background: #f5f5f5, o el color que quieras

Visto y tomado de La blogueria

Estas opciónes se pueden activar desde entradas>Editar entradas en http://draft.blogger.com pero la mayoria de las veces no funciona y hay que, ademas de activarlo, añadir manualmente lo siguiente en edición HTML con la casilla de Expandir artilugios Activada:
Buscamos


<div class='post-footer-line post-footer-line-3'/>

O puede que aparezca sin el div asi:

<p class='post-footer-line post-footer-line-3'/>

O la footer-line-1, o la foteer-line-2, dependiendo dondque se quiera agregar, lo mas comun es al final,pero por ejemplo yo lo tengo en la 1

<!--ESTRELLITAS-->
<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>
lt;!--FIN  ESTRELLITAS-->
<!--REACCIONES-->

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'><tr>
<td valign='center'><span class='reactions-label'>
<data:top.reactionsLabel/></span>
</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>
<!--FIN REACCIONES-->



Como se ve en el código esta el de las reacciones y el de las estrellitas tipo youtube para terminar de agregar las estrellitas buscamos
<b:include name='feedLinks'/>

y debajo añadimos:

<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>



Puede que se agreguen dos bloques de estrellitas para eliminar el segundo buscamos la segunda vez que aparece

<b:if cond='data:top.showStars'>

y eliminamos todo el bloque.

Para mostrar las entradas como lo tengo a la derecha vamos a:


Ponemos la dirección de la web de la que queremos mostrar las entradas, elegimos el modo, fijo oestático, con fondo sin fondo, tipo de letra, cantidad de entradas (máx. 5). Copiamos el código lo agregamos en un nuevo gadget Java/HTML y listo el pollo.
Ejemplos: Acá

Para crear un link que lleve a una entrada al azar añadir el siguiente código en un nuevo gadget Java/HTML:




<div id="myLuckyPost"></div> <script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; window.location = entry.link[0].href;} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Click <img src="http://img368.imageshack.us/img368/4980/dadosbut7.gif">'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>


Podés cambiar donde dice Click por lo que te parezca como tambien la imágen de los dados por la que quieras.
Ejemplo: en la barra lateral de este blog bajo el cuadro de entradas aleatorias dinámicas.

Añadir código HTML el los post

Es una cagada que  no puedas citar códigos HTML, para hacer eso usamos esta página
Simple Code
Pegamos lo que nos generó y listo.

Ejemplo:

<head>

<script cualquiera> </script>

</head>

Ponerle un favicon a tu blog

Es asi de simple:
Abajo del head agregar

<link rel="shortcut icon" href="link-de-la-foto"></link>

Remplazar link-de-la-foto por su foto tiene que ser pequeña, algo asi como un emoticon. 16x16.

Crear listas de musica

Ayer estube como 3 horas viendo y probando servicios para poner musica en el blog y encontré uno que me dejo tan satisfecho que le hago un post. Probé estos:
MediaMaster
Goear
Sonific
Ivoon
myflashfetish
El mejor el último, fácil, rápido y completo. Hasta tiene para hacer listas de videos lo cual puede que haga algun día. Tenía mucha musica como Goear pero un mejor reproductor y mas personalizable y si no esta la musica que buscas podes subirla.

Me resultó interesante ver que el servicio que ofrecen Myflashfetish es un rejunte de servicios de otras páginas, usa las canciones encontradas en youtube.com y en seeqpod.com, los reproductores de mixpod.com y la paleta de colores de colourlovers.com

Asi que el que quiera poner musica le recomiendo


Les dejo la lista de canciones que me armé, es una lista de canciones en español, la mayoria de protesta. Con algo de letra y no de letra hablando del amor que de esas esta repleto.


MusicPlaylistRingtones

Siguiente Ir a página principal

LinkWithin

Related Posts with Thumbnails

Blogger Template by Blogcrowds

 
ir arriba