Click me! PopUp μήνυμα με ένα κλικ με jQuery widget για τον Blogger

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Πρόκειται για ένα απλό κουμπάκι που απλά αφήνει να ξεπεταχτεί ένα μήνυμα ή μια περιγραφή που δε θέλετε να φαίνεται απευθείας, με ένα κλικ.
Ακολουθήστε τα παρακάτω βήματα για να το εγκαταστήσετε στη δική σας Σελίδα:
  • Σύνδεση στον Blogger
  • Σχεδίαση / Επεξεργασία HTML
  • Βρείτε την ]]></b:skin>
  • Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:

.overlay{
background:Black;opacity:0.7;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
}
.box{
position:fixed;
top:-200px;
left:30%;
right:30%;
background-color:#000;
color:#7F7F7F;
padding:20px;
border:12px solid #111;
-moz-border-radius: 2px;
-moz-box-shadow: 0 1px 5px #050505;
z-index:9999;
}
.box h5{
border-bottom: 1px solid #111;
margin:0 auto;
padding:10px;text-align:center;
background-color:#111;
color:#EF7777;
-moz-box-shadow: 0px 0px 4px #050505;
-moz-border-radius: 32px;
}
a.boxclose{
float:right;
width:26px;
height:26px;
background:transparent url(http://1.bp.blogspot.com/-YJb39qNQth0/TjhE1B7gXNI/AAAAAAAAEtg/1RE4dicwfjE/s1600/close.png)no-repeat top left;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
}
a.activator{
width:153px;
height:150px;
position:absolute;
top:0px;
left:0px;
background: url(http://1.bp.blogspot.com/-wbjfuzLx4XY/TjhHkrcp3iI/AAAAAAAAEtk/m9uFSNIRsRk/s1600/clickme.png) no-repeat top left;
z-index:1;
cursor:pointer;}
  • Βρείτε τώρα την </body>
  • Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:

<script src="http://generation-platinum.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#activator').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box').animate({'top':'160px'},500);
});
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-200px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
  • Αποθηκεύστε το πρότυπό σας.
  • Πατήστε τώρα "Στοιχεία Σελίδας"
  • Επιλέξτε Προσθήκη gadget και με τη σειρά HTML/JavaScript
  • Επικολλήστε τον παρακάτω κώδικα:

<a class="activator" id="activator"></a>
<div class="overlay" id="overlay" style="display:none;"></div><div class="box" id="box"><a class="boxclose" id="boxclose"></a>
<h5>Ο ΤΙΤΛΟΣ ΣΑΣ</h5><p>ΤΟ ΜΗΝΥΜΑ Η Η ΠΕΡΙΓΡΑΦΗ ΤΟΥ ΠΡΟΦΙΛ ΣΑΣ</p></div>

  • Βάλτε τον τίτλο και την περιγραφή σας εκεί που σας ζητείται και πατήστε αποθήκευση.

1 comment:

 
back to top