Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas
Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas

17 agosto 2010

Botón Oficial de Twitter.

Primero para obtener el botón que tenemos en el footer de las entradas, vamos a la pagina oficial de twitter
y vamos a los creditos y elegimos extras.
luego clickeamos en extras y llegamos a la pagina y seleccionamos boton de twittear.

luego elegimos el botón que queramos colocar en nuestro blog.

y al final de la pagina encontramos el codigo para colocarlo en el blog.

y llo podemos pegar en cualquiera de las siguentes lineas:
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
 y asi terminamos.

16 agosto 2010

Opción de responder comentario en blogger

 (Imagen del Balcón)
Gracias al ingenio de Jaime ahora podemos agregar la opción de responder comentarios que es una de muchas ventajas que tiene wordpress ahora en blogger.

para agregar el truco a nuestro blog primero vamos a Diseño>Edición de HTML>Expandimos Artilugios
buscamos el siguente codigo:

<data:commentPostedByMsg/>
dependiendo de donde queramos colocar el boton lo situamos a su izquierda o a su derecha:

<span class='blrespondrcmnt'><a title='Responder a este comentario' expr:href='&quot;https://www.blogger.com/comment.g?blogID=LA ID DE TU BLOG&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='http://img266.imageshack.us/img266/6619/respondercomen1.png'/></a></span>
 Cambiamos lo de color verde por la URL de la imagen que queremos que aparezca, y lo de color rojo
lo cambiamos por la ID de tu blog.

Problemas para Conseguir la ID de un Blog:
si tienes problemas para encontrar la id de tu blog, ve a Creación de Entradas, y en la URL
te debe aparecer algo asi:



luego de "blogID=" te apareceran unos numeros, esos numeros son la ID de tu blog.

Fuente/El Balcón de Jaime

21 julio 2010

Separar las Etiquetas en Dos Columnas

Cuando tienes muchas etiquetas y una barra laterar muy ancha puedes separar las etiquetas en dos columnas
facilmente con un codigo:)

Pasos a Seguir:

1. Entramos a Diseño>Edicion de HTML(Control + F para Buscar mas Rapido)
2. Buscamos  ]]></b:skin>  y justo antes de ese codigo pegamos:

#Label1 ul li{
float: left;
width: 45%
}
 y Asi tenemos el truco agregado en Nuestros blogs.

08 julio 2010

Cambiar el título por una imagen en blogger

Cambiar el titulo por una imagen en blogger. Esta entrada explicaremos como poner una imagen en ves del titulo de un blog.

Pasos a seguir:
1.- Ir a Diseño - Edición de HTML - Expandir plantillas de artilugios.
2.- Buscar (Ctrl+F) el siguiente codigo:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='MiBlog (cabecera)'
type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
3.- Sustituir lo que he marcado en color rojo por la imagen que nos guste, de esta forma:
<img src='http://mi-imagen.jpg'/>
Cambiar el http://mi-imagen.jpg por la URL de la imagen que querramos colocar en ves del titulo.

07 julio 2010

Efecto Sombra con CSS

Hoy Acabo de Encontrar un Magnifico Truco, Se Trata del Efecto Sombra en Cualquier Cosa,
El Efecto se Puede Usar en Los Títulos de la Sidebar y en Los Títulos de los Posts (Como el de Este Blog)
Para Añadirlo en Los Títulos de los Post Pegamos Justo Antes de ]]></b:skin> el Siguente Codigo:

 .post-title {
text-shadow: #a29d9d 0px -0px 5px;
}

O si lo quieres para los Titulos de la Sidebar Pega Justo Antes de ]]></b:skin> el Siguente Codigo:

 .sidebar h2 {
text-shadow: #a29d9d 0px -0px 5px;
}

y asi tenemos  los Titulos Con Sombra.

04 julio 2010

Efecto Lupa en las Imagenes de tu Blog

primero tenemos que tener la libreria jQuery, puede ser que la tengas en tu blog, si no es asi, vamos a
Diseño>Edición de HTML Buscamos </head> y lo Sustituimos por:

<script src='http://dl.dropbox.com/u/3373498/PazosBlogger/jQuery1.3.2.min.js' type='text/javascript'/><script src='http://dl.dropbox.com/u/3373498/PazosBlogger/imagelink.js' type='text/javascript'/></head>

(Tranquilo, Este Codigo no Sustituira el Head)

Luego buscamos ]]></b:skin> y Justo antes pegamos:

/* Lupa en imagenes */

.imageOver{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFfSjDLkitihUkDxtOi9JEGabKX-a9hD0IEEOu1jszmdQeIN172__CTfo2adRe5uBVPhVaHk-1kdEdJokEpZcrKAevYHYPIik_u65mHw2-42zNTjTBK90Z6s_EBF-F8l5xQnC66_29RC8/s320/zoom.gif) no-repeat 50% 50%;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

cambiamos lo de rojo por Nuestra Imagen.
Fuente/Pazos Blogger

Iconos de Redes Sociales Circulares


Este Paquete Contiene Iconos de Redes Sociales, Son 27 Iconos,
Tiene Diversos Tamaños: 128x128,64x64 y 32x32.
Enlaces: Iconos de Redes Sociales(.rar) Iconos de Redes Sociales(.zip)

02 julio 2010

Acerca del Autor en Blogger

Hace Tiempo en Ciudad Blogger, me Encontré con algo muy interesante, se trata de el acerca del autor de wordpress queviene al final de los post, donde puedes añadir un avatar
y una breve información de ti, ahora en blogger.

Primero Debemos ir a Diseño | Edición de HTML marcamos la casilla de Expandir Plantilla de Artilugios
y Buscamos El Siguiente Código:

<div class='post-footer'>

Justo Abajo de Esa Linea Pegamos:

<div class='acercadelautor'>
<img border='0' src='URL del avatar' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</div>

lo que Esta de Color Rojo lo cambiamos por la URL de nuestro Avatar, y lo Naranja por el Texto que
queremos Mostrar en la Descripción.
Para Una Mejor Explicación Entren Aqui.

30 junio 2010

Agregar un Favicon en Blogger

Un favicon es un icono representativo a su pagina, cada blog que se crea en blogger, tiene un
favicon, ese favicon lo podemos cambiar, el favicon de blogger, es este:

Podemos añadir nuestro favicon muy fácil, primero vamos a Diseño>Edición de HTML
y Buscamos el Siguiente Código:

<title><data:blog.pageTitle/></title>
Justo abajo de el código, pegamos este otro código:

<link href='URL DE NUESTRA IMAGEN .ICO' rel='shortcut icon'/>
Donde dice "URL DE NUESTRA IMAGEN .ICO" colocamos la url de nuestro icono aqui un link utíl para convertir una imagen en un icono.

29 junio 2010

Efectos Para la Navbar de Blogger


La Navbar de blogger, una molestia para muchas personas, es muy facíl ocutarla, si la queremos ocultar
Vamos a Diseño>Edición de HTML, Buscamos ]]></b:skin> Justo Antes de ]]></b:skin>
Pegamos el Siguente Codigo:

#navbar-iframe {
display:none;
}
 Otra Alternativa, Ocultarla y Cuando Pasamos el Puntero por Donde Estaba la Navbar, Vuelva a Aparecer
Como Por Arte de Magia, Para Usar Esa Forma, Vamos a Diseño>Edición de HTML, Buscamos
</head> Justo Antes de </head> Pegamos el Siguente Codigo:

<script src='http://www.google.com/jsapi'/><script>
google.load(&quot;prototype&quot;,   &quot;1.6.0.2&quot;);
google.load(&quot;scriptaculous&quot;,   &quot;1.8.1&quot;);
</script>
<script   type="text/javascript">
function navbarShow() {
new   Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
}
function   navbarHide() {
new Effect.Opacity('navbar-iframe', {duration:0.5,   from:1.0, to:0.0});
}
function navbarHack() {
Event.observe('navbar-iframe',   'mouseover', navbarShow, false);
Event.observe('navbar-iframe',   'mouseout', navbarHide, false);
navbarHide();
}
Event.observe(window,   'load', navbarHack, false);
</script>
 
  Eligen el efecto que mas les guste.