• image01
    TRUCOS PARA TU BLOG
  • image02
    TUTORIALES
  • image03
    VIDEOTUTORIALES
  • image04
    PROGRAMAS

Poner Últimas Entradas con un Gadget


Poniendo este Gadget en nuestro Blog , nuestros lectores sabrán cuales son nuestros últimos temas que hemos publicado.
Podremos configurarlo en lo siguiente:

+ visualizar una miniatura- configurar alto y ancho donde dice: width:65px;height:65px;
+ El inicio del texto de la entrada.
+ La fecha.
+Borde y color para cada tema en: border: 0px solid #ccc; en border pueden dejar 1px y en solid dejar el color de su elección.

Para agregarlo a nuestro Blog solo debemos ir a la parte de Diseño / Añadir un Gadget / HTML-Javascript y agregar el siguiente código : 



<style type='text/css'>


img.recent_thumb {padding:2px;width:65px;height:65px;border:0;
float:left;margin:5px 10px 10px 0; border: 0px solid #ccc;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 100px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:75px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
.recent_posts_with_thumbs h4 {
text-transform: uppercase;
font-size: 14px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)


{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='http://www.webaholic.co.in/other/no-image.jpg';
}


var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Ene";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Abr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Ago";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dic";document.write('<li class="clearfix">');




if(showpostthumbnails==true) 
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><h4><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b></h4>');


if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g; 
postcontent = postcontent.replace(re, "");




if (showpostsummary == true) {


if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}


var towrite='';var flag=0;
document.write('<br><strong>');


if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+' - '+cdday+' - '+cdyear;flag=1;}


if(showcommentnum==true) 
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='0 Comments') commenttext='0 comentarios';
if(commenttext=='1 Comment') commenttext='1 comentario';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}


if(displaymore==true) 
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más</a>';
flag=1;
;
}


document.write(towrite);


document.write('</strong></li>');
if(displayseparator==true) 
if (i!=(numposts-1))
document.write('');
}document.write('</ul>');


}
//]]>
</script>
<script style='text/javascript'>
var numposts = 10;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 60;</script>
<script src='XXXXXXXXXXfeeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Las siguientes lineas se configuran con TRUE para que se muestre y FALSE para ocultarlo. Hay dos que se definen con un valor numérico:  var numposts = 10;  -  var numchars = 60;

var numposts = 10; » Muestra el número de entradas que se visualizarán.
var showpostthumbnails = true; » Mostrar la miniatura de la primera imagen del tema.
var displaymore = false; » Mostrar la palabra "Más" para ir al tema.
var displayseparator = false; » Mostrar una línea que separa los temas del gadget.
var showcommentnum = false; » Mostrar el número de comentarios.
var showpostdate = false; » Mostrar la fecha de publicación del tema.
var showpostsummary = true; » Mostrar el texto del inicio del tema.
var numchars = 60; » Muestra el número de caracteres que incluirá el texto.

Para terminar colocamos la URL de nuestro Blog por las xxxxxxxxxx, Guardamos cambios y y esta.


Si te sirvió Compártelo en tus Redes Sociales!

Como centrar los Títulos de las Entradas en Blogger

Seguramente al ver sus entradas , hay un detalle que les llama la atención : El titulo esta pegado a la izquierda.  Ahora veremos como centrar dichos títulos , para mejorar la apariencia de nuestro Blog usando el siguiente código:

text-align: center;

Sea cual fuere su plantilla del Blog nos vamos a : Plantilla / Editar HTML  y ubicamos la siguiente linea:


h3.post-title {       ( si no es esta hacemos la prueba con la siguiente)



.post-title {             ( si no es esta hacemos la prueba con la siguiente)



.post h3 {                 ( si no es esta hacemos la prueba con la siguiente)



.post-title { margin: 0; padding: 10px;          
  

Pinchamos Control + F verás un buscador que sirve para usarlo en cualquier página, coloca el comando, por ejemplo: .post h3 {   y te lo ubicara de inmediato.

Busquen cualquiera de las cuatro líneas que les muestro arriba en su plantilla; ahora solo tienen que ubicar la línea para centrar, debajo de la línea de titulo que ustedes usen; como ejemplo les muestro la mía  que uso la Plantilla Etherea.

h3.post-title, h4 {

text-align:center;

font: $(post.title.font);

color: $(post.title.text.color);

}


En algunas plantillas antiguas, tal vez sea necesario no dejar un espacio entre: y center , quedando de la siguiente manera:

text-align:center;

Nota.-Para una plantilla de las que se consiguen con diseños ya hechos en páginas especializadas para plantillas, es muy probable que no vean ninguno de los códigos de arriba, por lo general la parte del titulo en estas plantillas es así:

<b:if cond='data:post.title'>
<div style="text-align: center;">
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</div>
</b:if>

Solo tendrían que agregarle las etiquetas <div>, que están en color rojo, como pueden darse cuenta en este caso la estiqueta div se coloca sobre el <h3 class='post-title entry-title'> y no debajo de él, el cierre del </div> va sobre el último cierre del </b:if>, la mayoría de veces es fácil saber donde termina ya que después sigue un nuevo <div>

Guardamos cambios y ye esta . 



Si te Gusto Compártelo en tus Redes Sociales

Poner una Camara de Vigilancia en tu Blog



Esta vez pondremos una cámara de vigilancia en nuestro Blog. Que se encargara de vigilar cada movimiento de tecla de tus Lectores.....
En fin solo se trata de darle un aire de frescura a nuestro Blog con este Gadget.

Empecemos entonces:

1.- Nos vamos a Diseño / Agregar Gadget / HTML Jva Script.

2.- Copiamos el siguiente código y lo pegamos dentro del Gadget.

<div style="text-align: center;">
<a href="http://bit.ly/pg9PmI" _fcksavedurl="" style="right: 0px; position: fixed; top: 0px;"><img src="http://www.imagenesanimadas.net/Tecnologia/Camaras-Vigilancia/Camaras-01.gif" _fcksavedurl="http://www.imagenesanimadas.net/Tecnologia/Camaras-Vigilancia/Camaras-01.gif" alt="" /></a></div>


3.- Guardamos los cambios y ya esta.

Nota.- La cámara se situara en la esquina  superior derecha.


Si te gusto compártelo en tus Redes Sociales

Aviso: Comentar es Agradecer con la imagen de Bart Simpsom en tu Blog











Con este truco se hace realidad el ya famoso dicho Bloggero "Nuestro Blog se alimenta de tus Comentarios"
En fin para persuadir sutilmente a nuestros lectores a dejar al menos un Gracias! Procederemos a instalar este Gadget en vuestro BLOG.

1. Nos vamos a Diseño: Agregar un Gadget / HTML Java Script.

2. Copiamos el siguiente código y lo pegamos dentro de nuestro Gadget.

<br /> <br /><a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="    http://supertrucosparatu.blogspot.com/2013/06/aviso-comentar-es-agradecer-con-la.html"><img src="http://2.bp.blogspot.com/-tOWrMfNgAvw/TaHe2waJ7pI/AAAAAAAAAIA/ls96OQCpiHs/s1600/gadget.png" /></a><br /><br /> 

3. Guardamos cambios y ya esta.

Nota.- en este caso tampoco es necesario un titulo.
+El codigo esta configurado para que la imagen aparezca en el lado inferior derecho=right , pero si lo quieres en la izquierda solo cambia  right por  left.

Pueden copiar las imagenes de arriba y usarlas . o sino crearse las suyas en Photoshop


Si te gusto compártelo en tu Red Social!

Poner el botón de ir Arriba e ir Abajo en tu Blog [con un Gadget]


Este truco siempre es necesario pues todo Blogger tiene mas de una entrada extensa y encima si tiene muchos comentarios, le hará falta este Gadget pues como Bloggeros queremos hacerle la vida fácil a nuestros lectores.

Empecemos entonces :

1. Nos vamos a Diseño / Agregar Gadget / HTML  Java Script.

2. En este caso no es necesario ponerle un titulo.

3. Copiamos el siguiente  código y lo pegamos  dentro del Gadget.


<div id="navigation_up_down_79136"><noscript>Javascript is disable - <a href="http://www.webestools.com/">Webestools</a> - <a href="http://www.webestools.com/navigation-buttons-generator-scroll-top-bottom-shortcut-page-up-down-scroll-buttons-javascript.html">Navigation Buttons Generator html scroll up down</a></noscript><script type="text/javascript" src="http://services.webestools.com/navigation_up_down/1-79136-right.js"></script></div>


4. Guardamos cambios y ya esta.



Ventana flotante con opción de cerrar con una X


Esta vez les enseñare como crear una ventana flotante ,con opción de cerrar con una  (x).
Esto les servirá cuando quieran dejar una nota a sus seguidores, lectores en fin.
Solo bastara que copien y peguen el siguiente código en un GADGET HTML-JAVA Script:
Abren su cuenta , DiseñoAgregar un Gadget, Html - Java Script y pegan el código en el contenedor.

No es necesario poner un titulo.

<div id='ventana-flotante'>

   <a class='cerrar' href='javascript:void(0);' onclick='document.getElementById(&apos;ventana-flotante&apos;).className = &apos;oculto&apos;'>x</a>

   <div id='contenedor'>

       <div class='contenido'>

Aquí va el mensaje.

       </div>

   </div>

</div>

<style>
#ventana-flotante {
width: 360px;  /* Ancho de la ventana */
height: 90px;  /* Alto de la ventana */
background: #ceffad;  /* Color de fondo */
position: fixed;
top: 200px;
left: 50%;
margin-left: -180px;
border: 1px solid #adffad;  /* Borde de la ventana */
box-shadow: 0 5px 25px rgba(0,0,0,.1);  /* Sombra */
z-index:999;
}
#ventana-flotante #contenedor {
padding: 25px 10px 10px 10px;
}
#ventana-flotante .cerrar {
float: right;
border-bottom: 1px solid #bbb;
border-left: 1px solid #bbb;
color: #999;
background: white;
line-height: 17px;
text-decoration: none;
padding: 0px 14px;
font-family: Arial;
border-radius: 0 0 0 5px;
box-shadow: -1px 1px white;
font-size: 18px;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
}
#ventana-flotante .cerrar:hover {
background: #ff6868;
color: white;
text-decoration: none;
text-shadow: -1px -1px red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
#ventana-flotante #contenedor .contenido {
padding: 15px;
box-shadow: inset 1px 1px white;
background: #deffc4;  /* Fondo del mensaje */
border: 1px solid #9eff9e;  /* Borde del mensaje */
font-size: 20px;  /* Tamaño del texto del mensaje */
color: #555;  /* Color del texto del mensaje */
text-shadow: 1px 1px white;
margin: 0 auto;
border-radius: 4px;
}
.oculto {-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;-ms-transition:1s;opacity:0;-ms-opacity:0;-moz-opacity:0;visibility:hidden;}
</style>

<!--[if IE]>
<style>
.oculto {display:none}
</style>
<![endif]-->

En las partes del texto que esta con verde: ustedes configuran el fondo, borde, texto, color del texto, ancho de la ventana, alto de la ventana, la sombra.
En la parte que esta con azul ponen su mensaje.
Podran ponerla donde gusten: centro, derecha, izquierda, en : Position, Top, Left.
Les quedara como este ejemplo: Ventana Flotante con X para cerrar

Imagen Flotante con opción de cerrar en Blogger

E
n algunas ocasiones de seguro necesitaremos este truco en nuestro Blog, ya sea para publicitar algo, felicitar a alguien o simplemente saludar  a nuestros seguidores en días festivos como Fiestas Patrias, Navidad, Fin de Año,etc,etc.Click aqui para ver el resultado en mi blog de intercambio.

Clic en el enlace para visualizar el efecto: Vista previa


Entonces manos a la obra : abrimos nuestra cuenta de Blogger y vamos a Plantilla / Edición HTML y  antes de <\head> copia y pega esto:

<script type='text/javascript'>
//<![CDATA[
var ftr_arr = new Array();
var ftr_clear = new Array();
function ftrFloat(ftr) {
ftr_arr[ftr_arr.length] = this;
var ftrpointer = eval(ftr_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.ftrsrc = document.all? document.all[ftr] : document.getElementById(ftr);
this.ftrsrc.height = this.ftrsrc.offsetHeight;
this.ftrheight = this.cmode.clientHeight;
this.ftroffset = ftrGetOffsetY(ftr_arr[ftrpointer]);
var ftrbar = 'ftr_clear['+ftrpointer+'] = setInterval("ftrFloatInit(ftr_arr['+ftrpointer+'])",1);';
ftrbar = ftrbar;
eval(ftrbar);
}

function ftrGetOffsetY(ftr) {
var ftrTotOffset = parseInt(ftr.mtasrc.offsetTop);
var parentOffset = ftr.ftrsrc.offsetParent;
while ( parentOffset != null ) {
ftrTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return ftrTotOffset;
}
function ftrFloatInit(ftr) {
ftr.pagetop = ftr.cmode.scrollTop;
ftr.ftrsrc.style.top = ftr.pagetop - ftr.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("ftr_imagen").style.visibility = "hidden";
}
//]]>

</script>



Luego antes de </body> copia y pega lo siguiente: 

<a href="URL del enlace">
<div id='ftr_imagen'>
<img border='0' class='close' onClick='closeTopAds();return false;' src='http://4.bp.blogspot.com/_qgZA1ny_dAs/S0jtqeCcWUI/AAAAAAAADkA/qLZkUMRn7FU/s200/iconClose.gif'/>
</div>

</a>

Nota.- la primera  linea que esta de rojo y azul es opcional si quieren ponerle un vinculo a la imagen, si no lo desean simplemente la borran, de ser así también borren el cierre </a>

Para finalizar copiamos y pegamos lo siguiente : antes de   ]]></b:skin>

#ftr_imagen {
background: url(URL de la imagen flotante) no-repeat;
bottom: 0px;
right: 0px;
width: 128px;
height: 128px;

position: fixed;
}
.close {
float: right;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}


Agregamos la URL de la imagen en la linea que esta de azul

Nota.- podras configurar lo siguiente:
Width= ancho
Height= alto
Right (derecha) o Left (izquierda)

También para que no se demoren localizando las etiquetas ejecuten el buscador: CTRL+G ,digitan  </head> y le dan Enter, y en instantes lo buscara por ustedes.

Imagen flotante en Blogger

P
ara lograr este efecto nos dirigimos a: Diseño / Agregar Gadget / seleccionamos "HTML-Java SCRIPT" y  ahi  copiamos y pegamos el siguiente código:

<a style="display:scroll;position:fixed;bottom:0px;right:0px;" href=" http://programas-gratis-pc-full.blogspot.com/p/videos.html"/><img src="http://3.bp.blogspot.com/-QAaI6-MlfQY/UYubBRimfYI/AAAAAAAAAdA/jepB3qeBxfc/s320/123.jpg "/></a>

Nota.- en las lineas de color azul ustedes las cambian por sus datos: Url de la imagen y Url a donde redireccionara la imagen al hacer click en ella.


Eliminar/Ocultar mensaje"Mostrando entradas con la Etiqueta ...... "


Seguro les a pasado que cuando están buscando una etiqueta del blog y usamos el método clásico de búsqueda en blogs"Las Etiquetas" y nos aparece un rectángulo con este mensaje un tanto molesto: 




Bueno manos a la obra y hacemos lo siguiente:

Opción 1 (Ocultar mensaje)

Abren su blog nos vamos a Plantilla / Edición de HTML y antes de ]]></b:skin>  copiamos y pegamos  esto:

.status-msg-wrap {visibility:hidden;display:none;}


Opción 2 (Eliminar mensaje)

Entran a Plantilla / Edición de HTML, CTRL +G para abrir el buscador  y ubica  este código:

<b:include data='top' name='status-message'/>

Lo eliminamos  y guardamos  los cambios, eso seria todo. El mensaje ya no volverá a aparecer, usando cualquiera de los dos trucos.