Bancos de Imágenes

Con Googe imágenes, además de seguramente usar imágenes repetidas cogemos el riesgo de - poder estar infringiendo derechos de autor 
 y por lo tanto buscando problemas.

Os dejo 3 enlaces de bancos de imágenes bastante buenos :


Stockvault

Unsplash

Morguefile

Caja de buscar que funcione!!!

Esta es una de ellas

solo hay que ir:

Diseño - Elementos de página - Añadir gadget - Html

Y pegar este código:

<style> #wc-searchsimplebox1
{
padding:10px;
width:280px;
} #wc-searchsimplesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
} #wc-searchsimpleinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
width:170px;
font:14px verdana;
} </style>
<div id='wc-searchsimple1'>
<form name='input' action='http://vuestra url blog/search' method='get' id="wc-searchsimplebox1">
<input name='q' id='wc-searchsimpleinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='wc-searchsimplesubmit1' type='submit' value='Search'/>
</form>
</div>

Ahora reemplazáis lo rosa por la dirección de vuestro blog y hecho, funcionando.

Botón Pinterest sobre todas imágenes

Estoy segura de que habéis visto en otras páginas ( y en esta ) que al pasar el ratón sobre una imagen aparece el botón de Pinterest.
Para conseguir este efecto es muy fácil.

Primero ir a Plantilla y hacer copia de seguridad ( siempre es bueno respaldarnos )

Ahora vamos a Editar HTML

Pulsamos Crtl + F para buscar la línea que queremos:

Buscamos :

</body> 

Y pegamos justo antes ( podéis ver en la imagen ) el código.

El Código :

<!-- Botón de Pinterest superpuesto a cada imagen por cortesía de iniciaBlog.com --><!-- codigo origen: http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html -->    <script>//<![CDATA[var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd4hmV-0ctMmI0udVA35XeUPKEHKMVjdgV0EQlKjc_ePPvtRL-p0aY1FiUPD2Z5Wd9pU6V_imCn6SeJDCed9CQSz2JrGSVQy0rSJS2lenYYNYpkjhThJUN1bTw1Kx2hJGkeCp-5vE4FTbk/s1600/pinterestx1_72.png";var bs_pinButtonPos = "topright";var bs_pinPrefix = "";var bs_pinSuffix = "";//]]></script><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script><script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>// This Pinterest Hover Button is brought to you by bloggersentral.com.// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.// Feel free to use and share, but please keep this notice intact.</script><!-- Fin del código del botón de pinterest superpuesto en cada imagen del blog -->

Por defecto, el icono de Pinterest se muestra en el extremo superior derecho de la imagen, si quieres cambiar esta posición, debes cambiar el valor de la variable.

Vuelve al editor, justo al fragmento de código que hemos insertado

Cambia la variable "topright";  ( en el código os la dejo marcada en rosa )

• topleft  (extremo superior izquierdo)
• bottomleft (extremo inferior izquierdo)
• bottomright (extremo inferior derecho)
• topright (extremo superior derecho, por defecto)
• center (centro)

También, se puede cambiar el icono de Pinterest. Donde está la variable - bs_pinButtonURL - cambiamos la dirección de la imagen. (marcada en verde )

* 

Buscáis una imagen que os guste en Google imágenes y la subís a una web de alojamiento como por ejemplo:

tinypic.com

Escogéis la dirección donde pone : Enlace directo para presentaciones

os dejo un ejemplo que podéis utilizar :

http://i61.tinypic.com/2dsemg9.png

Guarda tu plantilla y visualiza el blog usando el botón Ver blog situado en la parte superior del propio editor. De esta forma mantienes el editor abierto por si quieres incorporar alguno de los siguientes cambios.

Iconos triangulares

Una entrega más de botones sociales, estos bastante bonitos ara incorporar a plantillas de fondo blanco.

Es un copia y pega.

Diseño - Elementos de página - Añadir gadget - Html

 <center><a href="URL DE TU FEED" target="_blank" title="Feed"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4KThqMHocmjIHamFTPP-O5GcsBIkW5y1I3XKPlytGJ1CnR5ZaP-noD0LON9Syx7-ZypUmSH2tfhXp3_aB3iSRblCkNY1sc6GkNlE-ZXoKM7l86qhbsS8PYLQmBJ3odmmfJ4D51VJNjkFA/s1600/RSS_78x75.png" style="margin-right: 2px;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=NOMBRE DE TU BLOG&amp;loc=en_ES" rel="nofollow" target="_blank" title="Sigueme Via Email"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhgCUXGi1trFA6nD8jviDA4RRn4wYZ3S5BfKGuIDXoQuewjp8__cpqUJU6g2A9J8wEhVpl-BSxx823jntEO4KPQKFNOmpZikgAcT9vXa-4JSt1JNhg4TTpA1Q7s4TnSFs18BfO01BthdVj/s1600/Email_78x75.png" style="margin-right: 2px;" /></a><a href="URL DE TU PAGINA EN FACEBOOK" rel="nofollow" target="_blank" title="Sigueme en Facebook"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqtWiNHstCNyRb5J85mvvPeO82gWnGTbg4ikzyH-eb5m20Ck9ThNvHVt_bbFMxZ0eB8kTtX0JERruzCKpD1ptL2scKC-djHiD2t2D13_PBKNuS6ge2F2Gc4KO4fYbS0C7IzIiSJyrjT82V/s1600/Facebook_78x75.png" style="margin-right: 2px;" /></a><a href="URL DE TU TWITER" rel="nofollow" target="_blank" title="Sigueme en Twitter"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyisJE7wjvJmZ9Bd4smUeXcxJw-SbybZwqQhjl2HlPM_aDyayThZf8N9uXjhAewx4jTyyQX68iTcV9BOOLufoUopNWxsBgtvywRqlZVrsPceW7yS5qSrbUmlY89D4wr6PEWyWL7_VEsSeL/s1600/Twitter_78x75.png" style="margin-right: 2px;" /></a><a href="URL DE TU GOOGLE+" rel="nofollow" target="_blank" title="Sigueme en Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjOl9EleYC_uO25STRyc0BsW7ictMRXZD2cbncmmCcyqCvPRxtsqpuEEy5tpfXMDkmmDUdEthYJvJXrBlY96gMD8Oe9fBvHl2K6oTDmkwLzIhah3kEv-oRL-XZ05mbaz9YIr_08lPU2y8G/s1600/Google+_78x75.png" style="margin-right: 2px;" /></a><a href="URL PINTEREST" rel="nofollow" target="_blank" title="Pinterest"><img alt="Follow Me on Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_A7Wm7-qV2V00ay8waRRaedBLBuGhEFLE2PCb6y_RghsZPUWJ-hcyFLGGkLkhyUcKGGLKGQdhNVAuQG5uTjQ43P6bPgU0u_OMXmbzkFFeGmfe5DttioIyeVzneYh7hlR2nsjLTZfTXfAM/s1600/Pinterest_78x75.png" style="margin-right: 2px;" /></a><a href="URL DE TU CANAL DE YOUTUBE" rel="nofollow" target="_blank" title="You Tube"><img alt="YouTube" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLiev89P0_WEFgcumbq3sIDi8SY_f2_iDaQuDkD0gKPBwwMq8PaeiChn4Sev7CAcScaDWvir-D1M0EOu8u52lKeZ7CoFVaj28RAMUdxPzazpU1WOTl0N1swezn-KG7oegTs_wlvaLg9P-V/s320/YouTube_78x75.png" style="margin-right: 2px;" /></a></center>

Reemplazar lo está en rosa por lo que corresponda.
Guardar y listo.

Botonera redes sociales para compartir posts

Se pueden cambiar los iconos de redes sociales para compartir, de las entradas, por otros más vistosos.

Lo primero que tenéis que hacer es ir a

Diseño - Elementos de página - Editar (entradas blog)

y retirar la marca en mostrar botones sociales.

Desmarcamos la opción de botones sociales :

Guardamos, y tenemos la primera parte hecha.
Ahora tenemos que poner la otra botonera.

Primero vamos a Plantilla - Editar Html

Hacemos una copia de seguridad, como siempre que tengamos que tocar la plantilla.

Ahora le damos al mismo tiempo a Ctrl + F para abrir el buscador dentro de la plantilla.

Buscamos la siguiente línea y ponemos debajo el código:

  <div class='post-footer-line post-footer-line-1'>

o si queremos colocar los botones al inicio del post :

  <div class='post-header-line-1'/>

Código:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dcddcb73e3ba0d2"></script>
<!-- AddThis Button END -->

Si prefieres eses otros:

Código:

<!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style "><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dcde18b394a19ad"></script><!-- AddThis Button END -->

Guardar y listo :)

Caja de subscripcion redes sociales con efecto zoom

Imagen de http://www.miltrucosblogger.info

Estéticamente es muy bonita y como los demás trucos, muy sencillo de lograr.

 Diseño - Elementos de página - Añadir gadget - Html

Pegar el siguiente código :

 <div class="separator" style="clear: both; text-align: center;"> <a class="hovergallery" href="URL de tu cuenta de Facebook" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuONithzqpnpQEkcguY1cG0PEqwN_QmVnZ9-WtDSB5VDYD5r9Lmy0-PG9mHjPYRLIoksecXmBv2NmeBfxpXq5NsPvJf771XCO2mPC1h3uE2RsWKYQ7gitF3mP4YIx-yzGuz0HoOtjKdIY/s1600/redes+sociales+1.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Twiiter" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaBkEJ6qvJXPAExby4GRRweVuZSqw-snG_s48awy_hRJMNFrnEMiadEKAcR_mb6jFRwDpKZbKoZnVnrsLGadLs5OEKjGU3jYplDIpB-efS3RwdDclEIJTQTWkYXG_XLaHdXma-MkdHzgQ/s1600/redes+sociales+002.png" /></a><a class="hovergallery" href="URL de tu cuenta de Youtube" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdYNANaHBC0WlurBLG4xu75vIKGeGZXkhEjzjWipm39SAIbSHUUbExIU6O0agBe8uiljB-gr9ZsQQozQ6LefAyeJHTljYA9YSDTPjIoKSJT3Bz6HNrYEXyDap-xnuc1xE5QYKsPINw3nk/s1600/redes+sociales+003.png" /></a> <a class="hovergallery" href="URL de tu RSS FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiajBLE3_YLKvhyphenhyphentMfaT4gtEFVt9k3SZPDm4R9c7hx-cDh38DqyN0SZZW083cCEg44C0RgIn1JuqgPTr2Ox_VXVPu-dBbjggAMhgU1uhgSTnQe1np9280DvcJoMBTvaMwkLlyvNgkMk-Rg/s1600/redes+sociales+004.png" /></a><a class="hovergallery" href="mailto:TU CORREO ELECTRÓNICO:mailto" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFVcbKdNtYMTMRNzKsX4Zu4fX774N7rAakfIyjF2xig42Z_uAO4pBg-bvyrFwH8_JYSaxp6JNKywwAmHe9t_kCOsDaSgRKqs7EzZDbWKF8neg915jqNDpvOCEdAEaUmrta062kiONMItI/s1600/redes+sociales+005.png" /></a></div><style type="text/css">.hovergallery img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;opacity: 0.7;margin: 0 1px 5px 0;}.hovergallery img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);opacity: 1;}</style>

Ahora solo tenéis que reemplazar lo que está en azul por vuestros datos y guardar.
Espero que os guste :)

Botones de Twitter y Facebook flotantes

Botones de Twitter y Facebook flotantes

Como dice el nombre, son botones que quedan flotando  -  en lateral derecho del blog.
( en mi caso cambié el código, lo explico más abajo)

  

Solamente hay que ir a Diseño - Elementos de página - Añadir gadget - Html y pegar el siguiente código:

 <a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="URL DE TU TWITTER"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc82VW8TUH5L3-s6uGzurW60x-0YH1wgCv2llUT3FBpiP7wMKFmxL_tK3ZRiadv1Jhz6KaW8MoW30iVSiTb6RumZIfCKj8XeaEIYMZPiHg_Lgv9ACT5xT9GAgn7W4cDMUI6_zaQiZxe2M/s1600/twitter2.png" /></a>
<a style="display:scroll;position:fixed;bottom:200px;right:0px;" href="URL DE TU FACEBOOK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Z7vQF35nzt4tmI9xWtHxX78kAdnCY_Hx13bbBvn2c9qTkU3Fc56XIXbW8l7RRbk9s5qUXqYrwQy1MONxGxpipGqszt6AG033q8KS-lxYIzo58rC6yHoxKX0EnpkTVCOsyFVW6mrzfJw/s1600/faceboook.png" /></a>

Recordar reemplazar por vuestra URL de Twitter y Facebook

También podéis hacer que aparezca del lado izquierdo del blog, solo tenéis que cambiar la palabra right ( aparece en verde) por left.