Colocar un mensaje flotante en tu blog

Yo mismo use esta tira flotante en mi blog durante un mes. Tiene muchas utilidades, por ejemplo en mi blog de [un blog que ya no existe :P] lo uso para incentivar a la gente para que se suscriba via RSS. El tutorial de como hacerlo lo encontre en esta web pero esta en ingles asi que lo coloco traducido aqui.

Paso 1– Se bajan la ultima version de jquery de aqui y la renombran a jquery.js
Paso 2– Colocan el archivo jquery.js en la carpeta del theme de su blog
Paso 3– Abren el archivo header.php y despues de la etiqueta colocan el siguiente codigo:

<script src="<?php bloginfo('template_url'); ?>/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	jQuery(document).ready(function($){
	$(window).scroll(function(){
  		$('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
	});

	$('#close_message').click(function(){
		$('#message_box').animate({ top:"+=15px",opacity:0 }, "slow");
	});
		jQuery(function(){
			jQuery('ul.sf-menu').superfish();
		});
	});
</script>


Paso 4– Abren el archivo style.css y al final agregan el siguiente codigo:

#message_box {
position: absolute;
top: 0; left: 0;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
font-weight:bold;
width:99%;
}

Paso 5– Abren de nuevo el archivo header.php y justo despues de la etiqueta escriban:

<div id="message_box">
    <img id="close_message" style="float:right;cursor:pointer" src="cualquierimagen.png" />
Aqui va cualquier mensaje que quieran.
</div>

Eso es todo, no es dificil realmente. Lo divertido es lo que pongan en el paso 5. Podrian usarlo por ejemplo para poner enlaces a su cuenta de twitter, facebook, etc. O poner mensajes divertidos. Y si saben algo de programacion podrian hacer que los mensajes sean dinamicos.

Tambien deben tener en cuenta que si su theme por X motivo ya usa jquery deben saltearse el paso 1, 2 y tambien la primer linea del 3.
Espero que les sirva saludos

perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.
guest
5 Comments
Inline Feedbacks
View all comments
eVeR

gracias por haberlo sacado a ese mensaje, era realmente molesto. Sobre todo al hacer scroll en la página

[…] Colocar un mensaje flotante en tu blog […]

Julmer Olivero

Perro, como recomendacion te aconsejo que coloques demos de este tipo de tutoriales para saber el efecto que se logra con la aplicacion de este… por otro lado te agradezco por el tutorial esta muy bueno… =)

Anonymous

Muchas gracias por la recomendacion. En realidad estaba usando esto en este blog y otro pero luego lo saque porque me aburrio :P 

Sarzena

Muchas gracias, me resulto muy util.