<div class='post-footer-line post-footer-line-1'>O puede ser 2,3 ó 4 la línea de post-footer
<a expr:href='"http://twitter.com/home?status=Leyendo " + data:post.title + " " + data:post.url + " vía @<b>usuariotwitter</b>"' title='Coméntalo en Twitter'>Manda este post a Twitter</a>
Tiene que cambiar donde dice "usuariotwitter" por tu usuario de Twitter
Fuente: TheBatzuk
Puedes obviar pasos (si tu quieres), recuerda que es tu decisión y también le puedes agregar los que a ti te parezca importante.
Si has cumplido con todos los pasos el widget quedara más o menos así:
<div style="border: 6px outset #778899; padding: 6px; background: #FFFFFF; none repeat scroll 0% 50%; width: 200px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: black;">
<center>
<style type="text/css">
#buscador {
background: url();
padding: 5px;
float: center;
overflow:hidden;
margin: 0 auto; }
</style>
<form id="buscador" action="/search" method="get">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjH10CKvOk66nHzOu4fL5BGsH_Rf81DdPfVUvF35YPOffAd2gIHnrZ_onDVmpGsj9UtEyU4svPEGNY4A8LmXAZbBPEn_t5D9vCDLzzQ8f3ARGhZdphtuDmXHVO7LjAQOUZUGv2b3hM0w7/s320/searchiconry7.png"/><input this.value="onblur=" )="buscador..." onfocus="if (this.value == " ; q value="Buscador..." if type="text" (this.value="name"/>
</form>
<br/>
<div class="linkprefs">
<p style="display: block;">
<input id="linkprefs" value="linkprefs" name="linkprefs" onclick="setCheckbox(document.getElementById('linkprefs').checked);" type="checkbox"/>
<label for="linkprefs" title="Opciones de navegacion">Abrir enlaces externos en nueva ventana</label></p>
<span></span>
<script type="text/javascript">addEvent(window, 'load',loadLinkPrefs);</script>
</div>
<br/>
<h4>Traductor</h4>
<img src="http://img176.imageshack.us/img176/6091/84056383at1.png"/>
<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 90%; width: 140px;" name="wl_trglang">
<option value="EN"/>Español - Inglés
<option value="FR"/>Español - Francés
<option value="DE"/>Español - Alemán
<option value="IT"/>Español - Italiano
<option value="PT"/>Español - Portugués
<option value="RU"/>Español - Ruso
</select>
<input value="http://NOMBRE_DEL_BLOG.blogspot.com/" name="wl_url" type="hidden"/>
<input style="font-size: 90%; width: 70px;" value="Traduce" type="submit"/>
</form>
<br/>
<h4>Entradas al azar</h4>
<div id="myLuckyPost"></div>
<script type="text/javascript">
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
window.location = entry.link[j].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 readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjH10CKvOk66nHzOu4fL5BGsH_Rf81DdPfVUvF35YPOffAd2gIHnrZ_onDVmpGsj9UtEyU4svPEGNY4A8LmXAZbBPEn_t5D9vCDLzzQ8f3ARGhZdphtuDmXHVO7LjAQOUZUGv2b3hM0w7/s320/searchiconry7.png"/><a href="#random" onclick="feelingLucky()" title="Entrada al azar">Entradas al azar</a>
<br/><br/>
<h4>Tamaño del texto</h4>
<p><img src="http://vbmusica.googlepages.com/fontMas.gif"/><a href="javascript:ts('body',1)"> AUMENTAR </a></p>
<p><img src="http://vbmusica.googlepages.com/fontMenos.gif"/><a href="javascript:ts('body',-1)"> DISMINUIR </a></p></center></div>
Puedes modificar el tamaño del cuadro al comienzo del código width: 200px;, también hay cosas que puedes modificar a tu gusto. Puedes copiar y pegar el código en Real-time HTML y vas viendo como va quedando las modificaciones que hagas. En el código hay link de imágenes que están temporalmente alojadas en mi alojadores.
Fuente La Blogueria
<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=c92ac21897d8b56e61cfa85930dd89a1&url=http%3A%2F%2FnombreBlog.blogspot.com&num=10&filter=nombre1,nombre2,etc"; type="text/javascript"></script>
Ahora bien, tienes que modificar todo lo que esta en negrita, colocas el nombre de tu blog, el número de personas que quieras que se muestren en tu top y además el "filter" que donde puedes ocultar tu nombre (Ya que uno es el que más comenta en el blog.).
Fuente: Vagabundia
Actualizacion: En el siguiente post podemos ver otra alternativa que nos ofrece Rosa.
<script type="text/javascript">
var a_rc=10; // la cantidad de comentarios a mostrar
var m_rc=false; // poner en true si se quiere mostrar la fecha
var n_rc=false; // poner en true si se quiere mostrar el título del post
var o_rc=50; // es la longitud máxima a mostrar de cada comentario (caracteres)
</script>
<b:widget id='HTMLXX' locked='false' title='EL TITULO' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ultimosComentarios'><data:content/></div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Le agregaremos lo que este en negrita para así darle un estilo.
/* Últimos Comentarios
----------------------------------------------- */
#ultimosComentarios li {
/* es el rectángulo que contiene cada item de la lista */
background: transparent url() no-repeat 0px 4px;
border-bottom: 1px dotted #223344;
border-top: 1px dotted #223344;
margin-bottom: -1px !important;
padding: 8px 0 5px 28px;
}
#ultimosComentarios li:hover {
background-color: #EEEEEE;
/* efecto sobre esos rectángulos */
}
#ultimosComentarios b {
/* es el nombre del autor del comentario */
color: #333333;}
#ultimosComentarios a, #ultimosComentarios a:link, #ultimosComentarios a:visited {
/* el texto del comentario */
color: #BBB;}
#ultimosComentarios a:hover {
/* efecto sobre el enlace */
color: #000000;}
Pizcos nos ofrece una alternativa también.
Fuente: Vagabundia
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
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=e1f5a9b2248904d8b81f794c09353010&url=http%3A%2F%2Fnombredelblog.blogspot.com&num=5" type="text/javascript"></script>
Recuerda cambiar en el script donde dice "nombredelblog" por el nombre de nuestro blog. Y en "num=5" puedes poner la cantidad de entradas que quieres mostrar
Puedes personalizarlo aquí
<script type='text/javascript'>
//<![CDATA[
var ultimaFecha;
function remplaza_fecha(d){
if (d == "") {
d = ultimaFecha;
}
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);
ultimaFecha = d;
}
//]]>
</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='fecha'>
<script>remplaza_fecha('');</script>
</div>
/* Calendario-Fecha
-------------------- */
#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(http://img367.imageshack.us/img367/1449/blue2kt9.png) no-repeat;
border: 0;
text-transform: uppercase;
}
.fecha_mes {
display: block;
font-size: 10px;
font-weight:bold;
}
.fecha_anio {
display: block;
font-size: 10px;
}
.fecha_dia {
display: block;
font-size: 16px;
font-weight:bold;
}
El código CSS hay ciertas cosas que puedes modificar como la posición (Float) del calendario, el código original esta a la Izquierda(Left) y lo puedes cambiar por Derecho(Right). Si quieres cambiar el tamaño del texto tienes que hacerlo en font-size. Puedes cambiar la imagen en background y si utiliza alguna imagen diferente a la que te ofrezco aquí, tendrás que cambiar algunos valores como el padding, margin y font-size .
Pack de iconos de calendario Descargar
Fuentes: El Escaparate de Rosa <> Vagabundia
#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}
Width (ancho) Esta parte es muy importante ya que aquí le daremos el tamaño al sidebar.
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
Aquí haremos cambios en de estilo en el sidebar, como por ejemplo: cambiarle el color, colocarle margenes y el estilo de las lista en el sidebar. Es algo muy fácil de modificar te invito a visitar estos tutoriales, para así entender más de sobre los CSS.
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo' type='BlogArchive'/>
</b:section>
Por lo general así encontraras estas secciones donde cada sección comenzara por la etiqueta <b:section> y terminara con la etiqueta </b:section> y dentro de la sección veremos las etiquetas widget (artilugios) que son lo elementos que le agregas al blog.
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo' type='BlogArchive'/>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo' type='BlogArchive'/>
</b:section>
</div>
Referencia en Ayuda de Blogger
<iframe src="dirección de página"WIDTH="500px" HEIGHT="300px"></iframe>
El Width(Ancho) y Height(Largo) lo colocas a tu gusto.
Puede ver esto en el Editor Online de HTML.
Referencia Blog de César
El código a continuación fue tomado de Gem@ Blog
Actualizado el 15/03/2001
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<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>
</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.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>
<!-- backlinks -->
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'>
<data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/> </a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
<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>
<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'>
Este es un ejemplo de como puede ser útil en tu blog
Visto en Xyberneticos
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://YOURBLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<script type='text/JavaScript'>
function verocultar(cual) {
var c=cual.nextSibling;
if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none';
}
return false;
}
</script>
<a onclick="return verocultar(this);"
href="javascript:void(0);">ENLACE</a><div style="display: none;">
------ Aquí va lo que se quiere ocultar ------
</div>
Democritum voluptatum incorrupte ut ius, eleifend torquatos adipiscing ad sea, ex ubique labores eum. Dicit oratio bonorum an eos. Voluptua adipisci principes at sed, dicta platonem no quo, eum malis alienum copiosae et. Vis hinc luptatum conclusionemque no. Ut laoreet percipit erroribus mei, quot partem dignissim et eam, ex quo oratio abhorreant disputationi. Dicit oratio bonorum an eos. Voluptua adipisci principes at sed, dicta platonem no quo, eum malis alienum copiosae et. Vis hinc luptatum conclusionemque no. Ut laoreet percipit erroribus mei, quot partem dignissim et eam, ex quo oratio abhorreant disputationi.