0

Slide automático " últimas entradas "

viernes, 28 de octubre de 2011.
De nuevo vengo con otro slide pero ha diferencia del anterior que era manual  Slide manual este es automático.

Desde mi foro observaréis como queda  Sevillistas por el Mundoes totalmente modificable y adaptable a cualquier parte del blog, introduciendo el código en un gadget.

El código lleva todas las explicaciones posibles para su modificación, tanto en tamaño de fuente como colores, a mayor tamaño de imágen mayor altura del Slide, colocándose automáticamente el ancho en cualquier parte del blog tanto encima de las entradas como en la sidebar. 

Para cambiar los colores podéis usar la Tabla de colores de este blog.

Antes que nada, cambiar en el código el nombre de mi blog "amorsevillista" por el vuestro, lo encontraréis a continuación de home_page


<style type="text/css">
/* PERSONALIZAMOS EL ESTILO -----------
-------- SLIDESHOW DE ENTRADAS */
/* FONDO */
#menucontent {
background:#111; /* COLOR DEL FONDO */
padding:8px;
width:98%;
margin:0
}
/* LiNEA DE ABAJO (NuMEROS, PLAY, STOP, INFO) */
#menucontent .menuvku {
margin-top:5px;
border:0
}

#menucontent .menuvku-rig a{
text-decoration:none;
}

#menucontent .menuvku ul {
margin:0px;
padding:0px;
list-style:none;
background:transparent;
border:0
}

#menucontent .menuvku li {
display:inline;
line-height:25px;
border:0;
margin:0px;
padding:0px;
}
/* NuMEROS */
#menucontent .menuvku li a {
background:transparent; /* COLOR DEL FONDO DE LOS NuMEROS */
color:#ececec; /* COLOR DE LOS NuMEROS */
font-family:Arial, Helvetica, sans-serif;
font-size:14px; /* TAMAnO DE LOS NuMEROS */
text-decoration:none;
padding:2px 7px ;
border:1px solid #ececec; /* COLOR DEL BORDE DE LOS NuMEROS */
margin:0px;
margin-right:2px;
}
/* NuMERO ACTIVO */
#menucontent .menuvku li a.tabactive{
background:#ececec; /* COLOR DEL FONDO DEL NuMERO ACTIVO */
font-weight:bold;
position:relative;
color:#000; /* COLOR DEL NuMERO ACTIVO */
border:1px solid #ececec; /* COLOR DEL BORDE DEL NuMERO ACTIVO */
}
/* IMAGEN */
#menucontent .menuvku-rig img{
float:right;
padding:4px 5px 5px 0;
border:0
}
/* CONTENIDO */
#menucontent .menucontent1 {
background:#ffffff; /* COLOR DEL FONDO DEL CONTENIDO */
border:1px solid #BF0505; /* COLOR DEL BORDE QUE RODEA EL CONTENIDO */
padding:4px 3px;
margin:0px;
}


</style>
<script language="JavaScript">

imgr = new Array(); // <-- NO TOCAR

// IMAGEN QUE MUESTRA AL NO TENER UNA PROPIA LA ENTRADA
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKfS9Nufzu74QCP8Fo7FCjAqBP3buhAFY4CbpoLkIobaeS-_CEm-JzfKpXkjCTkw7GdZ4QxsbjuiZPEB-iiyqcorR1qJualhynBBHcERdcrBpSVpcSKgLOyh6RjR8pKzrd-7pNUadB4M_y/s1600/sin-imagen.png";
// IMAGEN BOToN PLAY 16x16 píxels
img_play = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-GKUkWjZfe2NQzR9X63P4gsH46D8OKYNi3RNJWfseL1RdVDDStXWWFnh0XgnmYdBAgsU15GDlknGbB36MbQpskWwS2DbvOUa0AFjAuEH5mAljQp3BlWfW79pCyRYJY8hSNjHwXYfmxJOq/s1600/play.gif";
// IMAGEN BOToN STOP 16x16 píxels
img_stop = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrlGiE0nj2ZI3jTQaSiElLCkYgz56iGg9k6DBvWI2QW4y41GUsg_5oVqnzbTFx_k7z8bspchCoCiPlbMn8N7MuBkpn9R1gp7GhLjojpXtwdCsCUJ3ESehEX3894eQORn5DFjb90sX1CMr/s1600/stop.gif";

// TAMAnO DE LAS IMaGENES
imgwidth = 150; // ANCHO
imgheight = 150; // ALTO

// TiTULOS DE LAS ENTRADAS
fntsize = 14; // TAMAnO FUENTE
acolor = "#000000"; // COLOR FUENTE

// DESCRIPCIoN DE LAS ENTRADAS
entradasPost = 400; // CANTIDAD DE TEXTO
entradasFontsize = 12; // TAMAnO FUENTE
entradasColor = "#000000"; // COLOR FUENTE

// COMENTARIOS
showPostComent = true; // true para mostrar, false para ocultar
text = "comentarios"; // TEXTO
cfntsize = 12; // nFUENTE
ccolor = "#9E0707"; // COLOR FUENTE

// FECHA DE LAS ENTRADAS
showPostDate = true; // true para mostrar, false para ocultar
bfntsize = 10; // TAMAnO FUENTE
bcolor = "#776E6E"; // COLOR FUENTE

// CONTINUAR LEYENDO
showPostContinuar = true; // true para mostrar, false para ocultar
clltext = "Continuar leyendo &#187;"; // TEXTO
clfntsize = 14; // TAMAnO FUENTE
clcolor = "#C00D0D"; // COLOR FUENTE

var tabcount = new Array("7") // NuMERO TOTAL DE ENTRADAS, DE LA 1 A LA 10

var changespeed = 4; // DEMORA EN SEGUNDOS

home_page = "http://amorsevillista.blogspot.com"; // LINK DEL BLOG SIN / AL FINAL
</script>
<script src='http://sevillporelmundo.webcindario.com/slidepostvku.js' type='text/javascript'></script>

<div id='menucontent'>
<div class='menucontent1' onmouseover ='javascript:stop_autochange(); return false;' onmouseout ='javascript:restart_autochange(); return false;'>

<!-- LINK ENTRADAS -->
<div id="tabcontent1"><script>
document.write('<script src="'+home_page+''+rss_page+'1'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent2"><script>
document.write('<script src="'+home_page+''+rss_page+'2'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent3"><script>
document.write('<script src="'+home_page+''+rss_page+'3'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent4"><script>
document.write('<script src="'+home_page+''+rss_page+'4'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent5"><script>
document.write('<script src="'+home_page+''+rss_page+'5'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent6"><script>
document.write('<script src="'+home_page+''+rss_page+'6'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent7"><script>
document.write('<script src="'+home_page+''+rss_page+'7'+rssb_page+'"></scr' + 'ipt>');</script></div>
<!-- Agregamos o quitamos las entradas hasta 10, cambiando los número en el ID y en el script. La cantidad tiene que ser igual a la de los números. -->

<!-- FIN LINK ENTRADAS -->
</div>
<script>
document.write(''+div_easytabs1+''); // NO TOCAR
document.write(''+home_info+''); // NO TOCAR
document.write(''+div_easytabs2+''); // NO TOCAR

// LOS NUMEROS DEL 1 AL 10
document.write(''+li_easytabs1+'');
document.write(''+li_easytabs2+'');
document.write(''+li_easytabs3+'');
document.write(''+li_easytabs4+'');
document.write(''+li_easytabs5+'');
document.write(''+li_easytabs6+'');
document.write(''+li_easytabs7+'');
// Agregamos los números, tienen que ser igual cantidad a las entradas.

// FIN NUMEROS
document.write(''+div_easytabs3+''); // NO TOCAR
document.write(''+div_easytabs4+''); // NO TOCAR
</script>
</div>
 
GRACIAS POR TU TRABAJO!!!!!! Este es el unico que he encontrado que funciona. MUCHAS GRACIAS.
Leer Más...
0

Cargar archivos en Blogger.

jueves, 27 de octubre de 2011.

Hay muchas preguntas respecto a los tipos y tamaños de archivos que puede subir a Blogger. Hay algunos límites y he tratado de nombrarlos a todos ...... 

TIPOS DE ARCHIVOS


Sólo se pueden cargar archivos de imagen a tu blog de Blogger. Estos sólo pueden ser cargados a través de su blog. Para ello Ingresar al panel y haga clic en "Post + nuevo". El editor de entradas se abrirá. En el marco superior del editor de entradas sólo pasar el ratón todos los iconos. Esto le mostrará la información sobre herramientas y haga clic en el icono cuadrado azul (Add Image). La imagen de subir el cuadro de diálogo. Haga clic en Examinar en Agregar una imagen desde tu ordenador a elegir el archivo de imagen en su PC. Haga clic en el archivo para resaltarlo y, a continuación, haga clic en Abrir. También puede agregar una imagen de la web. Pegue la dirección URL de la imagen en el cuadro de texto URL bajo "o añadir una imagen de la web". A continuación, seleccione la posición que desea que la imagen sea y el tamaño de la imagen y haga clic en Cargar. Mire la imagen inferior 


Haga clic en la foto para verla en grande. 

TAMAÑO DE ARCHIVOS


Hay un límite total de 300 MB en las fotos que está cargando a través de Blogger, Picasa, o la bienvenida a un blog de Blogspot libre. Si se trata de un blog ftp, entonces es el espacio en el servidor debe tener en cuenta. Si envías fotos a través de Blogger móvil hay un límite de 250 K por imagen. Sin embargo no hay manera de saber si este límite se acercó hasta que romper a través de él. 

Las páginas individuales de tu blog se limitan a 1 MB de tamaño. Su página principal se puede ejecutar en este límite para limitar el número de mensajes en la página principal, vaya a Configuración -----> Formato -----> Mostrar 4 mensajes en la página principal -----> Ajustes de ahorro. Esto también acelerará la carga de tu blog. 

No hay límite al número de blogs que tienen o el número de mensajes que puede hacer. Además, no hay límite al número de comentarios. Mensajes individuales no tienen límite, pero puede estar limitado por tamaño de página como se describió anteriormente. 


ALOJAMIENTO GRATUITO


Para superar el límite de tamaño y tipo de archivo en su blog intentar subir sus fotografías a un GooglePages freehostlike. Puede crear cinco sitios en GooglePages con cada sitio que tiene 100 MB de espacio libre a los archivos de host. Para cargar crear una cuenta de Googlespace y haga clic en Cargar en el marco inferior de la barra lateral. Ver imagen a continuación: 


Si usted no puede crear una cuenta de GooglePages crear un Grupo de Google de su cuenta. Puedes subir 100 MB de archivos en total aquí también. Haga clic en "Archivos" después de hacer clic en el Grupo de Gestión. Continuación, haga clic en el botón Upload File. Ver imagen a continuación: 


Así se puede cargar la imagen, PDF, MP3, WAV, DOC, TXT y otros archivos a estos freehosts. También puede cargar archivos de imagen freehosts otros como Flickr, Photobucket, etc Imagehosting Para subir archivos a Flickr ver Youtube y Flickr . Después de cargar los archivos de colocar el cursor del ratón sobre el nombre de archivo y haga clic derecho y seleccionar Copiar ubicación de vínculo. Esto copia la ubicación / URL / enlace de su archivo en el freehost. A continuación, péguelo en este código en tu blog: 

<a href="LINK de su archivo en Free HOST"> BAJAR ARCHIVO </ a> 

Cuando el usuario haga clic en "Descargar archivo" se abrirá un cuadro de diálogo que pide al descargar el archivo. 

Read more: http://www.blogdoctor.me/2007/02/upload-files-to-blogger.html#ixzz1c0HHSJMy
Leer Más...
0

Guardar cualquier blog de Blogger como un documento PDF en un solo clic

Hay varias ventajas de ahorro de un sitio web blog como un archivo PDF - usted puede leer las entradas del blog en línea, búsqueda de texto en formato PDF es muy rápido en comparación con la búsqueda web y, sobre todo, PDF actuará como copia de seguridad de tu blog de Blogger conservando incluso las imágenes del blog.

Relacionados: Blogger Backup Software

Para publicar cualquier blog de blogspot en un documento PDF (gratis), vamos a utilizar un servicio llamado Blog2Print que en realidad significaba para la conversión de los blogs de Blogger en los libros impresos - escriba la dirección del blog, seleccione todos los mensajes de blog o las fechas de las entradas que que le gustaría incluir en el libro, y elegir si los mensajes deben aparecer en orden cronológico inverso o cronológico.

ahorrar blog pdf

Aunque Blog2Print es un servicio de pago, se genera una copia en PDF de la vista previa de las entradas de blog seleccionado que se abre dentro del navegador web - sólo tienes que guardar el archivo PDF a partir de la caché del navegador en el disco duro.

Internamente, los servicios Blog2Print utilizando el API de datos de Blogger solicitar publicaciones en el blog creado o actualizado en un rango de fechas determinado. Blogger se alimenta generalmente de consulta pública para que no requiere autenticación.

www.blog2print.com [Blog de ​​impresión para la plataforma Blogger]

Leer Más...
0

Como convertir PDF en una presentacion

(Si ya tiene un documento PDF de varias páginas, puede saltarse el paso 4.)

1. Seleccione los documentos que desea visualizar, y convertirlos en archivos PDF u otros formatos de archivo Acrobat puede importar (BMP, GIF, JPEG, PCX, PICT, PNG, y TIFF).Abra el primer archivo PDF de Acrobat.Seleccione Insertar páginas en el menú de documentos.

2. En Seleccionar un archivo resultante de cuadro de diálogo Insertar, seleccione el archivo gráfico siguiente, y haga clic en Seleccionar. En el cuadro de diálogo Insertar páginas resultante, seleccione la ubicación de la nueva página que se inserta, y haga clic en Aceptar.

3. Repita los pasos anteriores hasta que todas las páginas están en un documento. Elija Archivo> Guardar como y escriba un nombre para el archivo de la galería en el cuadro de diálogo resultante. Haga clic en Guardar.

4. Abra el documento PDF multiplepage que desea mostrar en la presentación de diapositivas. Seleccione Edición> Preferencias> General. En el cuadro de diálogo resultante Preferencias, revise por adelantado cada x segundos de navegación en pantalla completa, y escriba un valor.También puede seleccionar la forma de hacer avanzar las diapositivas y lo que sucede cuando termina la presentación. En Apariencia de pantalla completa, elegir un estilo de transición desde el menú de la transición por defecto.Especifique cómo desea que el cursor del ratón para aparecer en dicho menú. Seleccione un color de fondo y haga clic en Aceptar.

5. Elija Archivo> Propiedades de documento> Opciones Abrir. En Opciones de la ventana en el cuadro de diálogo resultante, seleccione Abrir en modo de pantalla completa, y haga clic en Aceptar. Guarde y cierre el documento. La próxima vez que abra el archivo, automáticamente pasará al modo de pase de diapositivas a pantalla completa.Mostrar su cartera con este bien pensado plan-que se verá elegante y profesional, y conocedores de la tecnología.

 

Leer Más...
0

Como crear un blog en Blogger

Leer Más...
0

Paginación en tu blog

miércoles, 26 de octubre de 2011.
La paginación es cualquier tipo de sistema de control que permite al usuario navegar a través de las páginas de resultados de búsqueda, archivos, o cualquier otro tipo de contenidos.
La paginación se encuentra también en algunos blogs, foros de debate y en la web de comics.

1. Ir a diseño de la plantilla, luego en Elementos de la página añadimos un Gadget, seleccionas HTML/Javascript y pegas el siguiente código:

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 2px;
text-decoration: none;
}

.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 2px;
text-decoration: none;
}

.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpagePoint {font-size:10px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=1;
var firstPageWord = 'Primera';
var endPageWord = 'Última';
var upPageWord ='Anterior';
var downPageWord ='Siguiente';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="font-size:10px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Página '+thisNum+' de '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

Explicación:
- .showpageArea .- Es el rectángulo donde se va a mostrar la paginación.

- .showpageArea a .- Son los enlaces en general (los números de las páginas y los textos Anterior y Siguiente). Podemos usar cualquier propiedad, como ponerles una imagen y un borde.

- .showpageArea a:hover .- Se refiere al efecto gráfico cuando colocamos el ratón encima de la paginación.

- .showpageNum a y .showpageNum a:hover .- Son los enlaces con los números de las páginas si es que queremos que se vean diferentes.

- .showpage a y .showpage a:hover .- Son los enlaces con los textos si es que - queremos que se vean diferentes.

- .showpagePoint .- Es el texto que se muestra en la página actual, es decir los números.

- var pageCount .- La cantidad de posts que se mostrarán por página.
Si var pageCount=4 entonces se mostraran por pagina 4 artículos publicados.

- var displayPageNum .- La cantidad de páginas listadas.
Si var displayPageNum=1 entonces se listarán 1 más 1 página, serian 2.

2. Finalmente, después de haber pegado el código en un HTML/Javascript necesitas arrastrar el widget y ponerlo debajo de Entradas del blog.
 
Resultado:

- Por ejemplo, si deseas eliminar Página 1 de 88 entonces tendrías que eliminar el siguiente código que se encuentra casi al final:
html = '<div class="showpageArea"><span style="font-size:10px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Página '+thisNum+' de '+(postNum-1)+': </span>'+html;
Leer Más...
1

Donde vender tu blog

Donde vender tu blog

Muchos bloggers, al no estar de acuerdo con alguno de sus blogs, o, también, por problemas económicos.

La mayoría, no sabe donde colocar su venta, asique aquí les dejaré una lista con algunos sitios donde podrán venderlo, totalmente gratis y sin comisión.

1. ForoBeta: http://forobeta.com/ Sin duda el mejor. Tiene muchas opciones para comprar y vender: Sitios, reseñas, enlaces, contratar diseñadores, contratar escritores,etc. Es totalmente gratis y necesita registro en el foro y un tiempo de permanencia para poder utilizar sus servicios.

2. VenderMiWeb: http://vendermiweb.com/ Otra muy buena web para vender tu sitio. Este, no necesita registro y también es totalmente gratuito. En este, podrán vender, comprar sitios y tambien contratar servicios de freelance como redactores o diseñadores. Aparte, también dispondrán de compra-venta de reseñas, enlaces, etc.

3.Flippa: http://flippa.com/ En esta web se han llegado a vender blogs por miles de dolares, asique no estaría de mas que diesen una vuelta por este sitio, que se dedica a la compra-venta de blogs.
Leer Más...
0

5 Sliders Puestos destacados para Blogger

martes, 25 de octubre de 2011.
1. Un estilo simple jQuery destacados presentación de diapositivas para Blogger

Imagen: 



Demostración: Ver esta barra de desplazamiento en la acción 

tutorial: Tutorial simple deslizante jQuery

2. Increíble jQuery Blogger destacados Imágenes Diapositivas de diapositivas y vídeos

Imagen: 



Demostración: Ver esta barra de desplazamiento en la acción 

tutorial: Tutorial jQuery deslizador Cualquier cosa

3. Un jQuery Cool cualquier tamaño Desarrollado destacados Mensajes deslizante para Blogger

Imagen: 



Demostración: Ver este deslizador En Acción 

Tutorial: Cualquier Tamaño Tutorial jQuery deslizador

4. Mootools destacados deslizante mensaje

Imagen: 



Demostración: Ver este deslizador En Acción 

Tutorial: Vaya a los pasos de instalación


5. Suave deslizante jQuery Puestos destacados

Imagen: 



Demostración: Ver este deslizador En Acción 

Tutorial: Vaya a los pasos de instalación
Leer Más...
1

Slide automatico de tus ultimas entradas

Fuente: http://www.pizcos.net/2010/11/slide-automatico-de-tus-ultimas.html


Este fin de semana he hecho algunos cambios en el blog, además de la pseudo visualización previa de las entradas en la portada he cambiado el slide que tenia. Es un slide que automáticamente te muestra las últimas entradas que publicas. Para ello he usado la explicación de Simplex Design, aunque lo he modificado para que muestre las últimas entradas y no solo muestre las entradas de una categoría elegida.

Para implementarlo debéis editar vuestra plantilla y seguir los siguientes pasos:

CSS (antes de ]]></b:skin>)


#featured {
margin:20px 0 0;
}
.sliderwrapper {
position: relative;
overflow: hidden;
border: 10px solid #e1e1e1;
border-bottom-width: 6px;
height: 250px;
}
.sliderwrapper .contentdiv {
background:#ccc;
visibility: hidden;
position: absolute;
left: 0;
top: 0;
padding: 5px;
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.pagination {
text-align: right;
background-color:#e1e1e1;
padding: 2px 10px 10px;
}
.pagination a {
font-size:11px;
color:#333;
padding: 0 5px;
background:#ccc;
}
.pagination a:hover, .pagination a.selected {
color:#68667B;
background-color:#fff;
}
.featuredPost {
width:100%;
height:25%;
padding:5px 10px 10px;
background:#ccc;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color:#fff;
position:absolute;
bottom:0;
}
.featuredPost a {
color:#333;
}
.featuredPost a:hover {
color:#dedde5;
}
.featuredPost h2 {
margin:0;
font-size:20px;
line-height:1;
}
.featuredPost span {
font-size:10px;
}
.featuredPost p {
font-size:11px;
}

Esta parte deberéis ajustarla con respecto a colores, fuentes, tamaño, etc.

Script 1 (antes de </head>)

&lt;script&gt; 
imgr = new Array();
imgr[0] = &quot;URL_DE_LA_IMAGEN_QUE_SE_MOSTRARA_SI_NO_HAY_NINGUNA_EN_LA_ENTRADA&quot;;
showRandomImg = true;
aBold = true;
summaryPost = 0;
numposts1 = 5; 
label1 = &quot;&quot;;
function removeHtmlTag(strx,chop){var s=strx.split(&quot;&lt;&quot;);for(var i=0;i&lt;s.length;i++){if(s[i].indexOf(&quot;&gt;&quot;)!=-1){s[i]=s[i].substring(s[i].indexOf(&quot;&gt;&quot;)+1,s[i].length)}}s=s.join(&quot;&quot;);s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i&lt;numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel==&#39;alternate&#39;){posturl=entry.link[k].href;break}}for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel==&#39;replies&#39;&amp;&amp;entry.link[k].type==&#39;text/html&#39;){pcm=entry.link[k].title.split(&quot;&quot;)[0];break}} 
if (&quot;content&quot; in entry) {
var postcontent = entry.content.$t;}
else
if (&quot;summary&quot; in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = &quot;&quot;;
postdate = entry.published.$t;
if(j&gt;imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=&quot;&quot;,a); c = s.indexOf(&quot;&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)&amp;&amp;(d!=&quot;&quot;)) img[i] = d;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;];var day=postdate.split(&quot;-&quot;)[2].substring(0,2);var m=postdate.split(&quot;-&quot;)[1];var y=postdate.split(&quot;-&quot;)[0];for(var u2=0;u2&lt;month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}
var daystr = day+ &#39; &#39; + m + &#39; &#39; + y ;
var trtd = &#39;&lt;div class=&quot;contentdiv&quot;&gt;&lt;div class=&quot;sliderPostPhoto&quot;&gt;&lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;&lt;img width=&quot;100%&quot; height=&quot;100%&quot; class=&quot;alignnone&quot; src=&quot;&#39;+img[i]+&#39;&quot;/&gt;&lt;/a&gt;&lt;div class=&quot;sliderPostInfo&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;featuredPost&quot;&gt;&lt;h2&gt;&lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;&#39;+posttitle+&#39;&lt;/a&gt;&lt;/h2&gt;&lt;span&gt;&#39;+daystr+&#39;&lt;/span&gt;&lt;p&gt;&#39;+removeHtmlTag(postcontent,summaryPost)+&#39;...&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&#39;; 
document.write(trtd); 
j++;
}}
&lt;/script&gt;

Aquí podéis elegir si queréis mostrar más de 5 entradas (numposts1 = 5;) y si queréis mostrar un resumen del post (summaryPost = 240;).Yo no lo muestro por lo que lo tengo a 0 pero si decidís mostrarlo deberéis también ajustar el css, ampliando el porcentaje de height:25%;.


Script 2 (antes de </body>)

<script type='text/javascript'>
//<![CDATA[
var featuredcontentslider={

//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: true, //persist to last content viewed when returning to page?

settingcaches: {}, //object to cache "setting" object of each script instance

jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
this.turnpage(this.settingcaches[fcsid], pagenumber)
},

ajaxconnect:function(setting){
var page_request = false
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else
return false
var pageurl=setting.contentsource[1]
page_request.onreadystatechange=function(){
featuredcontentslider.ajaxpopulate(page_request, setting)
}
document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcache, true)
page_request.send(null)
},

ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(setting.id).innerHTML=page_request.responseText
this.buildpaginate(setting)
}
},

buildcontentdivs:function(setting){
var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
for (var i=0; i<alldivs.length; i++){
if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"
setting.contentdivs.push(alldivs[i])
alldivs[i].style.display="none" //collapse all content DIVs to begin with
}
}
},

buildpaginate:function(setting){
this.buildcontentdivs(setting)
var sliderdiv=document.getElementById(setting.id)
var pdiv=document.getElementById("paginate-"+setting.id)
var phtml=""
var toc=setting.toc
var nextprev=setting.nextprev
if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
for (var i=1; i<=setting.contentdivs.length; i++){
phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
}
phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
pdiv.innerHTML=phtml
}
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0 //var to keep track of actual # of toc links
for (var i=0; i<pdivlinks.length; i++){
if (this.css(pdivlinks[i], "toc", "check")){
if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
pdivlinks[i].style.display="none" //hide this toc link
continue
}
pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
pdivlinks[i][setting.revealtype]=function(){
featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
return false
}
setting.toclinks.push(pdivlinks[i])
}
else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"
pdivlinks[i].onclick=function(){
featuredcontentslider.turnpage(setting, this.className)
return false
}
}
}
this.turnpage(setting, setting.currentpage, true)
if (setting.autorotate[0]){ //if auto rotate enabled
pdiv[setting.revealtype]=function(){
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
this.autorotate(setting)
}
},

urlparamselect:function(fcsid){
var result=window.location.search.match(new RegExp(fcsid+"=(\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},

turnpage:function(setting, thepage, autocall){
var currentpage=setting.currentpage //current page # before change
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
return
setting.currentpage=turntopage
setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
this.cleartimer(setting, window["fcsfade"+setting.id])
setting.cacheprevpage=setting.prevpage
if (setting.enablefade[0]==true){
setting.curopacity=0
this.fadeup(setting)
}
if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.prevpage, setting.currentpage)
}
setting.contentdivs[turntopage-1].style.visibility="visible"
setting.contentdivs[turntopage-1].style.display="block"
if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[turntopage-1], "selected", "add")
setting.prevpage=turntopage
if (this.enablepersist)
this.setCookie("fcspersist"+setting.id, turntopage)
},

setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
var targetobject=setting.contentdivs[setting.currentpage-1]
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100
else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
setting.curopacity=value
},

fadeup:function(setting){
if (setting.curopacity<1){
this.setopacity(setting, setting.curopacity+setting.enablefade[1])
window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
}
else{ //when fade is complete
if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.cacheprevpage, setting.currentpage)
}
},

cleartimer:function(setting, timervar){
if (typeof timervar!="undefined"){
clearTimeout(timervar)
clearInterval(timervar)
if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div
setting.contentdivs[setting.cacheprevpage-1].style.display="none"
}
}
},

css:function(el, targetclass, action){
var needle=new RegExp("(^|\s+)"+targetclass+"($|\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add")
el.className+=" "+targetclass
},

autorotate:function(setting){
window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},

getCookie:function(Name){ 
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},

setCookie:function(name, value){
document.cookie = name+"="+value

},


init:function(setting){
var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
this.settingcaches[setting.id]=setting //cache "setting" object
setting.contentdivs=[]
setting.toclinks=[]
setting.topzindex=0
setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
setting.prevpage=setting.currentpage
setting.revealtype="on"+(setting.revealtype || "click")
setting.curopacity=0
setting.onChange=setting.onChange || function(){}
if (setting.contentsource[0]=="inline")
this.buildpaginate(setting)
if (setting.contentsource[0]=="ajax")
this.ajaxconnect(setting)
}

}
//]]>
</script>

<script> 
featuredcontentslider.init({
id: &quot;slider1&quot;, //id of main slider DIV
contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
toc: &quot;#increment&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
nextprev: [&quot;Anterior&quot;, &quot;Posterior&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc.)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>


HTML (justo después de <div id='main-wrapper'>)

<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;/script&gt;&quot;);
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>


Por ultimo un detalle o truco, tal como esta configurado ahora, con un ancho de 960px, es conveniente que incorporéis imágenes grandes (+940px) a vuestras entradas. Os preguntareis que eso no puede ser, porque Blogger la redimensiona, vuestro ancho de las entradas será más pequeño, etc. Pero hay un truco, muy fácil, que mantendrá las imágenes al tamaño que queráis en vuestras entradas pero las mostrara en grande en el slide. De origen el slide redimensionaba las imágenes y no se veían bien una vez redimensionadas. Si incorporáis una imagen grande, las subís a vuestra entrada como siempre y en la URL de la imagen que os proporciona Blogger solo deberéis modificar la parte donde indica el tamaño (S320, S400, etc.) dejándolo en S0.
Leer Más...
0

Plantillas Blogger

Leer Más...
 
El Desvan de Ninfa © Copyright 2010 | Design By El Desvan de Ninfa |