Poner un sistema de valoración propia

Ahora blogger nos ofrece un gadget para poder incorporar una valoración con estrellas en las entradas. Para habilitarlo vamos a Diseño-entradas del blog-editar y activamos la opción Mostrar la evaluación de estrellas

Algunas plantillas aún no tendrán esta opción así que tendremos que ir a Plantilla-editar html 

busca esta línea <b:include name='feedLinks'/>  y justo debajo pon esto

<b:if cond='data:top.showStars'>

<script src='//www.google.com/jsapi' type='text/javascript'/>

<script type='text/javascript'>

google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});

function initialize() {

google.annotations.setApplicationId(<data:top.blogspotReviews/>);

google.annotations.createAll();

google.annotations.fetch();

}

google.setOnLoadCallback(initialize);

</script>

</b:if>

Ahora buscamos esta línea <div class='post-footer'> y debajo ponemos esto

<span class='star-ratings'>

<b:if cond='data:top.showStars'>

<div expr:g:background-color='data:backgroundColor'

expr:g:text-color='data:textColor'

expr:g:url='data:post.absoluteUrl'

g:height='42'

g:type='RatingPanel'

g:width='180'>

</div> 

</b:if>

</span>

Y ya tendremos puesto el sistema de valoración por estrellas en nuestro blog.

Poner una imagen en la cabecera del blog

Cada vez hay más cosas para ir añadiendo a nuestro blog y personalizarlo a nuestro gusto y mejorarlo. Esta vez voy a dejar aqui como personalizar la cabecera poniendo una imagen.

Lo primero que tenemos que hacer es elegir la imagen que queremos poner, y adecuarla al tamaño que queremos que ocupe según el ancho de la cabecera, etc...

Luego vamos a Diseño-cabecera-editar

Se abrirá una ventana desde que la que tendremos que subir la imagen, bien desde nuestro ordenador o bien poniendo la URL de la misma. Es importante marcar el REDUCIR HASTA AJUSTAR para que la imagen quede perfecta.

Ahora dale a GUARDAR.

El siguiente paso es ajustar la imagen. Para ello nos vamos a Diseño de plantilla-avanzado-agregar CSS

Y añade esto: #header-inner img {margin: 0 auto;} en el cuadro blanco que te saldrá a la derecha. Y por último pincha en APLICAR AL BLOG

Y ya está, ahora tu imagen estará perfectamente colocada. Puedes cambiar el tamaño haciéndola más pequeña o más grande para que ocupe lo que tú quieras.poniendo en lugar del código anterior este: #header-inner img {width: 960px; height: 220px;}. 

Los números azules son los pixeles que quieres que mida la imagen: ancho 960 y alto 220. Tú pon los que tú quieras. Luego sólo tienes que dar a APLICAR AL BLOG.

En el caso de que quieras que la imagen no ocupe todo el espacio sustituyendo al título y la descripción, sino que vaya detrás de ellos, tienes que marcar esa opción.  

Marca también REDUCIR HASTA AJUSTAR y guarda los cambios.

Puede que quieras mover un poco el título y la descripción. Sólo tienes que ir  a Plantilla-personalizar-avanzado-agregar CSS y añadir este código en el cuadro: 

.header h1{margin: 10px 0 0 40px; }.header .description {margin:-20px 0 0 0;}

Ahora solo tienes que poner las medidas para que quede como tú quieres. El código se lee así:

.header h1{margin: 10px 0 0 40px; } Es el margen del título donde 10px es ariiba, 0 a la derecha, 0 abajo y 40px a la izquierda. 

.header .description {margin:-20px 0 0 0;}Este es el margen para la descripción y la lectura es como la del título.

Editar imágenes

Hoy os traigo dos sitios en donde de manera gratuita podéis editar las imágenes para poner en vuestro sitio. Las dos son de muy fácil manejo y merece la pena echarles un vistazo.

Picmonkey No necesitas descargar nada. Desde la web haces todo.

Canva. Muy similar a Picmonkey aunque algo más completa ya que tiene también plantillas para usar en textos.

Poner un botón en tus entradas para que puedan imprimirlas

Es una buena idea dar la opción a nuestros lectores de poder imprimir una entrada de nuestro blog. Y la forma de hacerlo puede parecer un poco complicada pero si seguís los pasos veréis que no lo es tanto.

En primer lugar tenemos que ir a Dieño-Editar HTML

Pulsamos y nos saldrá algo como esto:

Buscamos la etiqueta </head>  y antes del cierre

Ponemos este código:

<style media='print' type='text/css'>#header-wrapper,

#header, .header, #sidebar-wrapper, .sidebar, .post-footer, #footer-wrapper,

#footer, .date-header, #comments, .post-meta-data, .comment-link,

.comment-footer, #backlinks-container, #blog-pager,#navbar-section, .navbar,

.subscribe_notice, .noprint {display: none;}#main-wrapper {width:

95%; overflow: visible !important;}</style>

Y le damos a Guardar plantilla

Ahora sólo tenemos que añadir a cada entrada que queramos que se pueda imprimir y añadirle un código. Para eso, nos vamos a Entradas, Editar, HTML

Y al final del post le añadimos este código:

<b:if cond="data:blog.pageType == &quot;item&quot;">

<a href="javascript:window.print()">

<img alt="Imprimir" border="0" height="30" src="http://icons.iconarchive.com/icons/artua/dragon-soft/32/Printer-icon.png" style="float: left; margin: 0 1em 1em 0;" title="Imprimir" width="30" />

Imprimir el artículo</a>

</b:if>

Ahora pinchamos en Actualizar y ya está. Comprobamos que toda ha quedado bien...

Si vais aquí Qué comemos hoy? Ensalada de pasta, veréis que al final del post aparece la opción de imprimirlo.