Mostrando entradas con la etiqueta gadgets. Mostrar todas las entradas

Home gadgets

19 abril 2010

Añadir un recuadro de suscripcion al final de cada entrada

  Author : Unknown     6 comentarios
3:01

Un enlace de suscripcion en un blog, nunca esta demas, como lo dije ya antes en una anterior entrada, hoy te lo vuelvo a decir aqui. Hace mucho, observe en los grandes blogs, que casi todos tienen un enlace de suscripcion encerrado en un recuadro al final de cada entrada.

Jamas me pregunte como lo hicieron, me puse a trabajar en ellos hasta que logre hacer uno, que me quedo muy bonito, diria que mucho mejor a los que pude observar. Te mostrare como personalizar el codigo para que combine con los estilo de tu blog, este artilugio ira añadido al final de cada entrada es la pagina indivudual de cada una de ellas, si quieren ver una demostracion, pues ve a la pagina individual de esta entrada, y mirala.

[1] Los estilos CSS

#notas{
border: 1px dashed #33CC33;
padding: 15px;
text-align:center;
font-size:12px;
font-family: Comic Sans MS, Verdana;
}

.suscripcion {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimfQmgHJ-UUKKyTN5irTUyY1JNVMWdHZ-IBrtpdc2-DkGAQxs8gr1sMEnFtFmcc_eTsRiZ6VeXdQsNsu25kbusTCCEmCQ_pH3lf7cPQ87yCcODfQ4YwWLGajO_Luvs2cBhAZRduvtoTzQ/s1600/1271301025_rss.png) no-repeat center left;height:30px;
padding-left: 32px;
font-size:16px;
text-align:left;
}

Para entender el codigo


En Rojo: Es el grosor del borde.
En violeta: Es el color del borde.
En verde: Son las alineaciones de los textos (Center [Centrado], left [a la izquierda], right [a la derecha])
En Naranja: Es la fuente de la letra. Asegurate que si la cambiaras por una letra no determinada por Blogger, que el usuario posea esa letra en la memoria de su computador, de otra manera, no la reconocerá.
En Aquamarine: Es la imagen. Puedes sustituirla por la que tu quieras, como medida 32 x 32.

[2] El codigo HTML.

Publicado por
Leer completo

17 abril 2010

Agregar enlaces de suscripcion atractivos en tu sidebar

  Author : Unknown     1 comentario
3:01

Siempre lo he dicho y asi lo reiterare, los enlaces de suscripcion de un blog, nunca deben faltar en tu blog, si tienes por monton, siempre sera mucho mejor.


Que un usuario se suscriba a tu blog, es algo muy importante, tan importante como quemar tu feed en feedburner, mientras mas suscriptores tengas, mas pocisionamiento, ayuda a aumentar el pagerank de tu blog, y hacer que google te tome en cuenta a la hora de las busquedas, ya que hacer que un usuario se suscriba, demuestra a los robots cuan interesante y de calidad es el contenido publicado en tu blog.

Este widget, es igual al que ves en la imagen, pero esa es solo una previsualizacion de su apariencia, para verlo funcionando puedes visitar este blog de pruebas.

[1] Entra a Blogger > Diseño > Edicion HTML
[2] Buscar la etiqueta </head>
[3] Justo antes de esta, pegar el siguiente codigo

<style type='text/css'>

#hsection{border:4px solid #D3D3D3;background-color:#e9e9e9;}
#hsection:hover{border:4px solid #BABABA;background-color:#e9e9e9;}

#sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;
font-weight:bold; }

#sectionmy .sectionmy2 h2.rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxnR6GupmgJiWUbMlhYskmf1pjXZTZWPoCz1mL278xM-RCdf6k3mwWShsT-H2di30bBtTpS9LvK5uxq7UzXyYubHsHub-1V4N0XVU_wXfESxgZjZY30Vi8EitarV1GYkBkqXRxOydm5nWJ/) no-repeat top left; }

#sectionmy .sectionmy2 h2.email { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJuk5GKB8n9VIa9UhnoeQ8wwtrcfQugtq2vXT1bpdD_8ghwiELJyKzs3xmMixedI36HdkzYQXk8QIJ-kSOtANHdihEipgg6G3RLs9UnnpErkwq57_S7KxxFHxN8IJCPHjfLmRo9F8JtmWv/) no-repeat top left; }

#sectionmy .sectionmy2 h2.twitter { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmD-Gln6ZmlUwwpSHKTg5_ucrFPYuyc_osHldFTu-MTxkkdWyNbHe5IvbQBqbQgHPyjMS4l_7Zjy2agRzDaRrpWiyJoDH5BV_MMMfMtX5co7vgKfcHp_eawTT3aa4fjBKvHohpEk0WW9fA/) no-repeat top left; }

#sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }

</style>

En VERDE: Es el grosor del borde
En NARANJA: Es el color del borde del recuadro
En VIOLETA: Es el color de fondo del recuadro
En AZUL: Es el color al que cambia el borde al color el mouse sobre el recuadro
En ROJO: Son las imagenes, puedes sustituirlas por las tuyas si quieres.

[4] Añade un nuevo gadget HTML/Javascript y pega el siguiente codigo.

Publicado por
Leer completo

27 marzo 2010

Facebook para Desarrolladores: Herramientas para tu blog

  Author : Unknown     No hay comentarios
9:44

Facebook es la mas grande red social en el mundo, con mas de 400 millones de usuarios activos y crece cada día mas. Por eso, asegúrate de usar estos widget de Facebook para que la gente interactue entre tu pagina y la red social. No hace mucho publique como aumentar el trafico a tu blog desde Facebook, que de algun modo podria tener relacion con esta entrada, quizas tambien te interese.


Puedes utilizar estas herramientas para compartir fácilmente información de perfil de ciertos sitios web, blogs y negocios con la comunidad de Facebook.

Widget Personales


Crear una insignia de perfil de Facebook para compartir información sobre ti en tu blog, así los usuarios de tu sitio te conocerán un poco mas, y les permitirá tener mas conexión con el webmaster del sitio el cual están visitando.

Este widget permite crear una insignia de fotos para compartirlas en tu sitio web o blog. Debes elegir entre vertical, horizontal, o diseño de dos columnas, así como elegir el numero de fotografías que deseas mostrar.

Muestra las actividades en tu blog de las paginas en la cual tu eres fan o miembro.

Widget para Compartir tu blog


Este es un widget ofrecido por Facebook que les permitirá a tus lectores compartir el contenido de tu blog en la red social. No hace mucho publique un post sobre esto, pero no ofrecido por Facebook, si no por FBshare, un widget para compartir contenido en Facebook

Publicado por
Leer completo

14 marzo 2010

SonoWebs: Lector de noticias para los posts de tu blog

  Author : Unknown     No hay comentarios
0:23

SonoWebs en como VozMe una herramienta que permite a los usuarios que entran cada día a tu blog escuchar las noticias por alguna discapacidad o simplemente por que es un olgazan, por medio de una voz que va leyendo palabra por palabra las post de tu blog, por eso es importante que si vas a agregar esta herramienta, escribas tus post muy bien, ya que, alguna palabra mal escrita, el reproductor así la presentara e interpretara.


Esta herramientas es tanto para Blogger como para Wordpress, asi como dije, al igual que la herramienta VozMe para agregarle voz a tus entradas, la diferencia y la ventaja, es que SonoWebs te permite escuchar la voz en tu misma pagina, dependiendo del widget que uses, pero VozMe sea cual sea el widget siempre te redirige a su pagina oficial.


A continuación, te presentare algunos de los widget que puedes usar, y que puedes configurar en SonoWebs: Plugin para Blogger, si eres usuarios de Wordpress, también hay una pagina especifica para esta plataforma, SonoWebs: Plugin para Wordpress. Aquí no llega todo, afortunadamente, si eres cliente de alguna empresa que te ofrezca direcciones de formato .php tambien hay oportunidad para ti en SonoWebs: Codigos php. Ahora si, dado todos los links, te invito a disfrutar de los tipos de widget que ofrece para la plataforma Blogger.


1er widget : De una manera muy elegante, SonoWebs te ofrece un modo de insertar su herramienta en su web, con unos pequeños reproductores, el cual recomiendo, por que me parece el mejor y mas adecuado, viene en varios colores, para que lo combines con los temas de tu blog, estos widget son la única forma de hacer que los post se escuchen en la misma pagina, sin redirigirte a otra, he aquí la imagen de muestra.



2do Widget : El segundo no tiene nada en común con el primero, a mi parecer. El segundo se trata como unos especies de botones, los cuales añadirás a cada post de tu blog, y que te redirigirá a la pagina oficial de sonowebs. Aquí te dejo la imagen.

Publicado por
Leer completo

24 febrero 2010

No se ve el Gadget de Seguidores: Solucion Definitiva

  Author : Unknown     12 comentarios
9:22


Desde hace ya mucho tiempo mi gadget de seguidores venia sin funcionar, y este problemas es muy usual, y se que a muchas personas les ocurre esto, trayendo como consecuencia que los usuarios que desean seguir al blog que esta visitando, se le haga imposible hacerlo, por no tener la posibilidad de ver este gadget introducido en el blog...


Ayer, buscando solucionar este problema, entre a la pagina de Google Friend Connect a ver si podia hallar una solucion alli, y efectivamente asi fue, la halle... No es nada complicado, solo debes seguir un pequeño procedimiento y yo lo explicare con mucha atencion y esperando que quedes satisfecho con el tutorial

Entonces, que debemos hacer...

Entra a la pagina oficial de Google Friend Connect, inicias la sesion con tu cuenta google, si ya has iniciado antes no te preocupes, reconocera tu cuenta al instante.

En la pagina, habra una barra lateral o sidebar al lado izquierdo de la pantalla. alli te saldran todos tu blog, creados con la cuenta google que estas utilizando en ese momento.

Obviamente, selecciona el blog que tiene el problema con el gadget e inmediatamente abrira la siguiente pagina en donde debes seguir el proximo paso.


Como ya dije, abrira la siguiente pagina, en la que te mostrara varios botones como el siguiente, y haras click en el boton que dice "Examinar la galeria de Gadgets"


Luego de esto, aparecera la galeria de gadgets, haras click en Todos los Gadgets para que nos muestre el gadget que necesitamos.

No es obligado que usemos el gadget que necesitamos, pero si quieres que el gadget luzca como la primera imagen de este post tendras que seguir los pasos...

De otro modo, tienes el derecho de elejir el gadget que quieras, hay mucha variedad de gadget muy bonitos que podrian combinar con tu blog.

Publicado por
Leer completo

11 febrero 2010

Colocar varios widgets en una sola sección

  Author : Unknown     12 comentarios
17:02

Si piensas que los widgets uno debajo de otro te ocupa mucho espacio en el blog, y quieres que esto no suceda, hoy te traigo esta solucion... Con tan solo el uso de unos cuantos codigos HTML en tu blog, puedes hacer que varios widgets se muestren en una sola seccion, separadas por pestañas y que no es necesario que al hacer click en una pestaña. la pagina carge completamente, ya que esto es ligero, y sera todo muy rapido...

PASO 1

Dirigete a tu blog de blogger, entra a la pestaña Diseño > Edicion de HTML y busca la etiqueta </head>

Ahora, antes del codigo que acabas de buscar, colocaras el siguiente codigo, luego de colcarlo haz click en GUARDAR PLANTILLA

<link href='http://pmsc.free.fr/CSS02/10211205155.css' rel='stylesheet' type='text/css'/>

<script src='http://pmsc.free.fr/J02/10211205224.js' type='text/javascript'>

</script>

PASO 2

Ahora dirigete hasta Elementos de la pagina, crea un nuevo widget en la parte donde quieres que aparezca el widget de pestañas elijiendo HTML/Javascript

PASO 3

Te tengo tres modelos, puedes verlos en funcionamiento haciendo click aqui

  • Modelo 1

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">Pestaña 1</a></li>
<li><a href="#" rel="dog2">Pestaña 2</a></li>
<li><a href="#" rel="dog3">Pestaña 3</a></li>
<li><a href="#" rel="dog4" id="myfavorite">Pestaña 4</a></li>
</ul>
<br style="clear: left" />
</div>

<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

<div id="dog1" class="tabcontent">
Contenido de las pestaña 1 aqui<br />
</div>

<div id="dog2" class="tabcontent">
Contenido de las pestaña 2 aqui<br />
</div>

<div id="dog3" class="tabcontent">
Contenido de las pestaña 3 aqui<br />
</div>

<div id="dog4" class="tabcontent">
Contenido de las pestaña 4 aqui<br />
</div>

</div>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>

<!--
document.write(unescape("%3Ca%20href%3D%22http%3A//frikibloggeo.com.ar/%22%20target%3D%22_blank%22%3E%3Cspan%20style%3D%22font-size%3A%20x-small%3B%22%3EFriki%20bloggeo%3C/span%3E%3C/a%3E"));
//-->
  • Modelo 2

Publicado por
Leer completo

05 febrero 2010

Mostrar los widgets solo en una pagina especifica

  Author : Unknown     6 comentarios
22:09

Cuando activamos cualquier artilugio en nuestro blog, por defecto, estos atyilugios seran mostrados en la pagina principal, paginas estaticas y hasta en las pagina por etiquetas, pero a veces queremos mostrar widget que solo aparezcan en paginas individuales de nuestros post o quizas solo en la pagina de inicio, los codigos son bastantes simple, tenemos la necesidad de modificar los artilugios en la Edicion HTML de nuestro blog.


Sigue estos pasos:

Crea un widget, colocalo donde quieres que aparezca y guarda los cambios en tu blog. Recuerda dale titulo al artilugio...

Ahora ve a la Edicion HTML de tu blog, expande las plantillas de artilugios, y ahora debemos buscar por el titulo que le pusiste al widget usando el metodo Crtl F...

Sera algo como esto:

<b:widget id='HTML3' locked='false' title='TITULO AQUI' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Agregale los siguientes codigos solo para mostrar en la pagina de inicio:

Publicado por
Leer completo

04 septiembre 2009

Expandir y contraer cualquier gadget

  Author : Unknown     2 comentarios
23:45

Una vez que incluimos uno de estos gadget, en la parte de "Edición HTML" de nuestro panel yexpandiendo las plantillas de artilugios, podemos ver que la estructura de cualquiera de los gadgets añadidos es muy similar, en algunos casos idéntica o parecida a esta:


<b:widget id='Text1' locked='false' title='Bienvenidos' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Para aplicar este script en cualquiera de estos gadget, solo tendremos que fijarnos bien en que parte hemos de añadir las piezas de código que componen el script y que, en todos los casos, es el mismo código (el resaltado en negrita):

Publicado por
Leer completo

13 agosto 2009

Gadgets De Google...

  Author : Unknown     No hay comentarios
15:17

Fecha hora dia y mes
Gadgets powered by Google

Google GADGETS. Infinidad de recursos para tus paginas, tan simple como copiar el codigo y pegarlo en tu sitio. Totalmente gratuitos y personalizables.
Noticias, el tiempo, herramientas, juegos, ,,,, mas de 9000 gadgets de todo tipo.

Publicado por
Leer completo

31 julio 2009

mapas y relojes

  Author : Unknown     No hay comentarios
22:54

Este es un MAPA-RELOJ.
Se configura con la hora del blog y se puede comparar con las distintas zonas horarias del Planeta.
Como el original es muy grande, puedes acortar las dimensiones: ancho y alto (width- heigth).

Publicado por
Leer completo
Suscribirse a: Entradas ( Atom )