Facebook : Felugró Like Box doboz oldaladra 1. |
Felugró Like Box doboz oldaladra 1.
Egy újabb sikerélmény
Végre találtam egy kódot, amivel Facebook felugró Like Box-ot tudsz létrehozni.
A kódot egyszerű modulod forráskód nézetébe kell beilleszteni jobb vagy bal oldalra.
A világon semmi más dolgod nincsen, mint hogy a kódban, amit kiemeltem részt, oda az én facebook oldalam neve helyére a te facebook oldalad nevét írd be. Okézd le és készen is vagy :)
Persze a CSS részét is átalakíthatod. A fontosabb beállításokat beleírtam a CSS-be.
Azt, hogy mennyi ideig látszódjon az ablak, azt is be lehet állítani. A kódban azt is kiemeltem.
De mondjuk inkább azt, hogy mindent kiemeltem, amit a kódban átírhatsz.
Kód
<style type="text/css">
#makingdifferentpopup{ /* az egész doboz */
position: fixed;
display:none;
border: 4px solid #FEDA06; /* doboz kerete */
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:400px;
height:360px;
overflow:hidden;}
#makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;}
#makingdifferentpopup h1{
background:#B7CA86 98% no-repeat; /* fejléc háttérszíne */
border: 0px solid #A0B960 !important; /* fejléc kerete */
color:#FFFFFF !important; /* fejléc betűszíne */
font-size:20px !important; /* betű mérete a fejlécben */
font-weight:700 !important;
text-align: center;
padding:5px !important;
margin:0 !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:0px solid #ddd;
overflow:hidden !important;}
#mdfooter{ /* ahol a számláló van */
text-align:left;
background:#F9f9f9 !important;
height:50px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;}
#mdclose{ /*bezár button*/
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:15px !important;
margin:1px !important;}
#mdclose:active{
top:1px;
left:1px;}
.grabthis{
bottom:80px;
font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;}
.grabthis a{
color: #000;
text-decoration:none;}
.grabthis a:hover{
text-decoration:underline;}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup() {
var sec = 30
var timer = setInterval(function() {
$("#mdfooter span").text(sec--);
if (sec == 0) {
$("#makingdifferentpopup").fadeOut("slow");
clearInterval(timer);
}
},1000);
var mdwh = jQuery(window).height();
var mdpph = jQuery("#makingdifferentpopup").height();
var mdfromTop = jQuery(window).scrollTop()+130;
jQuery("#makingdifferentpopup").css({"top":mdfromTop});}
jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)
//alert(jQuery.cookie('sreqshown'));
//var mdww = jQuery(window).width();
//var mdppw = jQuery("#makingdifferentpopup").width();
//var mdleftm = (mdww-mdppw)/2;
var mdleftm = 300;
//var mdwh = jQuery(window).height();
//var mdpph = jQuery("#makingdifferentpopup").height();
//var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left: mdleftm}, 0).show();
jQuery("#mdclose").click(function() {
jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000"}, 1000).show();});});
</script>
<div id="makingdifferentpopup">
<h1>Facebook</h1>
<div class="htmlarea">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Flindadesign.gportal&width=400&colorscheme=lig
ht&show_faces=true&border_color=%23fff&stream=false&header=false&height=2
50" style="border:none; overflow:hidden; width:400px; height:250px;"></iframe>
<div class="grabthis">
</div>
</div>
<div id="mdfooter">
Kérlek várj<span>30</span> másodpercet vagy zárd be <a href="#" id="mdclose" onclick="return false;">Bezár</a></div>
</div>
<!-- End popup -->
|
Igen tudom, hogy kell egy CSS és egy HTML fájl, és a HTML-ben hivatkozni kell a CSS-re... De nem a sajáttárhelyemre töltöm fel a fájlokat, hanem egy ingyenes Facebook alkalmazásba (iFrame Wizard 2), és ott van HTML, CSS és JS szerkesztő is, de sehol se írják, hogy lehet a CSS-re hivatkozni. Írtam nekik, de nem válaszolnak
Most lehet, hogy hülyeséget írok, de ezen az oldalon a második ablak kódjában is van CSS és HTML fájlban simán működik: http://www.mbgadget.com/2013/04/blogger-facebook-popup.html
„ Sajnos nem teszem meg, hogy HTML szerkezetbe másolom a kódot, mert ezen az oldalon a kódok G-Portálra íródtak és oda nem kell a HTML szerkezet.
De ha HTML-t szerkesztesz, akkor ennek alapnak kellene lennie. A CSS kód megy a CSS fájlba, a div rész mindegy hova megy de azért a body alá tedd, és a javascipt megy a body fölé.