Widget De Autodesplazamiento De Imagenes Con Enlace Para Blog

En este ocasion te mostrare un gran truco para desplazar imagenes en tu pagina principal de blog de blogger.Este es un widget avanzado para todos los blogeros. Este ademas puede desplazar las imágenes de tu post blogger sin ningún esfuerzo. Sólo tienes que copiar y pegar el código de abajo e insertarlo en lugar deseado.

Ejemplo de Imagenes Desplazables:

Pasos para insertar imagenes desplazables en tu blog de blogger.
1.Entre en tu cuenta de Blogger .

• Copie el codigo de abajo y peguelo donde desee poner este widget

<marquee behavior="scroll" direction="Izquierda">
<img src="Enlace de la Imagen" alt="Label of image" height=" Altura de Imagen " width=" Ancho Imagen" />
<img src="Enlace de la Imagen" alt="Label of image" height=" Altura de Imagen "
width=" Ancho Imagen " />
</marquee> 

• Reemplace  el color Rojo con el enlace de la imagen , Direccion de la imagen y puedes cambiar la  altura y ancho de la imagen .
• Una vez tengas todos estos datos podras incluirla en tus articulos o en la barra lateral usando Html/javascript.

• Guarda la plantilla

Read More

Añade Menu Marcador Flotante A Tu Blog

 En esta ocasion te mostrare el super truco para insertar un menu de marcador atractivo flotante para tu blog de blogger.
Este widget Incluye atractivos iconos dentro del mismo.Este menú flotante aparecerá en cada entrada de tu blog.Asi,los visitantes siempre accederan al mismo facilmente.Asi este truco ayudara a que mas visitantes te enlacen con Facebook, Twitter, y  RSS.Este truco se puede anadir a tu blog siguiendo estos simples pasos.

Demostracion: Da Clic En Imagen Abajo

Pasos Insertar este widget a tu blog de blogger.

1. Entrar a la cuenta de blogger e Ir a Diseño >> Edición de HTML
     (asegúrese de hacer una copia de seguridad de la plantilla primero)

2. Encuentre esta etiqueta ]]> </ b: skin> usando Ctrl + F

3. Pegue el código de abajo antes de ]]> </ b: skin>

.bt-wdt{
 position: fixed;
 right: 10px;
 top: 43%;
}

.bt2-wdt{
 position: fixed;
 right: 30px;
 bottom: 22%;
}

.bt-wdt img{
 float: right;
 clear: right;
 margin: 5px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
.bt-wdt img:hover{
 -moz-transform: scale(1.2) rotate(6deg);
 -webkit-transform: scale(1.2) rotate(6deg);
 -o-transform: scale(1.2) rotate(6deg);
 -ms-transform: scale(1.2) rotate(6deg);
 transform: scale(1.2) rotate(6deg);
}

4. Ahora vaya a Diseno >>Elemento de Pagina

5. Haga clic en Agregar un Gadget y seleccione "HTML / Javascript"

6. Pegue el código siguiente.

!-- www.ciudadblogger -->
<div class="bt-wdt">
 <!-- Facebook -->
 <a href="http://www.facebook.com/Nombre-Pagina" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbugsY-p23kWxCggc3Do-a24SnPoAC9xngKs41KiTGMidU3Z58xTo20iBBC_ma23oUVv47NLIpYRlE2gtVZfMVgP-GhC4g4TWWV85as3e-qyv_X_aipBlYnx5tDZIwA9gdpOtTY95fo90P/s1600/inside-facebook-icon.png" /></a>
 <!-- Twitter -->
 <a href="http://twitter.com/Nombre de Usuario" title="Follow me on Twitter" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyCRQan04hcQlxz8Rafz8LgV-OwV_JamLNJQ6hO_rW0DWuQuxaSzp9fmLaoWQQLr_31Ci2D0O4rPl3rgUB2Ts5TTA1wHG29TmuBjieUMS9SKlWsT4sTDjXZQFJB-JCq3_B576GwrhHJCPd/s320/inside-twitter-icon.png" /></a>
 <!-- RSS -->
 <a href="http://feeds.feedburner.com/Direccion del Feed" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2gRjh4fn6dtZ5kd178S2cLsnyjbSHceBpy9UbRr6K1__zyZ3R2Eu0sh-Yx1gMNIkyX2wVhidwBQhxw4hqPz3eZKUNvtpbNHF9wMa0dcThs-uPDB77pD0nVYLnzm5EVAT2tWICuLnA2mq1/s1600/inside-rss-icon.png" /></a>
</div><div class="bt2-wdt"><a style=" font-size:9px; color:#3B78CD; text-decoration:none;"href="http://www.bloggertrix.com/2012/05/how-to-add-smooth-jquery-facebook-like.html"> Get This</a>
</div>
<!-- End -->

*Reemplace Nombre Pagina por el nombre tu pagina de Facebook
*Reemplace Nombre de Usuario por el nombre de tu Twitter
*Reemplace Direccion del Feed por la direccion de tu feedburner .

7. Guarda tu Plantilla
 Esteb truco de blog esta listo.

Read More

Nuevo Boton De "Back To Top" Para Blogger

Como hacer que tus visitantes del blog pueden desplazarse desde un punto de abajo de la pagina a  la parte de arriba de la pagina con solo dar un click a un boton.

En este articulo te presentare la forma mas simple de anadirlo a la parte de abajo esquina derecha de tu blog siguiendo estos pasos.

Como Anadir el nuevo boton  Back To Top a tu  Blogger

1.Entra a la interface de blogger>>Diseño --Elementos de Pagina.

2.Da Click en 'Anadir un Gadget' en la barra del lado.


3.Selecciona 'HTML/Javascript' anadir codigo siguiente.

<!--Back to top Start bloggertricksandtoolz.com-->
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAU-tzloXBdcz-hcA_63_VFjTLG3MLLo40rp-K_jPyzNVeOzjVAkeB2lE1dCLBzT01qN_TNv6hQengJuy-ncMDt8d7nfIZue94WPPvFc0NQHI5BJfTy8vocbwvQjiPGRawsKB_WZOeqbM/&#39;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj50KVUDXBhcdnO0RMba0qImiMd3M_SqQBsVhtmq4pZzoJaCmFsZ6J8fwMiHc2U36z54yNwodSvmU2vm19VVYXcNavYBinZeGaEwuqxV4Z74lJ6R0N6qvWH1nJ4gEyv1DD4_uqi0Vc9Olw/" onmouseout="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj50KVUDXBhcdnO0RMba0qImiMd3M_SqQBsVhtmq4pZzoJaCmFsZ6J8fwMiHc2U36z54yNwodSvmU2vm19VVYXcNavYBinZeGaEwuqxV4Z74lJ6R0N6qvWH1nJ4gEyv1DD4_uqi0Vc9Olw/&#39;" /></a>
<!--Back to top End bloggertricksandtoolz.com-->

Nota: Cambie la frase Back to Top Con una que les guste

4.Ahora esta listo

Read More

Como Añadir Gadget Lea Mas Articulos Con Fotos En Blogger

Este asombroso truco  creara un resumen de tus entradas con foto. No necesitaras anadir codigo en cada entrada que hagas o escribas.

1.Eentra en tu "Plantilla" --> "Editar HTML" de tu blog.
2.Da Click en "Plantilla de Formato"
3.Baja hasta donde dice </head> tag.
4.Añade el codigo de abajo antes de </head> .

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150; 
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }

 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}

//]]>
</script>

Nota : Puedes cambiar los valores a tu gusto.
summary_noimg : Numberos de caracteres mostrados cuando no hay una imagen.
summary_img :numeros de caracteres a mostrar cuando hay imagen.
img_thumb_height :altura de la foto.
img_thumb_width : anchura de la foto.


5AHORA baja a donde veas este codigo:

<data:post.body/>

6.Reemplaza el codigo de arriba por este de abajo.

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>

7.Guarda tu plantilla y esta listo.disfrutalo.

Read More

Como Anadir Estilo Al Cursor de Tu Mouse En Blogger

1.Conectate a tu blogger dashboard-->Layout > Page Elements
2.Da Click en 'Add a Gadget' en la columna del lado..
3.Seleciona 'HTML/Javascript' y anade el siguiente codigo y guardalo.

<script language="javascript">

// COLOCA TU TEXTO ABAJO.  *NO* PUEDES CODIGOS HTML.
var text='COLOCA TU MENSAJE AQUI...';

var delay=40; // Speed
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO EDITE ESTE CODIGO**********\\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>

Listo.Dale Refresh para ver el efecto como puedes apreciar abajo.

Read More