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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZ1O7QkoaZjc6DC1xMwZ9SA8efzuiAL90bcN7SmCjifINTcDramTlpeLU-qh0dz6y5c4CFVYuLtCuops2tFlI_myPlyd7Wl8sbvL61uMEiHQA4GDfx_5Z9J1yjsn7u9Lh12eU_AdP8AWP/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;






                                                                                              
By
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;
                                                                                       











By

MENSAJE TIPO POST  PARA TU BLOC



Ahora que estuve ausente se habrán dado cuenta que al entrar al bloc aparecía un mensaje indicando que me encontraba fuera de la ciudad. Este mensaje tiene la opción de cerrarse para no molestar al visitante y se puede usar para poner cualquier tipo de aviso importante en el bloc.

Para colocar un mensaje tipo Post en tu bloc sólo entra a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pega ahí lo siguiente:


<style>
<!--
#postit{width:300px; height:100px; padding:5px; position:absolute; background-color:yellow; border:1px solid black; visibility:hidden; z-index:50; cursor:hand; color: #000;}
-->
</style>

<div id="postit" style="left:200px;top:50px">
<div align="right"><b><a href="javascript:closeit()"><font face="Arial" size="1">[CERRAR]</font> <img valign="middle" src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/CloseIcon-small.png"/></a></b></div>

<!--AQUI VA EL MENSAJE-->
<br/>
Aquí va el mensaje que se mostrará cuando alguien ingrese al blog.
Para más trucos y tutoriales visita <a href="https://lapaginadekikodeblogger.blogspot.com.es/">La Pagina de Kiko de Bloggerr</a>

<!--FIN DEL MENSAJE-->


<script>

//Post-it only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause postit to display every time page is loaded
var once_per_browser=0

///No need to edit beyond here///

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ns4)
crossobj=document.layers.postit
else if (ie4||ns6)
crossobj=ns6? document.getElementById("postit") : document.all.postit


function closeit(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
crossobj.visibility="hide"
}

function get_cookie4(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie4.length > 0) {
offset = document.cookie4.indexOf(search)
if (offset != -1) { // if cookie4 exists
offset += search.length
// set index of beginning of value
end = document.cookie4.indexOf(";", offset);
// set index of end of cookie4 value
if (end == -1)
end = document.cookie4.length;
returnvalue=unescape(document.cookie4.substring(offset, end))
}
}
return returnvalue;
}

function showornot(){
if (get_cookie4('postdisplay')==''){
showit()
document.cookie4="postdisplay=yes"
}
}

function showit(){
if (ie4||ns6)
crossobj.style.visibility="visible"
else if (ns4)
crossobj.visibility="show"
}

if (once_per_browser)
showornot()
else
showit()


</script>

<script language="JavaScript1.2">

//drag drop function for ie4+ and NS6////
/////////////////////////////////

function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
return false
}
}

function initializedrag(e){
if (ie4&&event.srcElement.id=="postit"||ns6&&e.target.id=="postit"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

</script></div><div class="clear"/></div>


En la primera parte del código (la que está en color verde) puedes cambiar el color de fondo, el color de la letra, el tamaño del cuadro, etc.
Tu mensaje debes ponerlo cambiando lo que está en color rojo, puedes usar negritas, cursiva, links, etc.
Si quieres que el aviso aparezca sólo una vez por sesión cambia donde dice:
var once_per_browser=0

Y modifica el 0 por 1, de lo contrario el mensaje aparecerá cada vez que recargue la página o se abra otra página dentro del mismo bloc


Fecha: 01/01/2018

 Fuente

 Publicado por:                           


By

MENSAJE TIPO POST  PARA TU BLOC


                                                                           


Cuando se requiere hacer grandes cambios a nuestro blog, también se requiere de grandes tiempos para ese cometido. Lo mejor y mas sano, a mi parecer, sería ocultar nuestro blog mientras realizamos las remodelaciones pertinentes. Pero... ¿Como podemos hacer para que nuestros lectores sepan lo que está sucediendo?. Creo que lo mas viable y rápido sería la implementación de un cartel  con la siguiente notificación:

Para implementar este cartel haremos lo siguiente: accedemos a nuestra plantilla de la manera acostumbrada y luego, sin expandir artilugios, y con la ayuda de nuestro buscador de códigos 

CTRL+Fubicamos  <body> y justo despues colocamos esto: 


<spam class="item-control blog-admin">  


Seguidamente ubicamos   </body> y sobre él colocamos esto  </spam> que corresponde al cierre del código anterior. Ahora, para la colocación del cartel de notificación volvemos a ubicar en nuestra plantilla   <body> y tiene que ser justo despues que vamos a colocar éste último código para dejar, de manera definitiva, implementado este truco.


<div style="text-align: center;"><img src=" https://sites.google.com/site/venmarzul/imagenes-1/DIVIDER_15%28OJO%29.jpg"/></div> 


Nota: lo resaltado es lo que podemos modificar con la imagen que queramos...

Aquì te dejo algunas imágenes para colocar


Fecha: 01/01/2018

 Fuente: masaudaz

 Publicado por:                                




   





By

COMO CREAR UNA PAGINA DE ERROR EN BLOGGER




De nuevo regreso con otra página de error-404 per esta es mucho más fácil añadirla a nuestra plantilla, tan solo copiando y pegando el código mostrado más abajo.

También puedes encontrar otras formas de establecer la página de error 404, entre ellos ( El Potro-Ciudad blogger o Oloman-Oloblogger.)

Pero quizás esta fórmula, sea de entre todas por su sencillez, la más fácil y menos complicada de adaptarla al blog y todo ello realizado en CSS, sin imágenes ni javascript. 

La página de error se muestra a pantalla completa con el anuncio "La página que buscas no existe" y con un enlace de regreso a la página principal. Además causa un impacto muy positivo, al no mostrar los elementos de tu blog (cabecera, columnas, menu, etc.)

Colocar el Código

Entra en Diseño | Edición de HTML y antes de </body> pega lo siguiente:


<style type="text/css">
#pagina-error {background-color:#e9e9e9;position:fixed !important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999;}
#error-interno {margin:11% auto;}
#error-interno .caja-404 {width:400px;height:200px;background:#b71427;color:#fff;font-size:80px;line-height:200px;border-radius:10px;margin:0 auto 50px;position:relative;}
#error-interno .caja-404::after {content:&quot; &quot;;width:0;height:0;bottom:-8px;border-color:#b71427 transparent transparent;border-style:solid;border-width:9px 9px 0;position:absolute;left:47%;}
#error-interno h1 {text-transform:uppercase;}
#error-interno p {line-height:0.7em;font-size:15px;}
</style>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='pagina-error'>
<div id='error-interno'>
<div class='caja-404'>
404
</div>
<h1>
La página que buscas no existe
</h1>
<p>
La página ha sido eliminada o has escrito una URL incorrecta
</p>
<p>
Volver a -
<a expr:href='data:blog.homepageUrl'>
<data:blog.title/>
</a>
</p>
</div>
</div>
</b:if>

Una vez establecido el código procedemos a [Guardar Plantilla]. Podéis ver vuestra página de error escribiendo en el navegador vuestra dirección url y añadiendole cualquier letra o palabra. Ejemplo (https://lapaginadekikodeblogger.blogspot.com.es/noexiste ) 
Fecha:01/01/2018

 Publicado por:                                           


By