Bienvenido a VidaBlogger, un sitio dedicado a brindar Ayuda para Blogs.

Vas a poder encontrar trucos blogger, tutoriales y herramientas para blogs, aprenderás estrategias sobre SEO y posicionamiento web, y te daremos los mejores consejos para que lleves tu blog al máximo potencial!





30 abr. 2010

Como mostrar entradas destacas en nuestro blog

Como destacar entradas en Blogger

A los lectores les gusta encontrarse con un blog vistoso, con un diseño cuidado y con un logo interesante (ver como crear logos).

Pero además de esto, a los visitantes les interesa de sobre manera, que le "aconsejemos" entradas con lectura recomendada, es decir, entradas que nosotros destacamos o bien han sido votadas por otros usuarios como muy interesantes.

Para lograr el primer efecto, podemos llevar a cabo el siguiente truco:

Accedemos al Escritorio>Diseño>Edición de Html y antes de la etiqueta ]]></b:skin> copiamos el siguiente código:

#glidercontent{
margin:0px 0px 20px 10px;
font-family: 'Lucida sans unicode', tahoma, Verdana, Arial, Sans-Serif; /* Tipo de letra */
background:#ccc; /* Color de fondo */
-moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border: 1px solid #000; /* Color del borde */
}
.glidecontentwrapper{
position: relative;
width: 480px; /* Ancho */
height: 250px; /* Alto */
overflow: hidden;
padding:0;
margin:0;
}
.glidecontent{
position:absolute;
padding:20px 10px 0px 8px;
width:445px;
color:#fff; /* Color del texto */
background:#ccc; /* Color de fondo */
margin:0px 0px;
height: 250px;
overflow:hidden;
float:left;
}
.glidim{
float:left;
width:150px;
}
.glidim img{
margin:10px 5px 5px 10px;
padding:3px 3px;
background:#fff; /* Color de fondo de las imágenes */
}
.glidmeta h2{ /* Propiedades de los títulos */
margin:0px 0px 5px 0px;
font-size:20px;
font-weight:bold;
overflow:hidden;
height:27px;
}
.glidmeta h2 a:link, .glidmeta h2 a:visited{
text-decoration:none;
color:#fff; /* Color del texto del título */
}
.glidmeta{
float:right;
text-align:justify;
width:260px;
padding:0 10px 0px 5px;
margin:10px 0px 0 0;
color:#fff;
font-size:12px;
}
.gmore{ /* Propiedades del enlace Leer más */
float:right;
height:28px;
background:#585858;
width:75px;
line-height:30px;
padding-left:27px;
font-size:12px;
margin-top:5px;
}
.gmore a:link, .gmore a:visited{
color:#fff;
}
.gnav{
width: 100px;
height:50px;
z-index:150;
float:right;
padding-right:25px;
}
.glidecontenttoggler{
height:35px;
z-index:150;
width: 940px;
}
.glidecontenttoggler a{
display: -moz-inline-box;
display: inline-block;
color: #000;
font-weight: bold;
text-decoration: none;
}
.glidecontenttoggler a.selected{
background: #E4EFFA;
color: #000;
}
.glidecontenttoggler a:hover{
background: #E4EFFA;
color: #000;
}
.glidecontenttoggler a.toc{
}
.glidecontenttoggler a.prev{ /* Flecha izquierda */
top:5px;
right:42px;
position:absolute;
display:block;
background:url(http://2.bp.blogspot.com/_dsEG33PDaHw/S47Ce61OscI/AAAAAAAAANo/zjzEoN6jwP0/s400/left.png)no-repeat left;
height:29px;
width:40px;
}
.glidecontenttoggler a.next { /* Flecha derecha */
float:right;
display:block;
background:url(http://2.bp.blogspot.com/_dsEG33PDaHw/S47CfGWB-NI/AAAAAAAAANw/OynjKKmZtn8/s400/right.png)no-repeat right;
width:40px;
height:29px;
position:absolute;
top:5px;
right:15px;
}


Luego copiamos el código de este archivo antes de < /head > y también añadimos este código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Bien ahora buscamos estas lineas:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>

Debajo de estas lineas inserta este código:
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<script type='text/javascript'>
featuredcontentglider.init({
gliderid: &quot;glidercontent&quot;,
contentclass: &quot;glidecontent&quot;,
togglerid: &quot;togglebox&quot;,
remotecontent: &quot;&quot;,
selected: 1,
persiststate: true,
speed: 200,
direction: &quot;leftright&quot;,
autorotate: true,
autorotateconfig: [5000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>

<b:section class='glide' id='glide1' showaddelement='no'>
<b:widget id='HTML99' locked='true' title='Glider: Contenido destacado' type='HTML'/>
</b:section>
</b:if>
Guardas los cambios y vete a Elementos de Página, verás un nuevo gadget llamado glider. Edítalo añadiéndole este texto:

<div class="glidecontent">
<div class="glidim">
<a href="URL de la entrada"> <img src="URL de la imagen" width="100" height="100" /> </a>
</div>
<div class="glidmeta">

<h2><a href="URL de la entrada">Título de la entrada</a></h2>
...Aquí va el resumen de la entrada...

<div class="gmore">
<a href="URL de la entrada">Leer más</a>
</div>
</div>
</div>

Donde dice URL de la entrada, debes insertar la dirección html de la entrada que deseas destacar (algo así como http://www.tudominio.com/entrada.html)

¡Guardas y terminado! Es un poco laborioso, sin embargo los resultados logrados hacen que tu blog se diferencia del resto y tus lectores te lo agradezcan.

Incluso puede ser muy bien utilizado para fines comerciales, creas una entrada auspiciada y la destacas en el blog. Es solo una alternativa de unas cuantas que puedes utilizar para ayudar a monetizar tu blog.

Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)

Visto en Ciudad Blogger

0 comentarios :

Publicar un comentario

Lea las reglas:

Todos los comentarios serán leídos y moderados previamente.

Serán publicados aquellos comentarios que respeten las siguientes reglas:
- Su comentario debe estar relacionado al contenido del post.
- No se aceptan comentarios tipo SPAM.
- No incluya links No necesarios en el contenido de su comentario.
- Si quieres dejar la url de tu blog, hazlo utilizando la opción OpenID.
- La caja de comentarios no es el lugar para pedir intercambio de links (para ello ve a la página de contacto).
- Ofensan personales, amenazas o insultos NO serán permitidos.

OBS: Los comentarios de los lectores no reflejan las opiniones del blog.