Latest Blog News: Διαβάζετε πάντα και τα ΣΧΟΛΙΑ των αναρτήσεων!
Το help@bloggertips.gr προσωρινά δε λειτουργεί.
Δέχομαι e-mails στο bloggertips.gr@gmail.com
spam και κάθε είδους διαφημιστικά μπαίνουν κατευθειάν σε blacklist

Ηλεκτρονική έκδοση Περιοδικού-Καταλόγου

Posted On Κυριακή, Δεκεμβρίου 01, 2013 9 comments


Ύστερα από απορία αναγνώστη,σε αυτή την ανάρτηση θα δείξουμε πως να δημιουργήσετε ηλεκτρονική μορφή του περιοδικού σας ή του καταλόγου σας.
Δημιουργήστε ένα λογαριασμό στη διεύθυνση FlipSnack
και στη συνέχεια ανεβάστε τα αρχεία pdf του περιοδικού σας ή του καταλόγου σας.
Ακολουθήστε τα βήματα που σας υποδεικνύει η ιστοσελίδα και το περιοδικό σας ή ο κατάλογός σας είναι έτοιμος!



Copyrights: http://www.bloggertips.gr/


Διαδραστικό Gadget

Posted On Σάββατο, Νοεμβρίου 30, 2013 1 comments



Δείτε το live εδώ

Απλά αντιγράψτε  τον παρακάτω κώδικα και επικολλήστε τον ως Gadget.
Με μερικές βασικές γνώσεις μπορείτε να αλλάξατε φόντο,τη θέση και τα ονόματα των κύκλων καθώς και τα link που θα οδηγούν.





<div class="container">
    <div class="labels">
        <div id="label1" class="label" ><a href="link1">Ζάντες</a>
            <span />
        </span></div>
        <div id="label2" class="label"><a href="link1">Φώτα</a>
            <span />
        </span></div>
        <div id="label3" class="label" ><a href="link1">Πινακίδα</a>
            <span />
        </span></div>
        <div id="label4" class="label" ><a href="link1">Σήμα</a>
            <span />
        </span></div>
        <div id="label5" class="label" ><a href="link1">Πόρτα</a>
            <span />
        </span></div>
        <div id="label6" class="label" ><a href=""link1">Καθρέφτης</a>
            <span />
        </span></div>
    </div>
   
    </div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>


<style>
.container {
    background: url("http://oi49.tinypic.com/2h51kk4.jpg") no-repeat scroll center top transparent;
    color: #000000;
    height: 535px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    width: 1030px;
}

.dialog {
    background-color: rgba(163, 154, 77, 0.9);
    color: #FFFFFF;
    display: none;
    height: 140px;
    left: 343px;
    line-height: 24px;
    padding: 100px 30px;
    position: absolute;
    text-align: center;
    top: 97px;
    width: 280px;
    z-index: 10;

    -moz-border-radius: 170px;
    -ms-border-radius: 170px;
    -o-border-radius: 170px;
    -webkit-border-radius: 170px;
    border-radius: 170px;
}
.dialog .close {
    color: black;
    background-color: #65683b;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    height: 36px;
    line-height: 36px;
    position: absolute;
    right: 10px;
    top: 60px;
    width: 36px;

    -moz-border-radius: 18px;
    -ms-border-radius: 18px;
    -o-border-radius: 18px;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}
.labels p {
    display: none;
}
.labels div {
    background-color: rgba(203, 189, 58, 0.8);
    color: #FFFFFF;
    display: none;
    height: 50px;
    padding: 30px 0 0;
    position: absolute !important;
    text-align: center;
    text-decoration: none;
    width: 80px;

    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
}
.labels > div {
    background-color: rgba(203, 189, 58, 0.8);

    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
}
.labels div:hover {
    background-color: rgba(128, 128, 128, 0.8);
}
.labels div span {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid rgba(203, 189, 58, 0.8);
    bottom: -14px;
    height: 0;
    left: 30px;
    position: absolute;
    width: 0;

    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
}
.labels div:hover span {
    border-top: 15px solid rgba(128, 128, 128, 0.8);
}
#label1 {
    left: 720px;
    top: 181px;
}
#label2 {
    left: 495px;
    top: 183px;
}
#label3 {
    left: 165px;
    top: 260px;
}
#label4 {
    left: 270px;
    top: 178px;
}
#label5 {
    left: 845px;
    top: 85px;
}
#label6 {
    left: 239px;
    top: 50px;
}
</style>


<script>

jQuery(function(){
    // initialize of labels
    $('.labels div#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
        $('.labels div#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
            $('.labels div#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                $('.labels div#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                    $('.labels div#label5').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                        $('.labels div#label6').fadeIn(100).effect('bounce', { times:3 }, 300);
                    });
                });
            });
        });
    });

    // dialog close
    $('.dialog .close').click(function() {
        $(this).parent().fadeOut(500);
        return false;
    });

    // display dialog on click by labels
    $('.labels div').click(function() {
        $('.dialog p').html( $(this).find('p').html() ).parent().fadeIn(500);
        return false;
    });

    // close dialog on click outside
    $('.container').click(function() {
        $('.dialog').fadeOut(500);
    });
});
</script>



Copyrights: http://www.bloggertips.gr/



 
© Copyright 2009-14 bloggertips.gr | All rights reserved. | Επικοινωνία | LK Magazine v2 from Lasantha | Πίσω στην ΚΟΡΥΦΗ | | Subscribe in a reader (Google,Yahoo κα)

* free blogger tips,tricks,gadgets,widgets,templates,themes,help,hacks,design,domains,xml,html,blogspot.gr *