facebook google twitter tumblr instagram linkedin

Subscribe & Follow

  • Inicio
  • Sobre Mí
  • Indice de Entradas
    • Category
    • Category
    • Category
  • Aviso Legal y Terminos de Uso
  • Contacto
  • #

BLOGS FMG

BARRA FLOTANTES CON MARCADORES DE LAS PRINCIPALES REDES SOCIALES.



 

Este Gadget nos instala una barra flotante con marcadores de las principales Redes Sociales en el lateral del blog.


 Planeta Blogger nos ofrece en esta oportunidad un Gadget que nos creará una atractiva barra con los botones de las Redes Sociales en un costado lateral de nuestro blog, con lo que ahorramos espacio y será del agrado de los visitantes.


La instalación es muy facil y rapida. Nos vamos a Diseño / Añadir un Gadget / HTML/JavaScript:


Un Clic en “Diseño ”                               



2-Clic en “Añadir un gadget”                                    



3-Busca el widget que dice “HTML-Javascript” y ábrelo                       



4-Coloca el siguiente codigo en el interior







Despues de haber insertado el código, un clic en  "Guardar"



Con lo que ahorramos espacio 


<!--SideBar Floating Share Buttons Code Start-->
<style>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>
<br/><div style="clear: both;font-size: 9px;text-align:center;">
<a href="http://www.bloggingtipsnow.com/2012/02/floating-sharing-button-with-stumble.html" target="blank"><font color="black">[Get This]<font></font></font></a></div>
</div>












Guardamos.





Por defecto biene a la derecha;

Para ponerlo a la parte  izquierda, solamente cambiar lo que está en color  Rojo por la palabra; 

Para ponerlo a la parte derecha, solamente cambiar lo que está en color  Rojo por la palabra; 


right: Derecha

left:  Izquierda




Fecha de la Publicación; 16-11-2020

 Fuente; elplanetablogger

 Publicado por;                                                         







                                        








noviembre 16, 2020 No comentarios

PÁGINA DE BIENVENIDA


julio 20, 2020 No comentarios






ANUNCIO FLOTANTE QUE BAJA CON LA PÁGINA
""Blog FMG"


Ahora veremos cómo poner un anuncio flotante también con opción de cerrar pero este anuncio baja cuando se baja la página, es decir, bajará junto con el scroll de la página.
Puedes ver un ejemplo en este blog de pruebas, verás un anuncio arriba, baja la página y notarás el efecto.

Para ponerlo en tu blog entra a Plantilla | Edición de HTML y antes de </head> pega lo siguiente:





<style type='text/css'>
#anuncio {
position: absolute;
border: 0px;
padding: 2px;
width: 300px;
height: 80px;
visibility: hidden;
z-index: 200;
top: 27px;
left: 13px;
}
</style>


<script type='text/javascript'>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>

Ahora antes de </body> pega esto:





<div id='anuncio'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWJl34tgaadOYanH1yRYmb_2KWTXQUpa63IcnhwuSo_0zf1O1BWWXMKbipCLAPcn4msTSPGJ8p8tcoc9cCemO762Wqr9s3uc7ytIHwKgTBYp_M8bmdn2o-sauZHJjjlcTsFM9UEPcdBKc/s200/icono-cerrar.png'/></a><br />
<a href='URL del enlace'><img src='URL de la imagen'/></a>
</div>

Cambia donde se indica la URL de la imagen que será el aviso, al igual que la URL del enlace que es a donde llevará el vínculo cuando se haga click sobre el anuncio.
Igualmente cambia donde dice width: 300px; por el ancho de la imagen, y height: 80px; por el alto de la imagen.

Si en vez de una imagen quisieras agregar un texto entonces usa este código en lugar del anterior:




<div id='anuncio'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWJl34tgaadOYanH1yRYmb_2KWTXQUpa63IcnhwuSo_0zf1O1BWWXMKbipCLAPcn4msTSPGJ8p8tcoc9cCemO762Wqr9s3uc7ytIHwKgTBYp_M8bmdn2o-sauZHJjjlcTsFM9UEPcdBKc/s200/icono-cerrar.png'/></a><br />
<a href='URL del enlace'><div style='background:#ccc;color:#FFF;border:3px solid #000;padding:5px;text-align:center;font-size:14px;'>Aquí va el mensaje del anuncio</div></a>
</div>



Data de la Publicación;12-07-2020

 Fuente; ciudadblogger

 Publicado por;                                                         































julio 12, 2020 No comentarios





AMPLIAR UNA IMAGEN CON UN CLICK DE MOUSE
"BLOGS FMG"

Aquí nuestro querido amigo, seguidor de Blogger Código, me ha pedido un código responsable de agrandar una imagen pequeña con tan solo pasar el ratón por encima de la imagen, entonces no tarde mucho en crear este post, querido amigo y el resto de los queridos espero que os resulte útil este código.


Es muy sencillo el código y la utilización del mismo, tan solo debes personalizarlo a tu gusto.
Cambiar la URL de la imagen (en su tamaño normal).
El primer width y height es el tamaño que queremos que sea la imagen una vez agrandada, al pasar el cursor, width es el ancho y height es el alto.
Los width y height que están en color verde son el ancho y alto de la imagen en tamaño pequeño, como quedaría antes de agrandar la imagen (antes de pasar el cursor por encima).. espero que te sirva amigo. Lo más sencillo que te puedo recomendar es esto amigo.




img src="URL de la imagen" onmouseover="this.width=400;this.height=300;" onmouseout="this.width=100;this.height=80;" width="100" height="80" />




<img src="URL DE LA IMAGEN" onmouseover="this.width=500;this.height=400;" onmouseout="this.width=200;this.height=150;" width="200" height="150" />

aqui les dejo otro diferente para hacer click o doble click


<img onclick="javascript:this.width=500;this.height=400 " ondblclick="javascript:this.width=100;this.height= 80" src="URL de la imagen" width="100"/>



tambien se puede combinar con el de antes



<img src="URL DE LA IMAGEN" onclick="this.width=500;this.height=400;" onmouseout="this.width=200;this.height=150;" width="200" height="150" />



Data de la Publicación; 12-07-2020
Publicado por;                                                       






julio 12, 2020 No comentarios

Nº18-2- BANNERS BLOG IMÁGENES DE MIS PAGINAS 18 (300 X 300)-Woodcutter Storm





Mis Banners ...Bienvenidos a esta Página donde están todas las Imágenes de mis Banners de diferentes Medidas y Modelo de Letra Por ejemplo si este es el Titulo de la entrada: INº18-2- BANNERS BLOG IMÁGENES DE MIS PAGINAS 18 (300 X 300)-Woodcutter Storm, Lo primero son las medidas del Banner y (400 X 300) y lo siguiente el Nombre de la Fuente: (Woodcutter Storm) lo pongo por si os gusta la fuente sepáis el Nombre para Buscarla,..

























































Data de la Publicación; 15-03-2020

Publicado por; 




marzo 15, 2020 No comentarios
Newer Posts
Otros Posts

About me

Acerca de mí

Hola Amigos lectores, voy a describiros en rasgos cortos Quien soy realmente, porque cuando entras en una página piensas como será el menda que está detrás del tinglado.


Empecemos me llamo Francisco Martinez Gich natural de Canet de Mar "Barcelona" estoy retirado hace bastante tiempo, para recuperar un poco el tiempo empecé a montar un Blog en blogger después otro y otro hasta la cantidad de "53" blogs, diréis tú estás loco y yo os diré que si porque vosotros no sabéis el trabajo que conlleva todo esto y más si quieres ser un poco regular.

Etiquetas

  • .featured
  • banner
  • Blog
  • featured
  • Imagen
  • truco
  • video

recent posts

Blog Archive

  • ▼  2020 (8)
    • ▼  noviembre (1)
      • BARRA FLOTANTES CON MARCADORES DE LAS PRINCIPALES ...
    • ►  julio (3)
      • PÁGINA DE BIENVENIDA
      • ANUNCIO FLOTANTE QUE BAJA CON LA PÁGINA
      • AMPLIAR UNA IMAGEN CON UN CLICK DE MOUSE
    • ►  marzo (4)
      • Nº18-2- BANNERS BLOG IMÁGENES DE MIS PAGINAS 18 (3...

Buscar este blog

Con la tecnología de Blogger.

Entradas Populares

    AMPLIAR UNA IMAGEN CON UN CLICK DE MOUSE AMPLIAR UNA IMAGEN CON UN CLICK DE MOUSE
    Nº18-2- BANNERS BLOG IMÁGENES DE MIS PAGINAS 18 (300 X 300)-Woodcutter Storm Nº18-2- BANNERS BLOG IMÁGENES DE MIS PAGINAS 18 (300 X 300)-Woodcutter Storm
    ANUNCIO FLOTANTE QUE BAJA CON LA PÁGINA ANUNCIO FLOTANTE QUE BAJA CON LA PÁGINA
    BARRA FLOTANTES CON MARCADORES DE LAS PRINCIPALES REDES SOCIALES BARRA FLOTANTES CON MARCADORES DE LAS PRINCIPALES REDES SOCIALES
    ABRIR LOS VIDEOS EN BLOGGER EN UNA VENTANA EMERGENTE (POPUP ABRIR LOS VIDEOS EN BLOGGER EN UNA VENTANA EMERGENTE (POPUP
    Nº18-1-IMÁGENES BANNERS BLOG  DE MIS PAGINAS 18 300 X 200-Woodcutter Storm Nº18-1-IMÁGENES BANNERS BLOG DE MIS PAGINAS 18 300 X 200-Woodcutter Storm
  • Página principal

Mis Blogs

Blog Almacen Kiradober ALMACEN BLOGS FMG BLOGS FMG  BLOGS KIRADOBER BLOGS FAMAG TECLEANDO PARA TI 2019 TOP IMAGEN ÚNICA BLOG IMAGEN ZERO CARATULAS DISCOGRAFÍCAS KIRADOBER CRONICA MUSICAL NEGRA DISCOGRAFÍAS COMPLETAS KIKO EL MUNDO DE KIKO  EL PORTAL 00 EL RINCON OSCURO DE KIRADOBER ESCAPARATE DIGITAL 2019 FAMAG KIRADOBER  FMG TUTORIALES PARA BLOGGER  GADGETS KIRADOBERMAN HISTORIA DE UN PUEBLO HISTORIAS MUSICALES IMAGEN ÚNICA TOP LA PAGINA DE FEANCISCO LA PAGINA DE KIKO DE BLOGGER LA PAGINA DE LOS WIDGETS MARQUESINAS FAMAG MARQUESINAS KIRADOBER mi espacio digital cero PLANTILLAS KIRADOBER  NUBE DIGITAL KIRADOBER PLANTILLAS PARA BLOGGER FAMAG PRUEBAS INICIALES RED MUNDO MUSICAL  REDLLENANDO  RELAJATE, PASA, Y LEE SLIDERS KIRADOBER TEMAS IMPOSIBLES TEMAS KIRADOBER TODO VÍDEOS TODO ES POSIBLE EN MI BLOG TODO MUSICA KIKO TODO TOP VÍDEOS TRUCOS PARA BLOGGER KIRADOBER TUTORIALES BOGGER KIRADOBER un territorio ignoto
Image Slider by DIMPost.com
CSS JavaScript Rocks.

Datos personales

Mi foto
Blogs Famag
Ver todo mi perfil
FOLLOW ME @INSTAGRAM

Created with by ThemeXpose