cosas para el blog

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.

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

, y la posición en que aparezcan lo va a determinar el parametro derecho o izquierdo que hayas puesto arriba en "float" (en Page Structure) para cada una de las columnas.


Ahora opcionalmente se puede configurar el ancho que va aparecer en el editor de elementos.

Busca el código que sale en negro y le pegas abajo el código que sale en rojo.

/** Page structure tweaks for
layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}

body#layout #outer-wrapper {

width: 970px;

}

Este post fue verificado usando la plantilla HARBOR de BLOGGER2 , y el resultado de la misma puede bajarse dandole -click aca- para que puedan comparar y verlo puesto en practica. Es un archivo .txt por lo que no ocupas ningún programa extra para verlo.

Seguiremos añadiendo ejemplos, ya que en principio funciona con cualquier plantilla.

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>



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

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.

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

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

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>



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



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



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



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


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



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



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


<b:include name='feedLinks'/>


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



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


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

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

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>


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.

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.