Principal | Indice | Ir Arriba
Te recomiendo Rincón Ubuntero

Slide Show automático alimentado por feed

1 comentarios
Abajo pueden ver un Slide Show de noticias que se alimenta del Feed de blogger, por lo tanto no es necesario actualizar la información, ni llenar nada, solo copian el código que les voy a dar a continuación.

Es muy dificil conseguir que se alimenten solos y sean funcionales, creo que logre eso y a muchos les va a servir, con un poco de CSS cada uno puede lograr que se vea como quieran, obteniendo mayor personalización.





Si ya tienen Jquery agregado en su plantilla agregan un gadget HTML/JavaScript y pegan estas lineas

<style type="text/css">
#slideshow {
	margin: 0 auto;
	width: 640px;
	height: 263px;
	background:transparent url(http://sites.google.com/site/rinconbloguero/images/bg_slideshow.jpg) no-repeat 0 0;
	position: relative; }
 
	#slideshow #slidesContainer {
		margin: 0 auto;
		width: 560px;
		height: 263px;
		overflow: auto; /* allow scrollbar */
		position: relative; }
 
		#slideshow #slidesContainer .slide {
			margin: 0 auto;
			width: 540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
			height: 263px; }
 
/** 
 * Slideshow controls style rules.
 */
.control {
	display: block;
	width: 39px;
	height: 263px;
	text-indent: -10000px;
	position: absolute;
	cursor: pointer; }
 
#leftControl {
	top: 0;
	left: 0;
	background:transparent url(http://sites.google.com/site/rinconbloguero/images/control_left.jpg) no-repeat 0 0; }
 
#rightControl {
	top: 0;
	right: 0;
	background:transparent url(http://sites.google.com/site/rinconbloguero/images/control_right.jpg) no-repeat 0 0; }
 
/** 
 * Style rules for Demo page
 */

#pageContainer {
	margin: 0 auto;}

.slide a {
	text-decoration: none;}
 
.slide h2, .slide p { margin: 15px; color: #ccc; font-size: 11px; line-height:1.3em;}
 
.slide h2 {
	font: italic 24px Georgia, "Times New Roman", Times, serif;
	color: #ccc;
	letter-spacing: -1px; }
 
.slide img {
	float: right;
	margin: 0 15px;
	padding: 0 5px; }
</style>
<script src="http://sites.google.com/site/rinconbloguero/javascript/summarySS.js" type="text/javascript"></script>
<script type="text/javascript" >
var numCharsSS = 500;<!-- Number Characters displayed-->
var numPostsSS = 5;<!-- Number posts displayed-->
</script>
<script src="http://rinconubuntero.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtocSS"></script>

Si no tienen Jquery agregan esta linea al principio de los javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Buscan y cambian numCharsSS = 500; y numPostsSS = 5; por los numeros de caracteres que quieren mostrar y los posts que se van a deslizar.
Leer más...

Caja con mensaje para blog blogger y páginas que acepten HTML (Actualización)

3 comentarios

Wordprees tiene un plugin muy simpático con el que podemos saludar a nuestro visitante y ofrecerle el servicio seguirnos a través del feed del sitio.

Como dije antes es un plugin de Wordpress y solo sirve para esas plataformas, por lo tanto busque su equivalente para blogger y cualquier web que interprete html. Y hoy después de varios días de trabajo arduo reuniendo iconos libres y agregando más servicios les ofrezco la misma caja que yo estoy usando, voy a traducirla completamente a español pero es con calma.

Mi proyecto esta inspirado en este otro proyecto bloggergreetbox; que es muy bueno pero esta completamente en inglés, quiero hacer mis contribuciones para los latinos e hispano parlantes, somos millones de personas las que hablamos español y no quiero que sintamos excluidos.

Mi proyecto se llama greetboxspanish, no especifica que se use para Blogger como el otro porque funciona para cualquier página que acepte código html, css y javascript.

Para agregar el gadget a su blog de blogger en diseño Añaden un Gadget del tipo HTML/JavaScript y ponemos las lineas siguientes.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://plugins.jquery.com/files/jquery.cookie.js.txt" type="text/javascript"></script>
<script src="http://greetboxspanish.googlecode.com/files/GreetBoxSpanish.js" type="text/javascript"></script>
<style type="text/css">
#mainGreetBoxSpanish {
	font: bold 12px Tahoma, Geneva, sans-serif;
	font-style: normal;
	color: #000;
	background: #f2f5f5;
	border: 1px solid #C3CBDF;
	text-shadow: 0px 0px 0px #222222;
	box-shadow: 0px 2px 4px #000000;
	-moz-box-shadow: 0px 2px 4px #000000;
	-webkit-box-shadow: 0px 2px 4px #000000;
	border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;
	cursor: pointer;
	width: auto; }
#mainGreetBoxSpanish #GreetBoxDisplay table tr td { vertical-align: middle; }
#mainGreetBoxSpanish #GreetBoxDisplay .close {
	float: right;
	margin-right: 2px;
	margin-top: 2px;
	font: bold 12px Tahoma, Geneva, sans-serif;
	font-style: normal;
	color: #ffffff;
	background: #8c8c8c;
	border: 0px solid #1567db;
	text-shadow: 0px -1px 1px #222222;
	border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;
	width: 8px;
	padding: 0px 3px;
	cursor: pointer;
	height: 16px; }
#mainGreetBoxSpanish #GreetBoxDisplay .close:active{cursor:pointer;position:relative;top:2px;
</style>
<div id="mainGreetBoxSpanish" style="display:block">
<div id="GreetBoxDisplay"></div>
<script type="text/javascript">
//<![CDATA[
var MyURL = "http://rinconbloguero.blogspot.com";
var feedURL = "/feeds/posts/default";
var GreetBoxHTMLText = FeedURL(feedURL);
document.getElementById("GreetBoxDisplay").innerHTML = GreetBoxHTMLText;
//]]>
</script>
</div>
<script type='text/javascript'>
//<![CDATA[
var GreetBoxCookie = $.cookie("GreetBoxCookie");
if (GreetBoxCookie){
    $("#mainGreetBoxSpanish").hide();
}
//]]>
</script>

Y listo, cuando el usuario cierre la caja no se mostrará más en ningún momento, a menos que el usuario borre el historial de navegación.

Cambien "rinconbloguero" por el nombre o la dirección de su web para que el mensaje no se repita al cambiar en las entradas.

Para los que no usen el feed de blogger buscan en ese codiigo las lineas "/feeds/posts/default" por la dirección completa de su feed, eso incluye http://.

El gadget ocupa poco espacio y ofrece de forma rápida y sencilla nuestro feed rss, todos los cambios que haga se publicarán en la página del proyecto en Google Codes, y estoy a su disposición para aceptar cualquier contribución.

Web del proyecto: greetboxspanish

Leer más...

Archivo del Blog estilo calendario

0 comentarios

Este gadget o widget lo vi trabajando en una página web y me sentí muy atraído por la forma en que se presenta, me di a la tarea de buscarlo y lo encontré en uno de los blog que sigo (Vagabundia) pero no me gustaba completamente porque se mostraba todos los archivos del mes seleccionado entonces hice un pequeño cambio del código para que solo se muestre la lista de entradas si el usuario lo desea.

El archivo estilo calendario me parece importante para ver la actividad mensual del blog, saber que días se hacen las publicaciones y resumir la información.

Para aplicarlo añadimos el Gadget Archivo del Blog y lo dejamos configurado como se muestra a continuación.


En Diseño, Edición de Html expandimos artilugios, descargamos la plantilla completa para respaldar nuestro tema y justo antes del </head> pegamos lo siguiente

<style type='text/css'>
#blogger_calendar {
margin: 0 auto; /* es el bloque donde lo mostraremos */
width: 190px; /* centrado */ /* el ancho */ }

#bcaption {
height: 20px; /* el rectángulo
    superior con los meses */
text-align: center; }

#bcaption select {
border: 1px solid #484848; /* este es el selector de los meses */
font-size: 11px;
padding: 0 0 0 10px;
width: 100%; }

table#bcalendar thead tr th {
background: /* cada
    una de las celdas con los nombres de los dias de la semana */
#484848;
border: 1px solid #567;
color: #EEE;
font-size: 11px;
font-weight:
bold;
padding: 2px;
text-align: center;
width: 20px; }

table#bcalendar
    tbody tr td {
background: #C8C8C8; /* cada celda con el número del dia */
border: 1px solid #789;
text-align: center;
padding: 2px;
-moz-border-radius:
2px; }

td.highlightCell {
background-color: /* las celdas donde hay entradas */
#EBEBEB !important; }

table#bcalendar tbody tr td a {
color: #000; /* el enlace de esas
    celdas */
font-weight: bold; }

td.firstCell { visibility: hidden; /* las celdas
    vacias del inicio */ /* podemos hacerlas visibles usando
    visible */ }

td.emptyCell {
visibility: /* las celdas vacias del final */
hidden; /* podemos hacerlas visibles usando visible */ }

td.filledCell { background: #FFF; }

/* el color de esas celdas vacias si es que están visibles
    */
table#bcNavigation {
color: /* es la barra de navegación inferior */
#fff;
background-color: #484848;
border: 1px solid #234;
margin: 5px 0
0 0;
padding: 0 ;
text-align: center;
width: 190px; }

table#bcNavigation
    a { color: #fff; }

/* el color del texto */
td#bcFootPrev {
float: left; width:
10px; }

/* el enlace hacia atrás */
td#bcFootNext {
float: right; width:
10px; }

/* el enlace hacia adelante */
td#bcFootAll { vertical-align: middle; }

/*el enlace del mes*/
.listhidden { display: none; }

.listshown { display: inline; }

#calendarDisplay { /* debajo se muestra la lista de entradas */ }

/* esta
    es la lista inferior donde se muestran las entradas del mes */
ul#calendarUl {  }

ul#calendarUl li {  }

ul#calendarUl li a {
color: #000; /* cada item de la lista
    es un enlace */
display: block;
font-size: 11px;
padding-left: 15px; }
</style>

<script type='text/javascript'>
//<![CDATA[
var bcLoadingMessage = " Cargando....";
var bcArchiveNavText = "Navegación";
var bcArchiveNavPrev = '◄';
var bcArchiveNavNext = '►';
var headDays = ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sábado"];
var headInitial = ["D", "L", "M", "M", "J", "V", "S"];
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array();
var bcList = new Array();
var fill = ["", "31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];

function openStatus() {
    document.getElementById('calLoadingStatus').style.display = 'block';
    document.getElementById('calendarDisplay').innerHTML = '';
}

function closeStatus() {
    document.getElementById('calLoadingStatus').style.display = 'none';
}

function bcLoadStatus() {
    cls = document.getElementById('calLoadingStatus');
    txt = document.createTextNode(bcLoadingMessage);
    cls.appendChild(txt);
}

function callArchive(mth, yr, nav) {
    if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
        fill[2] = '29';
    } else {
        fill[2] = '28';
    }
    calMonth = mth;
    calYear = yr;
    if (mth.charAt(0) == 0) {
        calMonth = mth.substring(1);
    }
    callmth = mth;
    bcNavAll = document.getElementById('bcFootAll');
    bcNavPrev = document.getElementById('bcFootPrev');
    bcNavNext = document.getElementById('bcFootNext');
    bcSelect = document.getElementById('bcSelection');
    a = document.createElement('a');
    at = document.createTextNode(bcArchiveNavText);
    a.href = bcNav[nav];
    a.appendChild(at);
    bcNavAll.innerHTML = '';
    bcNavAll.appendChild(a);
    bcNavPrev.innerHTML = '';
    bcNavNext.innerHTML = '';
    if (nav < bcNav.length - 1) {
        a = document.createElement('a');
        a.innerHTML = bcArchiveNavPrev;
        bcp = parseInt(nav, 10) + 1;
        a.href = bcNav[bcp];
        a.title = 'Anterior';
        prevSplit = bcList[bcp].split(',');
        a.onclick = function() {
            bcSelect.options[bcp].selected = true;
            openStatus();
            callArchive(prevSplit[0], prevSplit[1], prevSplit[2]);
            return false;
        };
        bcNavPrev.appendChild(a);
    }
    if (nav > 0) {
        a = document.createElement('a');
        a.innerHTML = bcArchiveNavNext;
        bcn = parseInt(nav, 10) - 1;
        a.href = bcNav[bcn];
        a.title = 'Siguiente';
        nextSplit = bcList[bcn].split(',');
        a.onclick = function() {
            bcSelect.options[bcn].selected = true;
            openStatus();
            callArchive(nextSplit[0], nextSplit[1], nextSplit[2]);
            return false;
        };
        bcNavNext.appendChild(a);
    }
    script = document.createElement('script');
    script.src = 'http://www.blogger.com/feeds/' + bcBlogId + '/posts/summary?published-max=' + calYear + '-' + callmth + '-' + fill[calMonth] + 'T23%3A59%3A59' + timeOffset + '&published-min=' + calYear + '-' + callmth + '-01T00%3A00%3A00' + timeOffset + '&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
    document.getElementsByTagName('head')[0].appendChild(script);
}

function cReadArchive(root) {
    if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
        fill[2] = '29';
    } else {
        fill[2] = '28';
    }
    closeStatus();
    document.getElementById('lastRow').style.display = 'none';
    calDis = document.getElementById('calendarDisplay');
    var feed = root.feed;
    var total = feed.openSearch$totalResults.$t;
    var entries = feed.entry || [];
    var fillDate = new Array();
    var fillTitles = new Array();
    fillTitles.length = 32;
    var ul = document.createElement('ul');
    ul.id = 'calendarUl';
    for (var i = 0; i < feed.entry.length; ++i) {
        var entry = feed.entry[i];
        for (var j = 0; j < entry.link.length; ++j) {
            if (entry.link[j].rel == "alternate") {
                var link = entry.link[j].href;
            }
        }
        var title = entry.title.$t;
        var author = entry.author[0].name.$t;
        var date = entry.published.$t;
        var summary = entry.summary.$t;
        isPublished = date.split('T')[0].split('-')[2];
        if (isPublished.charAt(0) == '0') {
            isPublished = isPublished.substring(1);
        }
        fillDate.push(isPublished);
        if (fillTitles[isPublished]) {
            fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
        } else {
            fillTitles[isPublished] = title;
        }
        li = document.createElement('li');
        li.style.listType = 'none';
        li.innerHTML = '<a href="' + link + '">' + title + '</a>';
        ul.appendChild(li);

    }
    calDis.appendChild(ul);
    var val1 = parseInt(calDay, 10)
    var valxx = parseInt(calMonth, 10);
    var val2 = valxx - 1;
    var val3 = parseInt(calYear, 10);
    var firstCalDay = new Date(val3, val2, 1);
    var val0 = firstCalDay.getDay();
    startIndex = val0 + 1;
    var dayCount = 1;
    for (x = 1; x < 38; x++) {
        var cell = document.getElementById('cell' + x);
        if (x < startIndex) {
            cell.innerHTML = ' ';
            cell.className = 'firstCell';
        }
        if (x >= startIndex) {
            cell.innerHTML = dayCount;
            cell.className = 'filledCell';
            for (p = 0; p < fillDate.length; p++) {
                if (dayCount == fillDate[p]) {
                    if (fillDate[p].length == 1) {
                        fillURL = '0' + fillDate[p];
                    } else {
                        fillURL = fillDate[p];
                    }
                    cell.className = 'highlightCell';
                    cell.innerHTML = '<a href="/search?updated-max=' + calYear + '-' + callmth + '-' + fillURL + 'T23%3A59%3A59' + timeOffset + '&updated-min=' + calYear + '-' + callmth + '-' + fillURL + 'T00%3A00%3A00' + timeOffset + '" title="' + fillTitles[fillDate[p]].replace(/"/g, '\'') + '">' + dayCount + '</a>';
                }
            }
            if (dayCount > fill[valxx]) {
                cell.innerHTML = ' ';
                cell.className = 'emptyCell';
            }
            dayCount++;
        }
    }
    visTotal = parseInt(startIndex) + parseInt(fill[valxx]) - 1;
    if (visTotal > 35) {
        document.getElementById('lastRow').style.display = '';
    }
}

function initCal() {
    document.getElementById('blogger_calendar').style.display = 'block';
    var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
    var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
    document.getElementById('bloggerCalendarList').style.display = 'none';
    calHead = document.getElementById('bcHead');
    tr = document.createElement('tr');
    for (t = 0; t < 7; t++) {
        th = document.createElement('th');
        th.abbr = headDays[t];
        scope = 'col';
        th.title = headDays[t];
        th.innerHTML = headInitial[t];
        tr.appendChild(th);
    }
    calHead.appendChild(tr);
    for (x = 0; x < bcInit.length; x++) {
        var stripYear = bcInit[x].href.split('_')[0].split('/')[3];
        var stripMonth = bcInit[x].href.split('_')[1];
        bcList.push(stripMonth + ',' + stripYear + ',' + x);
        bcNav.push(bcInit[x].href);
    }
    var sel = document.createElement('select');
    sel.id = 'bcSelection';
    sel.onchange = function() {
        var cSend = this.options[this.selectedIndex].value.split(',');
        openStatus();
        callArchive(cSend[0], cSend[1], cSend[2]);
    };
    q = 0;
    for (r = 0; r < bcList.length; r++) {
        var selText = bcInit[r].innerHTML;
        var selCount = bcCount[r].innerHTML.split('> (')[1];
        var selValue = bcList[r];
        sel.options[q] = new Option(selText + ' (' + selCount, selValue);
        q++
    }
    document.getElementById('bcaption').appendChild(sel);
    var m = bcList[0].split(',')[0];
    var y = bcList[0].split(',')[1];
    callArchive(m, y, '0');
}

function timezoneSet(root) {
    var feed = root.feed;
    var updated = feed.updated.$t;
    var id = feed.id.$t;
    bcBlogId = id.split('blog-')[1];
    upLength = updated.length;
    if (updated.charAt(upLength - 1) == "Z") {
        timeOffset = "+00:00";
    } else {
        timeOffset = updated.substring(upLength - 6, upLength);
    }
    timeOffset = encodeURIComponent(timeOffset);
}

function togglecomments(postid) {
    var whichpost = document.getElementById(postid);
    if (whichpost.className == "listshown") {
        whichpost.className = "listhidden";
    } else {
        whichpost.className = "listshown";
    }
}
//]]>
</script>
<script chartset='utf-8' src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'
/>
Luego buscamos en la plantilla el gadget de Archivo del blog

<b:widget id='BlogArchive1' locked='false' title='XXXXXXX' type='BlogArchive'>
.......
</b:widget>
Borramos todo lo que este entre el Abre y Cierra widget, lo que sería los puntos suspensivos y pegamos este código

<b:includable id='toggle' var='interval'>
  <!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='interval' var='intervalData'>
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
  <ul>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
</div>

<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>

</caption>
<!-- Table Header -->
<thead id='bcHead'/>
<!-- Table Footer -->

<!-- Table Body -->
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'/>
<td id='bcFootAll'/>
<td id='bcFootNext'/>
</tr></table>   

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<a href='javascript:togglecomments("calendarDisplay")' title='Click para mostrar'>+/- Ver artículos de este mes</a>
<div class='listhidden' id='calendarDisplay'/>

</div>

<script type='text/javascript'> initCal();</script>

</b:includable>
<b:includable id='menu' var='data'>
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == "FLAT"'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == "MENU"'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
Se guardan los cambios y probamos el resultado, el calendario se cambia de colores aplicando los estilos que queramos.
Leer más...