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

Πρόκειται για ένα απλό κουμπάκι που απλά αφήνει να ξεπεταχτεί ένα μήνυμα ή μια περιγραφή που δε θέλετε να φαίνεται απευθείας, με ένα κλικ.

DEMO

Ακολουθήστε τα παρακάτω βήματα για να το εγκαταστήσετε στη δική σας Σελίδα:

• Σύνδεση στον 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjer16YpiJJJlPQHVIebl60spu-1avOe5Ppg5bdt-hvaeMne6mijXMdNAMQ3danfOL5fuluR_HPA1V0DW6px4VicVKhASeiAi1bFo2Yx_O0IubyF7R883Uoa3khqFcbWXBzkP_DQsXFCVte/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2yMCXmdQggzGi1xhmr_JMhh38EKvyGLsYIbk_lwZfakJUiXPJv6aytGEJr_RN0FIZdU7D2zioBxgkA56YHx4BDtXB0xBnOGgMOdDfn4HIurU0io6GmQtTVFZ0IUG_oerhPdqsB8NMyIBQ/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>

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