RSS Feed
Twitter
Poner gadget`s para Chat o para dejar mensajes, opiniones y más desde tu blog.
Existen varios tipos de gadget para agregar una Chat en los blog`s pero aquí se mostraran los mejores y que podrían ser no tan conocidos por ti.
miércoles, 7 de julio de 2010
domingo, 4 de julio de 2010
Los mejores métodos de búsquedas para tu blog.
1.- Búsqueda interna en el blog a través de java script, no es atrayente pero se logra una buena búsqueda de entradas, por ejemplo cuando buscas algo aparecen todas las entradas relacionadas con lo que escribiste.
Para instalarlo en tu blog haz lo siguiente:
Desde tu Escritorio en Blogger vas a Diseño, ahí en Elementos de página clickeamos en añadir gadget, se abrirá una ventana y vamos a HTML/JavaScript, en el nombre ponemos en caso de que queramos dejarlo sin titulo o tan solo escribimos algo parecido a “buscar” o “buscador”, lo que tu quieras, y en contenido escribiremos esto:
<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form>
2.- Cuadro de Búsqueda, es sin duda la forma más simple de agregar un buscador al blog pero es lento para cargar no mucho pero algo algo, las entradas se demoran en actualizarse y no se muestra mucho pero sin embargo es bueno y accesible para cualquier persona, el resultado de las búsquedas aparecen abajo o al lado del gadget, aparte de las entradas a diferencia del anterior que dirige todo el blog a la búsqueda, este se queda en el mismo hasta que el usuario elija que entrada quiere.
Para agregarlo solo debes ir de tu Escritorio a Diseño, y desde ahí Agregar Gadget y desde la ventana que se abra buscar Cuadro de búsqueda.
3.- Busqueda a elección de usuario, se agrega de la misma forma que el primero solo que ha diferencia en el contenido se escribe lo siguiente:
<form action="http://www.google.com/search" method="GET">
<input value="UTF-8" name="ie" type="hidden"/>
<input value="UTF-8" name="oe" type="hidden"/>
<table bgcolor="#FFFFFF">
<a href="http://www.google.com/">
<img border="0" alt="Google" src="http://www.google.com/logos/Logo_25wht.gif"/>
</a>
<input maxlength="255" value=""
name="q" size="15" type="text"/> <input value="Buscar" name="btnG" type="submit"/>
<font size="-1">
<input value="URL DEL BLOG"
name="domains" type="hidden"/><br/><input value=""
name="sitesearch" type="radio"/> la Web<input checked value="URL DEL BLOG" name="sitesearch" type="radio"/> NOMBRE DEL BLOG<br/>
</font>
</table></form>
Reemplazamos las letras en color rojo por nuestros datos y listo, quedará algo así, luego el usuario elejira si no encuentra algo en tu blog, que lo busque en google.
4.-Búsqueda personalizada de google, además de blogger esta es otra exquisitez de las que nos podemos dar un gusto con solo tener una cuenta gmail, el servicio para ser entregado solo requiere de que tengas una cuenta gmail y blog por supuesto para realizar la búsqueda.
Para agregarlo a tu blog debes ingresar en Motor de búsqueda personalizada, click en Crear Motor de Búsqueda y escribir los datos solicitados. Luego te llegará un correo a tu gmail con el aviso y de donde sacar el código para que luego lo agregues yendo a (desde tu Escritorio) Diseño y luego añadir gadget luego seleccionar HTML/JavaScript y listo, si tienes complicaciones por no querer poner nombre al gadget escribe esto en el titulo
Si quieres una información mas extensa sobre de como incorporar una busqueda personalizada has click aquí
martes, 29 de junio de 2010
Sexy Drop Down Menu es un menú horizontal despegable hecho en CSS en el que podrás poner todos tus link`s y sin problema, recuerda que al ponerlo en tu blog este podría modificarse según el tipo de color usado en tu blog.
Para ver como quedara ve al blog de pruebas.
Advertencia: El menú podría tener problemas con el script que permite arrastrar imágenes del blog, si no lo tienes prosigue, si lo tienes y lo quieres conservar no sigas o se desactivará.
Para ponerlo debes ir desde tu Escritorio (blogger) a Diseño, luego Edición HTML y antes de ]]></b:skin> pega lo siguiente:
/* Sexy Drop Down Menu
----------------------------------------------- */
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 12px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXynPdAJwuMXByoQcA_1WPDERyasQfkcYf55JFB2kxuUwNjaiN8lsyuBSgIADfM5b0ORby60lE2RcI7rJp97DthmfiygOQuSOLF7jhFQv89EJiMT_iilpLu5kezolkC41MIBhgeS24oRQ/s320/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.topnav li a {
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit49lDDgIJhIBCzVFh6kIHEsBT9K1hZZx7UMFtploICr2r4kTkp1oq8Qaj7MC_i3B7puknAtAHuT996MFW5RjfrKZYXT6PdUrdVcGZCRIERjmMvWfdoDuihnpTng5r3Fg107LigK-t8zo/s320/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span {
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP-I3gsq1PeBbnKsl-dMhyTyEuwLYmDXTR9jWrri0z9ENsO3nzj1DyhksBlSNbEkwxOcKG0vLAX4UReFpBLHaOhatnpK_H2uhHWaveMKmd2_wZS66Um-pUViuHQk-q-BXMrq1NYr78hyphenhyphen0/s320/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {
background-position: center bottom;
cursor: pointer;
}
ul.topnav li ul.subnav {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li {
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqSP5qA4CgmH1S7icZG1CauFI9wM-KAKJ6MNWOZGJ5YK3lfUSKr7yiYxomDHG8A4h1XL81FkT2by76gOUpUxFuzXb5WnsmyHqL0bFmab_AYTRjZ2kmWBuX7fEwp4qjRkjB6D18q7XR7CA/s320/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover {
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqSP5qA4CgmH1S7icZG1CauFI9wM-KAKJ6MNWOZGJ5YK3lfUSKr7yiYxomDHG8A4h1XL81FkT2by76gOUpUxFuzXb5WnsmyHqL0bFmab_AYTRjZ2kmWBuX7fEwp4qjRkjB6D18q7XR7CA/s320/dropdown_linkbg.gif) no-repeat 10px center;
}
2. Luego buscamos </head> y arriba de ella pegamos el script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("ul.subnav").parent().append("<span/>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>
3. Luego vamos a “Elementos de pagina” y en añadir gadget HTML/Javascript ponemos esto:
<ul class="topnav">
<li><a href="URL del enlace">Pestaña1</a></li>
<li>
<a href="URL del enlace">Pestaña2</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
</ul>
</li>
<li>
<a href="URL del enlace">Pestaña 3</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 4</a></li>
<li><a href="URL del enlace">Pestaña 5</a></li></ul>
Ponlo debajo de la cabecera
Cambia las URL de los enlaces donde se indica.
Si quisieras agregar más pestañas sólo agrega antes de </ul> esta línea:
<li><a href="URL del enlace">Otra Pestaña</a></li>
Si quieres agregar sub pestañas entonces agrega esto:
<li>
<a href="URL del enlace">Otra Pestaña</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
</ul>
</li>
Y listo
domingo, 27 de junio de 2010
Para lograrlo sigue los siguientes pocos pasos:
1.- Entra en Diseño, luego Edición HTML, marca la casilla de Expandir Artilugios y busca la siguiente línea:
<data:description/>
2.- Ahora bórrala y sustitúyela por esto:
<script language='Javascript'>3.- Ahora solo te resta cambiar la frase del condigo anterior y listo!:
//<![CDATA[
<!--
function text() {
};
text = new text();
number = 0;
// textArray
text[number++] = "Descripción #1"
text[number++] = "Descripción #2"
text[number++] = "Descripción #3"
text[number++] = "Descripción #4"
increment = Math.floor(Math.random() * number);
document.write(text[increment]);
//-->
//]]>
</script>
text[number++] = "Descripción #1"
SE CAMBIA SOLO “Descripción #1”
Por ejemplo:
text[number++] = "CIRUJANO BLOGGER, UNA CIRUJIA PARA TU BLOG"
viernes, 25 de junio de 2010
Los mejores contadores de visitas para tu blog.
El servicio que entregan estos contadores es darte a conocer a ti y o al publico en general cuantas visitas llevas por día o durante todo el tiempo que lleva tu blog abierto a la gente.
Uno de los mejores y más potentes contadores que contienen analizador con gráficos de cuanto han subido o bajado tus visitas, con estadísticas, multitud de temas para tu contador de visitas o si lo quieres esconder que se invisible también es una opción, contador de click`s, tienes la posibilidad de agregar todos tus blog´s que quieras y mucho más. La pagina es http://www.histats.com/ . Lamentablemente es no recomendable para usuarios sin mucha experiencia ya que contiene demasiado accesorios y se podrían perder en tanta cosa. Otra cosa que complica es que aún la página no esta totalmente traducida al español.
Otro contador algo simple pero no por eso es malo es 99 Counters. Aunque contiene un nombre no muy interesante o atrayente sus contadores son bastantes lucidos por el lado físico de sus temas ya que son muy lindos. Contiene estadísticas de visitas por horas, días, mes, año, índice de visitas en el día y en total que se muestran en el gadget del blog y es visible para todo el publico. Existen muchos temas pero aparte tu puedes diseñar unos propios sin mayor conocimientos debido a la simplicidad. El contador hace una muestra de que países están conectados en el momento y todas las visitas que has tenido a lo largo de la vida de tu blog solo si es que pusiste el contador apenas se inicio. Para ingresar debes registrarte de forma bastante fácil, solo has click aquí.
Uno más nuevo, de google y gratuito es Google Analytics, el analizador de google que llega para aquellos que solo quieren saber cuantas visitas tienen, sin lucirse como en el caso de los anteriores que daban informes a todos publico de las visitas que tiene el blog, este a diferencia no tiene ese elemento. Para conocer Google Analytics click aquí.
Para agregar los gadget de buscadores primero debes registrarte, elegir un tema y luego ir a tu Escritorio de blogger, luego Diseño, y por ultimo Añadir gadget.*
jueves, 24 de junio de 2010
Si no te gusta ocupar mucho espacio en tus link`s esto te vendrá como anillo al dedo.
Se creará algo así:
Para poder crear un menú despegable te resultará muy sencillo ya que no hace falta una gran mente para hacerlo. Para realizarlo debes hacer lo siguiente:
1.- Vas a diseño
2.- Y luego clickeas en “Añadir un gadget”.
3.- Sleccionas HTML/Javascript 
y copia y pega esto:
<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" class="desplegable" name="menu" size="1">
<option selected/>Seleccionar...
<option value=""/>- - - - - - - - - -
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
</select>
4.- Solo cambias donde dice "URL de la página" y lo reemplazas por cualquier Link
Si quieres añadirle color entonces entra a Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
.desplegable {
background-color: #ccc;
color: #000;
}
En background-color puedes elegir el color de fondo del menú, y en color puedes escoger el color de las letras.
