HISTAC
autor
  • email
  • facebook
  • twitter
  • rss
notificaciones
cerrar

19 julio 2014

Botones de compartir flotantes al hacer scroll


Botones de compartir flotantes al hacer scroll

En este tutorial os voy a mostrar una forma muy original de colocar los botones de compartir bajo cada entrada de tu blog.
El gadget es flotante y se ve elegante. En todas las entradas después de desplazarse el gadget se abrirá en la parte inferior de la pantalla. El gadget contiene tres botones sociales para compartir - Facebook, Twitter, Google+. Hay un apartado para cerrar dichos botones.

Este truco lo vi en Oloblogger pero lo he modificado y unido junto a una entrada que ya compartí hace tiempo Agregar botones para compartir en redes sociales

Una demostración en vivo se puede ver en mi propio blog. Simplemente desplácese hacia abajo hasta la sección de comentarios y aparecerá esta barra en acción. También puede cerrar haciendo clic en el apartado de cierre.
Una vez que haya visto la demo para añadir este gaddget en tu blog sólo tienes que seguir los siguientes pasos.


Agregar el script
1.- Ir a → Plantilla → Edición de HTML. Presione Ctrl + F y buscar </body> y pegue el siguiente código antes de ello:

<script type='text/javascript'>$(window).scroll(function(){ if($(document).scrollTop()&gt;=$(document).height()/5) {
$(&#39;#socialslide&#39;).show(&#39;slow&#39;);
} else {$(&#39;#socialslide&#39;).hide(&#39;slow&#39;);}
});
function closesocialslide(){
$(&#39;#socialslide&#39;).remove();
;}
</script>

Agregar los botones
2.- A continuación buscamos <div class='post-footer'> (!ojo normalmente existen 2!) pegue el siguiente código bajo el Segundo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#socialslide {display: none;overflow: hidden;position: fixed;bottom: 0px;left:0;width: 100%;margin: 0;padding: 0 0 28px;font-size: 18px;z-index: 100000;
background-color: rgba(128, 128, 128, 0.4); border-radius: 8px;box-shadow: inset 0 0 4px #fff;}
#socialslide a {position: absolute;top: 6px;right: 4px;color: #000;font-size: 20px;font-weight: bold;}
#socialslide &gt; a + div {text-align: center;margin: 0;padding: 10px;background: #ccc;color: #000;box-shadow: inset 0 0 4px #fff;}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import &quot;//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css&quot;;
#share-buttons{border-radius:5px;background:#FFF;width:495px;overflow:hidden;margin-left:130px;box-shadow:0 2px 3px rgba(71,71,71,0.31);padding:14px 7px}.share-button{background:#DCE0E0!important;position:relative;display:block;float:left;height:40px;overflow:hidden;width:150px;border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0 7px}.icon{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}.icon i{color:#fff;line-height:42px}.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin:0}.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}.share-button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.facebook iframe{display:block;position:absolute;right:6px;top:10px;z-index:1}.twitter iframe{width:90px!important;right:5px;top:10px;z-index:1;display:block;position:absolute}.google #___plusone_0{width:70px!important;top:10px;right:25px; position:absolute;display:block;z-index:1}.facebook:hover .slide{left:150px}.twitter:hover .slide{top:-40px}.google:hover .slide{bottom:-40px}.facebook .icon,.facebook .slide{background:#305c99}.twitter .icon,.twitter .slide{background:#00cdff}.google .icon,.google .slide{background:#d24228} </style>
<div id='socialslide' style='display: none;'>
<a href='javascript:void(0);' onclick='return closesocialslide();'>cerrar - X</a>
<div>&#191;No crees que esta entrada debe ser compartida?</div>
<div style='width: 800px; margin: 20px auto;'>
<div id='share-buttons'> <div class='facebook share-button'> <i class='icon'> <i class='icon-facebook'> </i> </i> <div class='slide'> <p> facebook </p> </div>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=true&amp;width=105&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:105px; height:20px'/>
</div> <div class='twitter share-button'> <i class='icon'> <i class='icon-twitter'> </i> </i> <div class='slide'> <p> twitter </p> </div> <a class='twitter-share-button' data-via='' href='https://twitter.com/share'> Tweet </a><script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
</script></div> <div class='google share-button'> <i class='icon'> <i class='icon-google-plus'> </i> </i> <div class='slide'> <p> google+ </p> </div> <div class='g-plusone' data-size='medium'> </div>
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;);
po.type = &#39;text/javascript&#39;;
po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0];
s.parentNode.insertBefore(po, s);
}
)();
</script></div>   </div></div></div></b:if>

Ahora ya puedes disfrutar de tus Botones de compartir flotantes


17 julio 2014

Menú vertical desplegable para blogger


menu vertical desplegable blogger

Tras un largo periodo de inactividad, vuelvo de nuevo con un menú vertical desplegable y totalmente responsive con subspestañas por lo que podremos agregar enlaces a cada sección del menú. Al ser responsive se adapta a cualquier anchura de la sidebar.


Para añadir este menú, siga los siguientes pasos:

1.Vaya a Escritorio de Blogger > Plantilla > Editar HTML > buscamos </head>
2. Y antes de ello colocamos el script para desplegar con el código siguiente:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function()
{
$("#amor p.menu-inicio").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings()
});
$("#secondpane p.menu-inicio").mouseover(function()
{
$(this).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings()
});
});
//]]>
</script>

3. Ahora entra en Diseño | Añadir un gadget | HTML/Javascript, y ahí pegas el siguiente código:

<style type="text/css">
.menu-inicio {color: #fff;margin: 2px 0 0 0; padding: 0;margin-top: 10px; background: #057ED5; display: block; border-radius: 4px; transition: all 0.5s ease;font-size: 14px; padding: 20px 0 10px 10px; border-radius: 4px; }
.menu-inicio a{color: #fff;}
.menu_body {width:100%;display:none;}
.menu_body a{background: #7CC6FA; display: block; padding: 10px 0 10px 10px; font-size: 14px; outline: 0; transition: all 0.5s ease; border-radius: 4px; line-height: 28px;color: #fff;}
.menu_body a:hover{
background: #057ED5; color: #fff; transition: all 0.5s ease; display: block; border-radius: 4px;}
</style>
<div class='menu-amor' id='amor'>
<p class='menu-inicio'><a href='URL del enlace'>INICIO</a></p>
<p class='menu-inicio'>Pestaña 1</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>
<p class='menu-inicio'>Pestaña 2</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>
<p class='menu-inicio'>Pestaña 3</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>
<p class='menu-inicio'>Pestaña 4</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div></div>

Ya sólo cambia el nombre de las pestañas, de las subpestañas, y agrega las URLs de los enlaces donde se indica.


01 julio 2014

Verano loco




Llega el veranito, la "caló" y los dimes y diretes de, sobre todo, prensa escrita. Fichajes estrellas que nunca se producen, salidas de los clubes que no llegan jamás y muchos más bulos para tener a los aficionados contentos, entretenidos y airados en momentos cortitos de noticias deportivas una vez que la "colorá" ha sembrado la verguenza por tierras sudamericanas.

Entre todo este embrollo veraniego se me presenta una operación que no me resulta sorpresiva por lo que se trata sino por las formas.
Hablamos de Perotti. No vamos a descubrir nada si decimos que el monito no ha tenido suerte en el Sevilla. Grandísimo jugador, con maneras de estrella de alto standing, elogiado por casi todos y con un sentimiento enfrentado con la afición, el cual nunca entendí. Se quedó con toda la banda para él después de la desaparición de Puerta y la venta de Capel a la liga portuguesa y ni por esas pudo aprovechar el momento, las lesiones y la animadversidad de los aficionados terminaron de hundir a Diego que trató de resurgir desde sus inicios volviendo a Argentina e intentando demostrar allá el fútbol que todavía le queda, pero no, de nuevo las lesiones y la poca confianza de todos, empezando por el propio jugador, devuelven al pibe a Nervión, en donde se le busca salida a la desesperada incluso perdiendo un dineral millonario. No sé que ha podido pasar en realidad con esta estrella rota pero sí le deseo a Diego Perotti que triunfe el tiempo que le quede de pelotéo y que consiga encontrar en Genova o dónde sea la estabilidad emocional que aquí le ha faltado.

Por otro lado perdemos a nuestro mayor valladar en estas últimas temporadas, Iván Rakitic. Se va con vitola de grande y con deseos de no fastidiar lo que ya había fastidiado tiempo atrás. No comulgo con un futbolista que estaba negociando su futuro a espaldas del Club, aun quedándole un año más de contrato, primero con el Atco. de Madrid y luego con el Barsa, desde hace varios meses. Hablamos incluso de precontratos firmados y palabras dadas. Es una pena que estemos tan faltos de liquidez y tengamos que rebajarnos ante situaciones como estas en las que lo más sensato sería aguantar al futbolista y como castigo tenerlo todo el año viendo el fútbol desde la grada del Pizjuán, prohibiéndole los entrenos con el primer equipo. Escarmiento generalizado sería, pero lógicamente la necesidad de sanéo económico no nos permite actuar a las duras y sí a las medio maduras.
Encima se autoflagela de pena en la despedida y se atreve a dejar la puerta abierta de una vuelta cuando ya lo tenga todo acabado....¡¡¡cómo si nosotros fuéramos un asilo Sr. Rakitic!!!....
Bueno. Se les acaban las vacaciones y ahora toca preparar la Supercopa de Europa, aquella misma que le ganamos por goleada a los culés con Antonio Puerta como estrella y la misma que perdimos contra el Milán sin Antonio Puerta entre nosotros. Se la debemos a nuestro eterno 16. Así ....que a por ella.


28 junio 2014

Reemplazar los links Entradas antiguas, Entradas mas recientes por el título de la entrada.


nuevo link por título

Hoy en día, hay una gran cantidad de plantillas que utilizan los links de Entradas antiguas y Entradas mas recientes personalizados en sus blogs y para ello existen una multitud de formas para llevarlos acabo, como ejemplo esta que nos ofreció El Potro con imágenes (Vease en Ciudad Blogger), o esta otra de Oloman (Vease en Oloblogger).

Hoy os traigo otra forma de mostrarlas y consiste en reemplazar el próximo post y el anterior con el título de la entrada.
Para los que lo quieran probar sigan las siguientes instrucciones:
1.-Copia de seguridad de la plantilla por si algo sale mal.

Ofrecido por Isabel de Mama quiero ser blogger

2.- Reemplazar todo el antiguo CSS de navegación, debéis buscar el código parecido a esto:

/* navegacion */
#blog-pager {...................}
#blog-pager a.home-link{........}
#blog-pager-newer-link, #blog-pager-older-link {.......}
#blog-pager-newer-link{.........}
#blog-pager-older-link{..........}
#blog-pager-newer-link a

Y lo reemplazamos por este otro:

.enlaces{margin-top:20px;padding:0;background:#e9e9e9}
.page-izq{width:50%;background:none;float:left;margin:0;padding-bottom:10px;text-align:left;color:#333;transition:all .3s ease-in-out;}
.page-dercho{width:50%;background:none;float:right;margin:0;padding-bottom:10px;text-align:right;color:#333;transition:all .3s ease-in-out}
.page-dercho:hover .pager-title-left,.page-izq:hover .pager-title-left{color:red!important}
.page-dercho a:hover,.page-izq a:hover{color:red!important;}
.page-izq a,.page-dercho a,.current-pageleft,.current-pageright{font-size:14px; font-family: 'Open Sans', Helvetica, Arial, sans-serif;font-weight:700;background:none;text-decoration:none}
.page-izq a,.page-dercho a{color:#333;}
.pager-title-left{font-family: 'Trebuchet MS', sans-serif;font-size:28px;text-transform:uppercase;font-weight:700;transition:all .3s ease-in-out}
.bpage-izq{margin:5px 10px 10px}
.bpage-dercho{margin:5px 10px 10px}
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
.blog-pager,#blog-pager{clear:both;text-align:center}
.feed-links{clear:both;line-height:2.5em}

3.- A continuación buscamos el siguiente código:

<b:includable id='nextprev'>
........
........
</b:includable>

Y sustituimos todo el código por este otro:

<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a>
</div>
<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><data:desktopLinkMsg/></a>
</div>
</div>
</b:if>
</b:if>
<div class='clear'/>
</b:includable>


4.- A continuación buscamos el siguiente código que suele estar bajo el anterior:

<b:includable id='post' var='post'>
........
........
</b:includable>

Y colocamos lo siguiente justo encima del cierre </b:includable>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='enlaces'>
<div class='blog-pager' id='blog-pager'>
<div class='page-izq'>
<div class='bpage-izq'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<span class='pager-title-left'>Anterior</span><br/>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171; siguiente</a>
</span>
<b:else/>
<span class='current-pageleft'><span class='pager-title-left'>Anterior</span><br/>Este es el post más reciente</span>
</b:if>
</div>
</div>
<div class='page-dercho'>
<div class='bpage-dercho'>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<span class='pager-title-left'>Próximo</span><br/>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>siguiente &#187;</a>
</span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>Próximo</span><br/>Este es el post más antiguo</span>
</b:if>
</div>
</div>
</div>
<div style='clear: both;'/>
</div>
</b:if>

5.- Por último colocamos el script antes del cierre </body>:

<script type='text/javascript'>
$(document).ready(function(){
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});
</script>


Después de eso, guarde la plantilla y vea los resultados en su blog. Buena suerte ....


13 junio 2014

Política de Fichajes





A estas alturas de año, con la liga ya terminada y con un Mundial en juego (de este y de Costa ya hablaremos en otro momento) son muchos los dimes y diretes en cuanto a fichajes estrellas, no tan estrellas y estrellados con los que los medios de comunicación, sobre todo escrito, nos acribillan, ilusionan y decepcionan según los casos y como lo tomemos cada uno.

Pues bien, a estas alturas de año y desde que terminó la temporada el Sr. Rakitic ha fichado por varios clubes europeos, ha pasado reconocimiento médico hace varias semanas con el Barcelona, con precontrato firmado, lo cual está prohibido y con declaraciones ciertas o falsas de ganas de irse a otros aires, a equipos champions, a equipos grandes.

Sea como sea no llego ni llegaré jamás a entender la postura de algunos clubes como en este caso nuestro Sevilla ante este tipo de casos. Comprensible es que nos hace falta liquidez y que la mejor manera de conseguirla es vendiendo lo que podemos, pero .... vendiendo bien y no malvendiendo o asustándonos por un posible rechazo de las negociaciones si pedimos lo que verdaderamente creemos justo. No es justo, no lo es, que el Barcelona nos de algo menos de 20 kilos más un jugador en progresión ¿? por el futbolista que más rendimiento ha tenido en la Liga española y que ahora asistamos impávidos a cómo el mismo equipo culé vende a Fábregas por treinta y tantos kilos sin despeinarse siquiera. Un futbolista, el catalán, que ha pasado por Camp Barsa con más pena que gloria, con más suplencia que titularidad y sin demasiados aspavientos a favor. Lo más significativo que este impresentable de Fábregas ha hecho desde que llegó a Barcelona fue un acto de racismo hacia nuestro querido Kanouté.
El Sevilla debería plantarse ante este tipo de situaciones, tenemos el as en nuestro lado de la mesa ¡¡vamos a saber jugarlo!!...A este Rakitic con aires de grandeza había que bajarle los humos de manera radical y si para ello tenemos que arriesgar y dejar al futbolista un año entero en la grada y sin opción tan siquiera de entrenar con el equipo pues adelante. Una vez hecho algo así, la lección vale para el resto de futbolistas y sus hermanísimos. Porque este es otro que ha venido de la mano de su hermano el listo, el que ha estudiado, el que busca lo mejor para su hermanito de forma que él se lo lleve calentito....¿verdad René?...¿verdad Sergio?.
Una sola temporada hemos disfrutado del fútbol arte de Rakitic, pienso que en Barcelona disfrutarán menos aun. Hemos criado una estrella para perderla a las primeras de cambio.
Otro que anda loco por cambiar de escudo es el canterano Moreno, otro que empieza rápido a besar escudos que ni siente. Otro que como demore mucho su fichaje por quien sea, nos entra el cangelo y malvendemos seguro.
Habrá que confiar en Palop y su fe de que si salen los buenos vendrán mejores. Así sea.