No, no tenemos juegos aquí..!

jueves, 31 de julio de 2014

Poner marcadores sociales debajo de las entradas en Blogger (Shareaholic Slide jQuery)

AÑADIR BARRA DE REDES SOCIALES AL FINAL DE LAS ENTRADAS EN BLOGGER

Hoy les traigo este marcador social muy por cierto yo lo estoy utilizando sin más que decir el que lo quiera que se lo lleve comencemos:

Éste gadget cuenta, cada vez que alguna persona publica algo a través de la herramienta, el marcador lo pueden ver perfectamente en nuestro sitio al final de la entrada, puede verificar que sí, funciona...

Pues bien vamos a empezar, y lo primero sería (si no sabes de HTML, haz una copia de seguridad de la plantilla), entrar en el Editor de HTML y expandimos los artilugios..

Ahora bien, buscar lo siguiente:

]]></b:skin>

No se olviden de presionar CTRL + F para encontrar el código más rápido, ahora pegar el siguiente CSS antes del código que mencioné anteriormente.

div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}

 Hasta ahora vamos bien, lo siguiente sería buscar:


<div class='post-footer'>

Después del código encontrado pegar antes lo siguiente:

<!--Inicio de Social Bookmarks desde  http://blogginred.blogspot.com  -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shr_class shareaholic-show-on-load'>
</div>
<script type='text/javascript'>
var SHRSB_Settings = {&quot;shr_class&quot;:{&quot;src&quot;:&quot;http://www.shareaholic.com/media/css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:
&quot;5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39&quot;,
&quot;apikey&quot;:&quot;6ffe2cbf142c45bd4cd03b01ec46b8658&quot;,
&quot;localize&quot;:true,&quot;shortener&quot;:&quot;google&quot;,
&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,
&quot;twitter_template&quot;:&quot;Some titulo del post - http://goo.gl/dbqlx via @andreslozanoNH&quot;}};
</script>

<script type='text/javascript'>
(function() {
var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
})();
</script><a href=' http://blogginred.blogspot.com/2012/07/marcadores-sociales-shareaholic-slide.html ' target='_blank'>Marcadores Sociales</a></b:if>
<!-- Fin de Social Bookmarks desde http://blogginred.com -->

Y eso es todo amigos espero les guste no olviden comentar, compartir, dar like etc. por cierto lo que esta en color rojo arriba donde dice andreslozanoNH es mi twitter Pueden cambiarlo por el de ustedes !!

Hasta la próxima BloggeRs,

martes, 29 de julio de 2014

Cómo ver las contraseñas guardadas en Google Chrome

Hoy en un post muy útil para quién lo quiera les enseñaré como ver las contraseñas guardadas en cualquier equipo que tenga Google Chrome instalado es importante saber que la temática que usaremos será muy parecida a posts anteriores que hice sobre sacar contraseñas guardadas dentro de una página específica en el navegador (este cualquiera que sea).

Ver claves de Facebook

De esta para hacer lo que está en el título de este post haremos lo siguiente: 

1. Abrir Google Chrome luego escribiremos en la barra de direcciones lo siguiente:
chrome://settings/passwords

Allí nos saldrá una página así:

ver contraseñas en Google Crome guardadas

En esta opción Chrome nos dirá que contraseñas hay guardadas y a cuáles les han dado "nunca guardar" en este caso veré la única que tengo seleccionandola y dando click en mostrar:

ver claves de facebook guardadas

Al dar click allí pasará: 

- Que no nos pida contraseña de administrador de sistema para verlas, sí es así pues ¡YA ESTUVO! pdremos ver las Contraseñas guardadas.


Y listo allí veremos las contraseñas guardadas.



Es un post muy sencillo no tiene mayor dificultad espero le sirva a alguno de ustedes.

Hasta la próxima BloggeRs,

sábado, 26 de julio de 2014

Cómo aumentar (acelerar) o disminuir la velocidad de un vídeo con Camtasia Studio 8

Dedicando este post a la edición de vídeos enseñaré de forma sencilla como modificar la velocidad de un vídeo con Camtasia Studio en mi caso con la versión 8, no se necesita ir a otro lado del programa que nunca hemos visto todo lo haremos dentro de la misma línea del tiempo que nos ofrece Camtasia.

Subir o disminuir velocidad a un vídeo en camtasia Studio 8

Lo primero será logicamente pasar el vídeo a la línea de tiempo que ofrece camtasia en mi caso será así:

Ahora damos click derecho sobre lo que está en amarillo el vídeo y seleccionamos la parte que dice "CLIP SPEED":


Luego, nos saldrá una opción en un cuadro donde viene el porcentaje de velocidad del vídeo así:





Muy bien para disminuir toda la velocidad o aumentarla del vídeo sólo debemos modificar el valor de porcentaje (Encerrado en amarillo) teniendo en cuenta que el 100% por ciento es velocidad normal si se le baja al valor la velocidad disminuye y si se le sube esta sube yo la pondré en 300% para que vean como se recorta el vídeo:


Como se ve en la imagen anterior este se redujo demasiado pues está acelerado a un 300% al final sólo queda renderizar el vídeo y estuvo.

Es todo en este post...Saludos BloggeRs,

jueves, 24 de julio de 2014

Crear ventanas Pop Ups en blogger

Las ventanas pop ups son esas ventanitas que se abren aparte de un sitio web que estavamos viendo, y si tu quieres usar este tipo de ventana ya sea para poner publicidad, o un formulario, imágenes o textos, para esto sigue los siguientes pasos:


Primero deberás ir a diseño o plantilla > edición HTML y pega antes de </head> lo siguiente:

<!-- script pop up -->
<script LANGUAGE='JavaScript'>
function popUp(URL) {
day = new Date();
id = day.getTime();
eval(&quot;page&quot; + id + &quot; = window.open(URL, &#39;&quot; + id + &quot;&#39;, &#39;toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=400,left = 212,top = 184&#39;);&quot;);
}
</script>
<!-- fin script -->

Ahora en una entrada o elemento HTML/javascrip hay que poner lo siguiente:

<a href="javascript:popUp('URL del documento')">Abrir ventana PopUp</a>

Sólo cambia la URL del documento por la dirección donde tengas alojada la imagen el formulario o la página que se vaya a abrir en la ventana pop up.



También lo puedes hacer mediante un botón cambiando lo anterior por esto:


<form>
<input type=button value="Abrir ventana PopUp" onClick="javascript:popUp('URL del documento')">
</form>

                                                                 
O también con una imagen:

<a href="javascript:popUp('URL del documento')"><img src="URL de la imagen" /></a>

                                                                           

Espero que les sirva este sencillo post.. 

Hasta la próxima Bloggers,



lunes, 21 de julio de 2014

Agregar iconos CSS a tu blog [PacMan - Arbol- Vaso] hechos en puro CSS

El día de hoy quiero compartiles tres iconos hechos en CSS puro CSS se trata de tres figuritas muy sencillas las cuales son:

- Un vaso con agua
- Un arbol estilo navideño 
- Un Pacman 

Presentaré de forma simple los debidos códigos de cada figúra para quien la quiera.

Vaso con agua




El código respectivo de esta figura es: 

<style>
.mug_animate {
  box-shadow: 0 -3em 0 0 #0AF inset;
  height: 2.5em;
  position: relative;
  -moz-transition: all 1000ms linear 0s;
  -webkit-transition: all 1000ms linear 0s;
  -o-transition: all 1000ms linear 0s;
  -ms-transition: all 1000ms linear 0s;
  transition: all 1000ms linear 0s;
  width: 1.5em;
}
.mug_animate:after {
  border-color: #DDD transparent #DDD #DDD;
  border-image: none;
  border-radius: 0.75em 0 0 0.75em;
  border-style: solid none solid solid;
  border-width: 0.25em medium 0.25em 0.25em;
  content: "";
  height: 1.5em;
  left: -1em;
  position: absolute;
  top: 0.25em;
  width: 0.75em;
}
.mug_animate:before {
  border: 0.25em solid #DDD;
  border-radius: 0 0 0.2em 0.2em;
  content: "";
  height: 2.5em;
  left: -0.20em;
  position: absolute;
  top: -0.5em;
  width: 1.5em;
}
.mug_animate:hover {
  box-shadow: 0 0 0 0 #00F inset;
}
</style>
<div class="mug_animate"></div>

Arbol de navidad




EL código respectivo de esta figura en CSS es: 

<style>
.fir {
  box-shadow: 0em 0.9em 0 -0.8em #4D4,0em 1em 0 -0.8em #4D4,0em 1.1em 0 -0.8em #4D4,0em 1.2em 0 -0.8em #4D4;
  border-bottom: 1.7em solid #4D4;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  font-size: 20px;
  height: 0em;
  position: relative;
  width: 0em;
}
.fir:before {
  border-bottom: 1em solid #4D4;
  border-left: 0.7em solid transparent;
  border-right: 0.7em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.7em;
  position: absolute;
  top: -0.2em;
  width: 0em;
}
.fir::after {
  border-bottom: 0.7em solid #4D4;
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.5em;
  position: absolute;
  top: -0.5em;
  width: 0em;
}
</style>
<div class="fir"></div>

PacMan

 

El respectivo código para este Pacman en CSS es: 

 <style>
.pacman {
  background-image: -webkit-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -moz-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -o-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -ms-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  border-radius: 3em 3em 0 0;
  height: 1.5em;
  position: relative;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 3em;
}

.pacman:after {
  background-color: #EE0;
  border-radius: 0 0 3em 0;
  content: '';
  height: 1.5em;
  left: 0em;
  position: absolute;
  top: 1.45em;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 1.5em;
}
</style>

<div class="pacman"></div>

¿Cómo agrego esto a mi blog?

Para agregarlo es tan fácil como ir, si se trata de un Gadget vamos a Diseño | Añadir un gadget | HTML/JavaScript, allí pegamos el respectivo CSS.

Si lo que se quiere es poner en una entrada al visualizarlo este se verá no centrado sino ubicado al borde izquierdo así que en la primera parte del CSS de las llaves {} agregamos la propiedad:

margin-left:300px;

Tomando en cuenta que le decimos al código que nos corra el elemento 300 pixeles desde la izquierda para modificar la distancia editan la cifra en rojo.

Espero les guste este sencillo truco.

Hasta la próxima Bloggers,

viernes, 18 de julio de 2014

Cómo descargar - instalar WhatsApp a teléfono Firefox OS

Para quienes tienen un teléfono con Firefox OS como sistema operativo el caso de los alcatel y de los ZTE sabrán que la aplicación WhatsApp no está lanzado en este sistema de forma oficial sin embargo, existen dos aplicaciones que nos dejará instalar librerías similares a WhatsApp esto claro conectándonos con nuestros contactos de WhatsApp y así poder hablar.


Pero, la pregunta central es ¿Cómo instalar WhatsApp en un teléfono con Firefox OS? para lograrlo enseñaré una primera aplicación esta se llama "OpenWapp" para ir a la App directamente: CLICK AQUÍ

WHATSAPP PARA FIREFOX OS COMO INSTALAR 2014 TUTORIAL

Ahora la instalamos y la ejecutamos lo primero que nos saldrá será el registro del número de teléfono se verá así:

Instalar WhatsApp en Firefox OS

Reconfirmaremos el número de teléfono y nos llegará un código tal cuál como WhatsApp lo ingresamos:


Hecho lo anterior nos saldrá el apartadode PERFIL donde pondremos nombre y estado y damos en hecho:


Y bien ya estará listo WhatsApp al final sólo queda escribirle a nuestro contacto para ello dejo la prueba:

Como ven funciona perfectamente las características de este WhatsApp son básicamente las mismas:
 
- Los mismo emoticones.
- Se puede poner estados.
- Fotos de perfil.
- Enviar vídeos fotos ó música.
- Crear grupos.

SEGUNDA ALTERNATIVA 

 

Otra aplicación es LOQUI IM también es buena pero no se enfoca sólo en WhatsApp es multicuenta ya que en una sola aplicación administras tu cuenta de facebook, plus, nimbuzz entre otras.

Para habilitar WhatsApp sólo instalas la App luego en añadir cuentas vas a WhatsApp:

Luego país y número y más tarde el código por mensaje:

Al introducir el código se hace sin guión medio
Y tendremos lista la aplicación:

Ha sido todo en este post lo he detallado muy bien, de mi parte recomiendo la primera App para WhatsApp, pero, bueno libre elección espero les guste y tan pronto cuando WhatsApp se lance oficialmente será anunciado...

Hasta la próxima,

jueves, 17 de julio de 2014

Cómo hacer capturas de pantalla en BlackBerry 8520-9300-9320 etc.

Aunque este post suene muy simple y quizá muy ido por nombrar teléfonos como BlackBerry, no es nada del otro lado decir que aún hay muchas personas que por una u otra razón tienen un teléfono de esta marca y que muchos han intentado hacer caputras de pantalla con ellos, puede que para algunos sea fácil hacerlo, pero, para otros no tanto así que hoy detallaré una aplicaciónque nos ayudará con esta tarea de "Hacer captura de pantalla en BlackBerry":


Muy bien para lograrlo seguiremos una serie breve de pasos:

1. Desde nuestro teléfono vamos a App World y buscaremos la siguiente aplicación llamada "Screen Grabber" aunque les saldrá otras esta es laque recomiendo pues no deja marca de agua ni te pide que compres la versión completa para que te quite las marcas de agua:

captura hecha con Screen Grabber


2. Hecho este paso instalaremos la App y seguramente pedirá reiniciar el equipo :( , más tarde, sólo queda ver que tomar las capturas a lo que queramos ¿cómo? estando sobre el objetivo a capturar damos click en la tecla de BlackBerry y escogemos la opción que dice "Screen Grabber" y estuvo esta se almacena en nuestras imágenes:

Captura hecha con Screen Grabber
Es un tutorial muy corto pero se que a algún lector con BlackBerry le ha de servir...

Hasta la próxima,

lunes, 14 de julio de 2014

Anuncio o caja flotante que baja con el scroll del blog

ALGUNOS FRAGMENTOS TOMADOS GENTILMENTE DE CIUDAD BLOGGER

tomado de ciudad blogger
Agregar mensajes de alerta al blog a veces puede ser necesario para informar a nuestros lectores de algo importante, para ello hoy les enseñaré como agregar un anuncio tipo caja a nuestro blog que baja a medida que hacemos Scroll en nuestro sitio; en nuestro blog de juegos pueden ver un demo del truco: 

http://juegos.blogginred.com/

Muy bien para agregarlo iniciaremos con ir a Plantilla | Editar HTML y allí buscamos la etiqueta </head> arriba de ella pegaremos lo siguiente:

 <style type='text/css'>
#anuncio {
position: absolute;
border: 0px;
padding: 2px;
width: 300px;
height: 80px;
visibility: hidden;
z-index: 200;
top: 27px;
left: 13px;
}
</style>


<script type='text/javascript'>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>

Ahora buscamos </body> y arriba de ella pegamos este otro código:

<div id='anuncio'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='http://4.bp.blogspot.com/_dsEG33PDaHw/S66y-66sXXI/AAAAAAAAAOk/0GDe7kdQj4A/s200/icono-cerrar.png'/></a><br />
<a href='URL del enlace'><img src='URL de la imagen'/></a>
</div>

Para el mensaje en tipo imagen se reemplaza donde está en rojo "URL de la imagen y para el enlace que quiera llevar el link por lo que está en color azul sólo queda guardar y estuvo.

Si en vez de imagen se quiere colocar texto entonces en vez del código anterior usaremos este:

<div id='anuncio'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='http://4.bp.blogspot.com/_dsEG33PDaHw/S66y-66sXXI/AAAAAAAAAOk/0GDe7kdQj4A/s200/icono-cerrar.png'/></a><br />
<a href='URL del enlace'><div style='background:#ccc;color:#FFF;border:3px solid #000;padding:5px;text-align:center;font-size:14px;'>Aquí va el mensaje del anuncio</div></a>
</div>

En donde está el texto en verde irá el debido mensaje y en color naranja la URL si se desea que este lleve a algún lugar.

Básicamente esto seria todo sin embargo si dominas el CSS puedes hacer de este truco algo mejorado va a uso de cada uno, espero les sirva de algo.

Hasta la próxima,

sábado, 12 de julio de 2014

Poner entradas relacionadas con miniatura en blogger (I)

Bueno ya he estado unos días fuera sin escribir en mi blog, pero, ya he vuelto en el día de hoy les traigo un truco funcional aunque su instalación es fácil alguna veces puede dar lío pues todo varía según el código de la plantilla y se trata de poner las entradas relacionadas en nuestro blog un ejemplo de como se veria sería el siguiente:


Así que para agregar esto en nuestro blog primero vamos a Plantilla | Editar HTML y buscamos la etiqueta </head> antes de ella pegaremos lo siguiente:

<!-- Entradas relacionadas con miniatura Script y Estilo -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em; /*Tamaño de la letra*/
color: white; /*Color de la letra*/
font-family: Arial, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:white; /*Color letra sin pasar el mouse*/
transition: all 0.7s ease 0s;
}
#related-posts a:hover{
color:black; /*Color letra al pasar el mouse*/
}
#related-posts a:hover {
background-color:#d4eaf2; /*Color de fondo al pasar el mouse*/
border-radius:10px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=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[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}}}}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) {
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}
i++;
}
document.write('</div>');
}
//]]>
</script>
</b:if>
<!-- Entradas relacionadas con miniatura. Script y Estilo -->

Muy bien, hecho esto seguirá la parte más incómoda pues es la que varia según el código de su blog para que se visualice correctamente lo normal será ponerlo en el pie del post (post-footer) si ya hay algo allí recomiendo que se coloque debajo de esto para que se vea a lo último generalmente está línea va expresada así búsquenla:

<div class='post-footer-line post-footer-line-3'>

Si no les da entonces esta pero el proceso es igual:

<div class='post-footer'> 

Debajo de esta línea irá el siguiente código:


<!-- Entradas relacionadas con miniatura -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Posts relacionados&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Entradas relacionadas con miniatura -->

Y listo podría decir que ya estuvo todo es importante guardar lo cambios y visualizar directamente desde un post ya que desde una vista previa el script no se ejecuta en lo absoluto, si tienen duda alguna no olviden comentar. 

Hasta la próxima,

lunes, 7 de julio de 2014

Agrega menú deslizante arriba del blog

Hoy les traigo un interesante Menú muy elegante y ahorrador de espacio es deslizante e  incluye muchas ventajas pueden verlo en el demo:

http://bloggin-prueba.blogspot.com/

Aquí una imagen en breve resumen del menú:

Para agregar este menú en tu blog debes seguir los siguientes pasos:

Ve a diseño o plantilla y edición html y busca este código <head> y después de este código pega el siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
// Expand Panel
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});
// Collapse Panel
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

// Switch buttons from &quot;Abrir menú&quot; to &quot;Cerrar menú&quot; on click
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});
});</script>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #toppanel {display:none !important;}
</style>
</b:if>


Ahora agregarás los estilos CSS justo antes de ]]></b:skin>:


/* Top Sliding Menu----------------------------------------------- */

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.clearfix {display: inline-block;}

* html .clearfix {height: 1%;}

.clearfix {display: block;}

.clearfix {height: 1%;}

.clearfix {display: block;}

.tab {

background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjUtg1alI/AAAAAAAAAr4/irK6KNxvCHg/s1600/tab_b.png) repeat-x 0 0;

height: 42px;

position: relative;

top: 0;

z-index: 999;

}

.tab ul.login {

display: block;

position: relative;

float: right;

clear: right;

height: 42px;

width: auto;

font-weight: bold;

line-height: 42px;

margin: 0;

right: 150px;

color: white;

font-size: 80%;

text-align: center;

}

.tab ul.login li.left {

background: url(http://1.bp.blogspot.com/_dsEG33PDaHw/TUYjU8z7FWI/AAAAAAAAAr8/di0CWuFKxfo/s1600/tab_l.png) no-repeat left 0;

height: 42px;

width: 30px;

padding: 0;

margin: 0;

display: block;

float: left;

}

.tab ul.login li.right {

background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjVrN4yNI/AAAAAAAAAsE/4YOHQURWUHM/s1600/tab_r.png) no-repeat left 0;

height: 42px;

width: 30px;

padding: 0;

margin: 0;

display: block;

float: left;

}

.tab ul.login li {

text-align: left;

padding: 0 6px;

display: block;

float: left;

height: 42px;

background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TUYjVVpFpYI/AAAAAAAAAsA/EKlKa2rlic0/s1600/tab_m.png) repeat-x 0 0;

}

.tab ul.login li a {color: #15ADFF;}

.tab ul.login li a:hover {color: #FFFFFF;}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {

height: 20px;

line-height: 20px !important;

padding-left: 30px !important;

cursor: pointer;

display: block;

width: 100px;

position: relative;

top: 11px;

}

.tab a.open {background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjS1nMjqI/AAAAAAAAAro/5oD_cgvHwM4/s1600/bt_open.png) no-repeat left 0;}

.tab a.close {background: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TUYjSS2QXBI/AAAAAAAAArk/5KFg95ZWLts/s1600/bt_close.png) no-repeat left 0;}

.tab a:hover.open {background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjS1nMjqI/AAAAAAAAAro/5oD_cgvHwM4/s1600/bt_open.png) no-repeat left -19px;}

.tab a:hover.close {background: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TUYjSS2QXBI/AAAAAAAAArk/5KFg95ZWLts/s1600/bt_close.png) no-repeat left -19px;}

#toppanel {

position: absolute;

top: 0;

width: 100%;

z-index: 999;

text-align: center;

margin-left: auto;

margin-right: auto;

}

#panel {

width: 100%;

height: 270px; /* Alto del slide */

color: #999999;

background: #272727;

overflow: hidden;

position: relative;

z-index: 3;

display: none;

}

#panel h4 {

font-size: 1.6em;

padding: 5px 0 10px;

margin: 0;

color: #FFFFFF;

text-align: center;

}

#panel p {

margin: 5px 0;

padding: 0;

}
#panel a {

text-decoration: none;

color: #15ADFF;

}

#panel a:hover {

color: white;

}

#panel .content {

width: 960px;

margin: 0 auto;

padding-top: 15px;

text-align: left;

font-size: 0.85em;

}

#panel .content .left {

width: 280px;

float: left;

padding: 0 15px;

border-left: 1px solid #333;

}

#panel .content .right {

border-right: 1px solid #333;

}

#panel .content form {

margin: 0 0 10px 0;

}

#panel .content label {

float: left;

padding-top: 8px;

clear: both;

width: 280px;

display: block;

}

#panel .content input.field {

border: 1px #1A1A1A solid;

background: #414141;

margin-right: 5px;

margin-top: 4px;

width: 200px;

color: white;

height: 16px;

}

#panel .content input:focus.field {

background: #545454;

}

#panel .content input.bt_register {

display: block;

float: left;

clear: left;

height: 24px;

text-align: center;

cursor: pointer;

border: none;

font-weight: bold;

margin: 10px 0;

}

#panel .content input.bt_register {

width: 94px;

color: white;

background: transparent url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjTGOeO8I/AAAAAAAAArs/XQSFRPBtS3s/s1600/bt_register.png) no-repeat 0 0;

}

#slide-menu {

width: 160px;

float: left;

}

#slide-menu2 {

width: 160px;

float: right;

}

#slide-menu ul, #slide-menu2 ul{

font-family: Arial, Helvetica, sans-serif;

list-style-type:none;

margin:0;

padding:0;

}

#slide-menu ul li a, #slide-menu2 ul li a {

background:url(http://3.bp.blogspot.com/_dsEG33PDaHw/TUYjTjBCpAI/AAAAAAAAArw/rJgbMGEyjMU/s1600/bullet_blue.png) center left no-repeat;

margin:0;

padding:3px 3px 3px 18px;

}

#slide-menu li, #slide-menu2 li {display: inline;}

#slide-menu a, #slide-menu2 a{

color: #FFFFFF;

text-decoration: none;

font-size: 13px;

display: block;

padding: 3px;

width: 160px;

}

#slide-menu a:link, #slide-menu a:visited, #slide-menu2 a:link, #slide-menu2 a:visited {

color: #999;

text-decoration: none;

}

#slide-menu a:hover, #slide-menu2 a:hover {

color: #FFFFFF;

}
Y por último vas a colocar la estructura, justo después de <body> agrega lo siguiente:
<!-- Inicio top sliding menu -->

<div id='toppanel'>

<div id='panel'>

<div class='content clearfix'>

<!-- Primera sección -->

<div class='left' style='width:240px !important'>

<h4>Hola, Bienvenido a mi blog!</h4>

<p>Puedes seguirnos en las redes sociales o suscribirte al feed.</p>

<div align='center'>

<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'><img src='http://4.bp.blogspot.com/_dsEG33PDaHw/TUYmsIuunqI/AAAAAAAAAsc/KUuPv94Lwso/s1600/Feed_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://www.facebook.com/usuario'><img src='http://3.bp.blogspot.com/_dsEG33PDaHw/TUYmrpIzmHI/AAAAAAAAAsY/sG1ZCEfxvNY/s1600/FaceBook_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://twitter.com/usuario'><img src='http://2.bp.blogspot.com/_dsEG33PDaHw/TUYmseCsXMI/AAAAAAAAAsg/RN_5cSwxE8M/s1600/Twitter_.png' style='padding:25px 5px;' width='60'/></a>

</div>

</div>

<!-- Segunda sección -->

<div class='left' style='width:320px !important'>

<h4>Categorías</h4>

<div id='slide-menu'>

<ul>

<li><a href='URL del enlace'>Menu item uno</a></li>

<li><a href='URL del enlace'>Menu item dos</a></li>

<li><a href='URL del enlace'>Menu item tres</a></li>

<li><a href='URL del enlace'>Menu item cuatro</a></li>

<li><a href='URL del enlace'>Menu item cinco</a></li>

<li><a href='URL del enlace'>Menu item seis</a></li>

<li><a href='URL del enlace'>Menu item siete</a></li>

<li><a href='URL del enlace'>Menu item ocho</a></li>

<li><a href='URL del enlace'>Menu item nueve</a></li>

<li><a href='URL del enlace'>Menu item diez</a></li>

</ul>

</div>

<div id='slide-menu2'>

<ul>

<li><a href='URL del enlace'>Menu item uno</a></li>

<li><a href='URL del enlace'>Menu item dos</a></li>

<li><a href='URL del enlace'>Menu item tres</a></li>

<li><a href='URL del enlace'>Menu item cuatro</a></li>

<li><a href='URL del enlace'>Menu item cinco</a></li>

<li><a href='URL del enlace'>Menu item seis</a></li>

<li><a href='URL del enlace'>Menu item siete</a></li>

<li><a href='URL del enlace'>Menu item ocho</a></li>

<li><a href='URL del enlace'>Menu item nueve</a></li>

<li><a href='URL del enlace'>Menu item diez</a></li>

</ul>

</div>

</div>

<!-- Tercera sección -->

<div class='left right'>

<h4>&#161;Suscríbete a nuestro blog!</h4>

<p>Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.</p>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=Nombre-del-Feed' method='post' target='_blank'>

<input class='field' name='email' type='text/' value=''/>

<input name='uri' type='hidden' value='Nombre-del-Feed'/>

<input name='loc' type='hidden' value='es_ES'/>

<input class='bt_register' type='submit' value='Suscribir'/></form>

</div>

</div>

</div>

<div class='tab'>

<ul class='login'>

<li class='left'/>

<li>Hola invitado!</li>

<li class='sep'>|</li>

<li id='toggle'>

<a class='open' href='#' id='open'>Abrir menú</a>

<a class='close' href='#' id='close' style='display: none;'>Cerrar menú</a>

</li>

<li class='right'/>

</ul>

</div>

</div>

<!-- Fin top menú deslizante-->

Si usas una plantilla hecha a través del diseñador de plantillas entonces el código deberás pegarlo después de:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Ahora reemplazan para el texto las partes que dicen "MENU ITEM" y para los link lo que dice "URL DEL ENLACE"

sábado, 5 de julio de 2014

Subir - alojar scripts Blogger o estilos CSS en DrobBox

Aunque para este post siendo sincero en el tema no recomiendo de ha mucho que se alojen scripts en un servidor o hosting aparte pues esto demora un poco la carga del blog claro está el volumen y función del script, sin embargo esto aplica si se trata de Blogger ya que este brinda la posibilidad de alojarlos en la plantilla directamente, pero, todo va a comodidad y pensar de cada quien.


Así que hoy les enseñaré como subir, alojar o cargar archivos en DropBox paso a paso:

1. Lo primero y más lógico es tener una cuenta en DROPBOX.COM, de allí ingresaremos a nuestra cuenta de DropBox por el sitio web y no por la aplicación para Windows (esto para facilitar el proceso).

2. Hecho esto vamos al escritorio de DropBox en el navegador en mi caso se verá como está en la imagen, luego vamos a la carpeta "public":
Subir scripts a DropBox tutorial paso a paso

3. Allí en la carpeta será donde cargaremos el script o estilo CSS para cualquiera es el mismo proceso en mi caso lo explicaré con un Script el cuál nombré "PRUEBA.js", para subirlo damos click en la hojita con un más:


4. Seleccionamos el archivo común y corriente como cualquier otro después de que este suba daremos en "Hecho" y el archivo ya estará en DropBox, en la siguiente imagen resalté mi archivo y como ven tengo otros ya en uso:

5. Ahora damos clic sobre el archivo y nos saldrá una ventana con el código escrito, sin embargo necesitamos el enlace para ello en la parte superior está la opción compartir damos clic ahí:

6. Nos abrirá otra ventana que nos mostrará un cuadro en ese cuadro daremos clic en "Obtener enlace" luego de este tendremos un enlace de este tipo:


https://www.dropbox.com/s/8akd3vwjbxe15be/PRUEBA.js

MUCHA ATENCIÓN!.... Ahora ese enlace es el enlace público y que no ejecuta el script se vería así:

Para ponerlo como un Script en función y apto para usar en nuestro sitio cambiaremos las "www" por las letras "dl" quedando al final así:


https://dl.dropboxusercontent.com/s/8akd3vwjbxe15be/PRUEBA.js

Y este se visualizará de forma más simple el código en función listo para usar:

7. Para finalizar y que nuestro SCRIPT corra ya en nuestro plantilla queda citarlo con el siguiente código:


<script src='URL SCRIPT' type='text/javascript'/>


Si es para un .css utilizamos este método de relación:

<LINK href="URL CSS" rel="stylesheet" type="text/css">

Reemplazamos por la URL de función en el fragmento de código color azul y listo tenemos nuestro script o CSS citado.

Como dije antes esto funciona con varios tipos de archivos (Según su lenguaje) y el proceso es tal cual sin problema alguno, espero les sirva.

Hasta la próxima Bloggers,


viernes, 4 de julio de 2014

Saber cuantas personas están viendo mi blog en tiempo real - Contador de lectores on line

El saber cuantas personas están leyendo nuestro blog en tiempo real y simultaneamente es algo que nos ayuda a determinar un promedio de lectores a nuestro sitio, pero, para saber esto se necesita implementar un Script y agregarlo al blog, este Script cumpliendo como función:

- Contar en tiempo real cuántas personas están en el blog.
- Desde que países están leyendo el blog.
- Que posts están visitando en el momento y el promedio de tiempo.

Saber cuantas personas están viendo mi blog en tiempo real - Contador de lectores on line
Un ejemplo de este script gráficamente está en el Footer de este blog el cuál contabiliza quiénes están, para agregarlo usaré el sitio "Whos.amung.us" Sin embargo facilitaré el uso de los scripts para que no se confundan:

Para poner cualquiera de los contadores vamos Diseño | añadir un Gadget | HTML/JavaScript y pegan el código que elijan:

Contador Clásico:


CÓDIGO:
<script id="_wauwv3">var _wau = _wau || []; _wau.push(["classic", "fbbqzir033th", "wv3"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/classic.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

Contador pequeño: 


CÓDIGO:


<script id="_waur42">var _wau = _wau || []; _wau.push(["small", "fbbqzir033th", "r42"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/small.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>
Contador de pestaña: (Ubicado lateralmente izquierda o derecha)

CÓDIGO:

<script id="_wauxkv">var _wau = _wau || [];
_wau.push(["tab", "fbbqzir033th", "xkv", "left-middle"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/tab.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

<script id="_wau1xt">var _wau = _wau || [];
_wau.push(["tab", "fbbqzir033th", "1xt", "right-middle"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/tab.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

Contador-Mapa: 
CÓDIGO:

<script id="_wauhil">var _wau = _wau || [];
_wau.push(["map", "fbbqzir033th", "hil", "420", "210", "natural", "star-blue"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/map.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>
 
Como dije anteriormente algunos son más personalizables, como lo es el clásico que se puede cambiar de color y el mapa el cual habilita seleccionar otros mapas y la figurita que da el punto de ubicación esto en la web que di anteriormente.

Es todo por hoy, espero les sirva....

Hasta la próxima,

SÍGUENOS EN: