ESCAPARATE DIGITAL 2019

PAGINACIÓN PARA BLOGGER .

Una de las mayores utilidades cuando empiezas a tener muchas páginas con una misma etiqueta (y que además le da un toque muy profesional a tu blog) es agregar un sistema de paginación,

en esta oportunidad os traigo un código para agregar una paginación para Blogger. Una de las grandes ventajas que busco con este sistema de paginación para el blog es que sea sencillo de instalar
y que no requiera modificar el código fuente de la plantilla de tu blog como otros sistemas de paginación para blogger disponibles, es decir que se coloque en tu blog de la misma forma que cualquier otro gadgets o widgets.

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

Si aún no sabes lo que es la paginación, con las siguientes imágenes junto a los códigos seguro te darás cuenta.

El código para agregarla es el siguiente:

Opción paginación para blogger tonalidades azules

Opción paginación para blogger tonalidades verdes

Opción paginación para blogger dark

Para insertar el sistema de paginación en el blog sólo copia el código e insértalo en tu blog (puedes elegir la combinación de colores que mas te agrade), si precisas ayuda en esta parte aquí te digo cómo agregar el código al blog, de lo contario sigue adelante.

A pesar de que tienes tres diseños prontos de paginación para blogger para agregar, el código de la paginación para blogger es totalmente personalizable, con esto me refiero a que puedes elegir cualquiera de los diseños y cambiar los colores como mejor te parezca para que se adapte al diseño de tu blog, a continuación una ayudita para esta parte:

.showpageArea {} son las propiedades css del rectángulo grande donde se va a mostrar la paginación.
.showpageArea a {} son las propiedades css de los cuadritos de los enlaces, los números y las palabras anterior y siguiente.
.showpageArea a:hover {} son las propiedades de los cuadraditos de los enlaces, los números y las palabras anterior y siguiente cuando el puntero está arriba.
.showpagePoint {} son los estilos del cuadratito y texto de la página actual
Los estilos anteriores de la paginación para blogger están en CSS, si conoces el lenguage seguramente encontrará otras cosas para modificar, si no conoces nada de este lenguaje te recomiendo que te dediques únicamente a modificar los colores de bordes (border) fondo (background) y del texto (color). Los colores estan en código de colores exadecimal (por ejemplo el color blanco en este código es #FFFFFF), si necesitas ayuda para los códigos de colores puedes ver Códigos de colores RGB

En el cógigo JavaScript que hace que la paginación para blogger funcione, también tienes algunas cosas que modificar:
var pageCount = n; es la cantidad de post que se mostrarán por página, cambia n por el valor que quieras.
var displayPageNum=n; n es la cantidad de páginas que se mostarán en en la paginación, por ejemplo si pones tres tu paginación quedará [1][2][3][Siguiente], de donde si dás en siguiente tu paginación quedará [Anterior][2][3][4][Siguiente], el número que debes de poner depende de la cantidad de páginas que tiene tu sitio si no tienes muchas un valor 2 o 3 anda bien.

Fecha de la Publicación; 22-07-2019

Fuente; pczeros

Publicado por;

WIDGET DE ARTíCULOS RECIENTES PARA BLOGGER.

Existen varios widgets para mostrar las entradas de Blogger, pero muchos estan anticuados o son bastante sosetes.

Pensando un poco en este tema, he diseñado este panel en el que mostraremos los articulos del blog de una forma mas actual y profesional.

Esta realizado utilizando jQuery, JSON y CSS3, y nos permite mostrar tantas entradas como queramos.

Tambien, como podeis observar, al pasar el cursor sobre cualquiera de las imagenes, nos aparece un tooltip que nos informa del titulo y un pedacito de texto de dicho articulo.

Este widget, por su tamaño, esta especialmente indicado para ponerlo en un gadget HTML grande, como por ejemplo debajo de las entradas o en el footer.

Si te gusta y quieres ponerlo en tu blog, copia el siguiente codigo y pegalo en un gadget HTML.

Tienes que escribir la url de tu blog donde esta indicado en rojo para que se vean tus entradas.
Tambien puedes indicar la cantidad de articulos que quieres mostrar, indicandolo donde esta en color verde, pero siempre deben de ser de 7 en 7, como por ejemplo 28, 35 o 42.

Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle = "Articulos recientes",
numposts = 42,
numchar = 100,
rcFadeSpeed = 600,
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpNEHLm0y3pnUY6YmVJCZrTCLa1mehgMqInYAFSc9KXJbwloSTqjFzwXCzsAi7kwi5eF-RxdmyW3w_0BKkmiPVz75jm2WFK5jXLqlEbPN2FJsp4GAP-wqGMk7JOSQ5Bs7xqvmrL8ReFSw/s204/images.jpeg",
blogURL = "http://urldetublog.blogspot.com";
</script>
<script>
$(function() {
$('div.rp-item img').hide();
$('div.rp-child').removeClass('hidden');

var winWidth = $(window).width(),
winHeight = $(window).height(),
ttWidth = $('div.rp-child').outerWidth(),
ttHeight = $('div.rp-child').outerHeight(),
thumbWidth = $('div.rp-item').outerWidth(),
thumbHeight = $('div.rp-item').outerHeight();

$('div.rp-item').css('position', 'static').mouseenter(function() {
$('div.rp-child', this).filter(':not(:animated)').fadeIn(rcFadeSpeed);
}).mousemove(function(e) {
var top = e.pageY+20,
left = e.pageX+20;

if (top + ttHeight > winHeight) {
top = winHeight - ttHeight - 40;
}
if (left + ttWidth > winWidth) {
left = winWidth - ttWidth - 40;
}

$('div.rp-child', this).css({top:top, left:left});

}).mouseleave(function() {
$('div.rp-child', this).hide();
});
});

function showrecentposts(json) {
var entry = json.feed.entry;
for (var i = 0; i < numposts; i++) {
var posturl;
for (var j=0; j < entry[i].link.length; j++) {
if (entry[i].link[j].rel == 'alternate') {
posturl = entry[i].link[j].href;
break;
}
}

if ("content" in entry[i]) {
var postcontent = entry[i].content.$t;
} else if ("summary" in entry[i]) {
var postcontent = entry[i].summary.$t;
} else {
var postcontent = "";
}

var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (postcontent.length > numchar) {
postcontent = postcontent.substring(0,numchar) + '...';
}

var poststitle = entry[i].title.$t;

if ("media$thumbnail" in entry[i]) {
postimg = entry[i].media$thumbnail.url
} else {
postimg = pBlank
}

document.write('<div class="rp-item"><a href="' + posturl + '"><img src="' + postimg + '" alt="thumb" /></a>');
document.write('<div class="rp-child hidden"><h4>' + poststitle + '</h4>');
document.write(postcontent + '</div>');
document.write('</div>');
}
}
document.write('<div id="mini-gallery"><h2>' + rpTitle + '</h2><sc' + 'ript src="' + blogURL + '/feeds/posts/default?max-results=' + numposts + '&orderby=published&alt=json-in-script&callback=showrecentposts"></sc' + 'ript><div style="clear:both;"></div></div>');

var i = 0, int=0;
$(window).bind("load", function() {
var int = setInterval("doThis(i)",400);
});

function doThis() {
var imgs = $('div.rp-item img').length;
if (i >= imgs) {clearInterval(int);}
$('div.rp-item img:hidden').eq(0).fadeIn(400);
i++;
}
</script></center>
<style type="text/css">
#mini-gallery {
width:532px;
margin:0px auto;
font:normal 11px Verdana,Arial,Sans-Serif;
color:#494848;
padding:8px;
background-color:#7E7E7E;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

#mini-gallery h2 {
font:bold 18px century gothic;
color:#cdcdcd;text-align:center;
text-shadow:1px 1px 1px black;
text-transform:uppercase;
margin:2px 2px 2px;letter-spacing:1px;
padding-top:5px;padding-bottom:10px;

}

#mini-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB6zeMY1D6OxdbMLEnfS8Pzc4M0bD5mmkRueHq10f6-6ps3ynhXy4t2_I_vEIkCRZ8T4g0Bg3dKvGYpzUy3YlPeSXXoQEBB4_g9TSAc_5Tvdh9MAFxA1m2RImJFFzN7ubTKxU5bnwSPxg/s48/loading-white.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}

#mini-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;
}

#mini-gallery .rp-item img:hover {-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);}

#mini-gallery .rp-item .rp-child {
position:absolute;
top:0%;
right:0%;
z-index:1000;
width:200px;
background-color:white;
border:4px solid #6FBAFD;
-webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
-moz-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
box-shadow:0px 0px 3px rgba(0,0,0,0.7);
-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
}

#mini-gallery .rp-item .rp-child h4 {
font-size:16px;
margin:0px 0px 5px;
color:#0874CC;
-webkit-text-shadow: 1px 1px 1px #000000;-moz-text-shadow: 1px 1px 1px #000000;text-shadow: 1px 1px 1px #000000;
}

#mini-gallery .rp-item:hover .hidden {display:block;}
</style>

Fecha de la Publicación; 22-07-2019

Fuente; redeando

Publicado por;

SLIDER FÁCIL CON JAVASCRIPT.

Si queremos mostrar varias imagenes en nuestro blog o web, que mejor que contar con un Slider, de los cuales existen muchos y de diversos tipos.

El que te presento en este caso, esta realizado con Javascript y es muy sencillo de implementar. Tan solo debes copiar el codigo y añadirlo alli donde quieras mostrarlo.

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

<center><div style="width:500px;height:px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;background-color:#000000;padding:15px;">
<script type="text/javascript">
var sliderwidth="500px" // Ancho slider
var sliderheight="300px" // Alto slider
var slidespeed=5 // velocidad
slidebgcolor="#000000"
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<img border="0" src="URL IMAGEN" width="500" height="300">'
leftrightslide[1]='<img border="0" src="URL IMAGEN" width="500" height="300">'
leftrightslide[2]='<img border="0" src="URL IMAGEN" width="500" height="300">'
leftrightslide[3]='<img border="0" src="URL IMAGEN" width="500" height="300">'
leftrightslide[4]='<img border="0" src="URL IMAGEN" width="500" height="300">'
leftrightslide[5]='<img border="0" src="URL IMAGEN" width="500" height="300">'
var imagegap=""
var slideshowgap=5
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width="+sliderwidth+" height="+sliderheight+" name="ns_slidemenu" bgcolor="+slidebgcolor+">')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu2"></layer>')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu3"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script></div></center>

Tienes que poner las urls de las imagenes donde esta indicado en rojo, si quieres poner mas tan solo tienes que añadir la linea
-------------------------------------------------------------------------------------------------------------
(leftrightslide[0]='<img border="0" height="300" src="URL IMAGEN" width="500" />')
-------------------------------------------------------------------------------------------------------------
tantas veces como quieras.

Fecha de la Publicación; 22-07-2019

Fuente; redeando

Publicado por;

MENÚ SENCILLO PARA BLOGGER.

Este menu gris efecto 'tab' es simple, pero a la vez efectivo y elegante. Si quieres ponerlo en tu sitio, coloca este codigo en la parte CSS de tu web. En Blogger, seria en la plantilla HTML antes de ]]></b:skin

Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

1 Un clic en “Plantilla”

2 Un clic en “Editar HTML”

Ahora se te abrirá el Editor HTML de tu plantilla

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

3 Busca el siguiente código

]]></b:skin>

4 Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste

#menu {padding:0; margin:0; list-style:none;}<br /> #menu li {float:left; margin-left:1px; padding-top:2px;}<br /> #menu li a {display:block; height:38px; line-height:38px; padding:0 20px 0 0; float:left; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhyphenhyphenchYJyi2MgKgpHEZCI9U0074d4bmyEOoxUwugP2yb3ikD8QD5GuG3sFX6d23kOEAgteb2CoX-vYGLqrYC7J2Cq9Gee-3P4R8Yx-KDKjLJkkdooMPy1PlHhumxpyca-ec_bSCUd2BGLGZ/s1600/tab_a.gif) no-repeat right top; color:#000; text-decoration:none;}<br /> #menu li a b {display:block; height:38px; float:left; padding:0 0 0 20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv2ioHge8g2L_nCYLJA9WDLBgy1eoWvUFDufp6GV6OIMOhN0E9kleN9OiKD_9iM-kubh-7J9dHUkuH9eggKSvkWD_UXM2bav89ZyXtO5Y614f20GbTe4mFoubgubsijbNTv2wE2MuLoH8T/s1600/tab_b.gif) left top; cursor:pointer;}<br /> #menu li a:hover, <br /> .home #menu li#home a,<br /> .single #menu li#single a,<br /> .dropdown #menu li#dropdown a,<br /> .dropline #menu li#dropline a,<br /> .flyout #menu li#flyout a,<br /> .support #menu li#support a,<br /> .contact #menu li#contact a<br /> {background-position:right -51px; margin-top:-2px; height:40px;}<br /> #menu li a:hover b,<br /> .home #menu li#home a b,<br /> .single #menu li#single a b,<br /> .dropdown #menu li#dropdown a b,<br /> .dropline #menu li#dropline a b,<br /> .flyout #menu li#flyout a b,<br /> .support #menu li#support a b,<br /> .contact #menu li#contact a b<br /> {background-position:left -51px; height:40px;}

Y ahora editamos un gadget HTML, lo ponemos donde queramos ubicarlo y en su interior añadimos:

Ir a Blogger

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

<div id="menuContainer"><ul id="menu"><li class="first" id="Home">
<a href="URL"><b>NOMBRE ENLACE</b></a></li>
<li id="single"><a href="URL"><b>NOMBRE ENLACE</b></a></li>
<li id="dropdown"><a href="URL"><b>NOMBRE ENLACE</b></a></li>
<li id="dropline"><a href="URL"><b>NOMBRE ENLACE</b></a></li>
<li id="flyout"><a href="URL"><b>NOMBRE ENLACE</b></a></li>
</ul></div>