PANEL CON LAS ULTIMAS ENTRADAS CON EFECTO LOADER.

En este artículo vamos a ver cómo lograr este sencillo slider que, sin duda, añade un plus de usabilidad
 a la web ya que usa la típica imagen de Ajax Loader y el usuario sabrá que hay alguna acción que se está realizando en la web.
El slider además de tener el efecto carga, lleva descripciones de las entradas mediante Tooltip y se podrá navegar a las entradas mediante las imágenes.
 Está configurado como slider pero también se puedeajustar a la sidebar cambiando algunos parámetros que veremos más abajo.

DEMO EN LA PAGINA DE INICIO EN FUNCIONAMIENTO.

Para agregarlo en tu blog.

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

<style type="text/css">
#post-gallery {
width:560px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:#000000;
padding:5px;
background-color:#4d4c4c;
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
}
#post-gallery h2 {
font:20px Arial,Sans-Serif;
color:#4D4C4C;
text-shadow:0px 3px 2px black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#F8F7F7;
text-align: center;}
#post-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('https://lh4.googleusercontent.com/-aZJwGqNHmA4/UazNH1YgU_I/AAAAAAAAL54/IkoFN96MP58/s48-no/amor-cargando.gif') no-repeat 50% 50%;
width:66px;
height:66px;}
#post-gallery .rp-item img {
width:66px;
height:66px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;}
#post-gallery .rp-item .rp-child {
position:relative;
top:10%!important;
left:10%!important;
z-index:1000;
width:200px;
background-color:white;
border-top:5px solid #4d4c4c;
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0px 0px 5px;
color:#4d4c4c;}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>
<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 = "ULTIMAS ENTRADAS", // Título gadget
numposts = 24, // número de imágenes / entradas a mostrar
numchar = 200, // Número de caracteres a mostrar en tooltip
rcFadeSpeed = 600, // Velocidad del efecto. fadeIn () tooltip 
pBlank = "http://imagenes.es.sftcdn.net/es/scrn/301000/301015/blogger-16.png", // Imagen a mostrar si la entrada no la contiene
blogURL = "http://www.amorsevillista.com/"; // Dirección URL de tu blog
</script>
<script > // ULTIMAS ENTRADAS CON EFECTO LOADER POR AMORLA PAGINA DE KIKO DE BLOGGER
// Visita:https://lapaginadekikodeblogger.blogspot.com.es/
// original :)

$(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="post-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>

Todo lo que está marcado en negrita es configurable:

var rpTitle = "ULTIMAS ENTRADAS", // Título gadget
numposts = 24, // número de imágenes / entradas a mostrar
numchar = 200, // Número de caracteres a mostrar en tooltip
rcFadeSpeed = 600, // Velocidad del efecto.
pBlank = "https://lh4.googleusercontent.com/-Q5TyyMqOEkk/UV4vn45zY4I/AAAAAAAAJCk/WXm15PWrULA/s100/no-img.png", // Imagen a mostrar si la entrada no la contiene
blogURL = "https://lapaginadekikodeblogger.blogspot.com.es//"; // Dirección URL de tu blog (Cambiar por la vuestra)

Despues de haber insertado el código, un clic  "Guardar"

   Fecha de la Publicación; 11-03-2019

 Fuente;

 Publicado por;

                                                                                              

SCROLL INFINITO EN TU PAGINA DE INICIO EN BLOGGER 

Una de las nuevas formas de cargar una pagina web o blog, es el scroll infinito, el cual consta en que a medida que se vaya bajando el contenido de un blog,

mas contenido se ira cargando automáticamente  eliminando así la necesidad de tener que dar clics en los enlaces de paginación.

Este truco hará que el lector tenga una experiencia mucho mas amena e interactiva, ya que este sistema lo usan sitios de la talla de Facebook o Twitter.


Para añadir el truco del scroll, no hay necesidad de tocar la plantilla, solo debes ir aDiseño, Añadir Gadget, HTML/JavaScript, y allí pega lo siguiente:

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

<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>
<script src='http://yourjavascript.com/4153098131/infinite-scroll-for-blogger-blogs.js' type='text/javascript'/></script>

Despues de haber insertado el código, un clic en  "Guardar"

Fecha de la Publicación; 11-03-2019

Fuente; masaudaz

 Publicado por;