A lo largo de los años que llevo publicando en Mil Trucos Blogger he publicado varios fanbox de Facebook tanto normales como aquellos que se abren en forma de PopUp, como es el caso del truco que voy a publicar en el que veremos como añadir un fanbox de facebook en un Popup (versión actualizada al 2016).
Para añadir este truco a tu blog ve a Plantilla, Editar HTML y justo antes de ]]></b:skin> añade lo siguiente:
Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:
1 Un clic en “Plantilla”
2 Un clic en “Editar HTML”
Ahora se te abrirá el Editor HTML de tu plantilla
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
3 Busca el siguiente código
]></b:skin>
Cuando lo hayas Encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste
.popup {
background-color: #ffffff;
color: #888888;
height: 285px;
padding: 20px;
position: fixed;
right: 30%;
top: 25%;
width: 340px;
z-index: 101;
-moz-box-shadow: 0px 0px 10px 1px #888888;
-webkit-box-shadow: 0px 0px 10px 1px #888888;
box-shadow: 0px 0px 10px 1px #888888;
border-radius: 10px;
-moz-border-radius: 10px;
}
.overlay {
background: #000000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 100;
opacity:0.5;
}
a.close {
background: url("http://i.imgur.com/ZSlkx6J.png") repeat scroll left top transparent;
cursor: pointer;
float: right;
height: 32px;
left: 32px;
position: relative;
top: -33px;
width: 32px;
}
#backpop{background-color: rgba(51, 51, 51, 0.81);width: 100%;height: 100%;z-index: 999;position: fixed;}
Ahora antes de </head> añade lo siguiente:
Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Ahora se te abrirá el Editor HTML de tu plantilla
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
Busca el siguiente código
</head>
Una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo encima (ó antes) de esa etiqueta que encontraste
<script type="text/javascript">
function openDialog() {
$('#overlay').fadeIn('fast', function() {
$('#popup').css('display','block');
$('#popup').animate({'left':'30%'},500);
});
}
function closeDialog(id) {
$('#'+id).css('position','absolute');
$('#'+id).animate({'left':'-100%'}, 500, function() {
$('#'+id).css('position','fixed');
$('#'+id).css('left','100%');
$('#overlay').fadeOut('fast');
});
}
</script>
<script type="text/javascript">
function openDialog() {
$('#overlay').fadeIn('fast', function() {
$('#backpop').css('display','block');
$('#backpop').animate({'left':'30%'},500);
});
}
function closeDialog(id) {
$('#'+id).css('position','absolute');
$('#'+id).animate({'left':'-100%'}, 500, function() {
$('#'+id).css('position','fixed');
$('#'+id).css('left','100%');
$('#backpop').fadeOut('fast');
});
}
</script>
Por último busca la etiqueta <body> y pega arriba de ella lo siguiente:
2
Un clic en “Editar HTML”
Ahora se te abrirá el Editor HTML de tu plantilla
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
3 Busca el siguiente código
<body>
Espues de encontrar el código, inserta el siguiente código arriba del código que encontraste
<div id="backpop">
<div id="popup" class="popup">
<a onclick="closeDialog('popup');" class="close"></a>
<div>
<div style="font-size: 14px;color: #333;line-height: 1.8em;text-transform: uppercase;text-align: center;font-weight: bold;">Apoyanos con un Like! es GRATIS! :D</div>
AQUI CODIGO DE TU FANBOX
</div>
</div>
</div>
Para obtener el código del fanbox debes dirigirte al Plugin de Páginas de Facebook (recuerda que en este paso solo debes pegar la segunda parte del código que te da Facebook, la primera la puedes pegar en un gadget HTML/JavaScript).
Ya solo queda guardar los cambios y disfrutar de este genial truco.
Fecha de la Publicación; 14/11/2020
No hay comentarios:
Publicar un comentario