Latest Blog News: Διαβάζετε πάντα και τα ΣΧΟΛΙΑ των αναρτήσεων!

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

Print Friendly and PDFPrintPrint Friendly and PDFPDF

Δείτε το live εδώ

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

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

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

.container {
    background: url("") 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;


    // 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() {
        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() {




Maaste Blogerrmen είπε...

Your article is very informative, specially to the new individual entering to the field..... But I expect a little more detailed explanations for making the topic more clear for the common readers…. Sorry if am wrong.... Make Money , Blogging Tips

obat menggugurkan kandungan είπε...

It looks like the life of a blogger is so interesting. and now I am the spirit of the world to pursue blogger

vimax είπε...

I am a beginner blogger and still shallow knowledge of coding, by reading this article can add knowledge to me . obat perangsang wanita , obat sipilis

obat bius είπε...

After taking to read this article. we can reap the benefits of the content of this article. and certainly can add to my knowledge

obat penggugur kandungan είπε...

This article is very useful and add knowledge to the readers

cara menggugurkan kandungan είπε...

for beginners like me need a lot of reading and searching for information on various blogs. and articles that you share a very nice and inspires me . jual obat aborsi


Thanks for your sharing. Hope you can contribute more quality posts to this page. Thank you!
flip diving

anggita nirbaya είπε...

By taking the time to read a lot of information like this to add my insight . cara menggugurkan kandungan

Towelroot είπε... Leo PlayCard APK v1.8 Download For Android (Latest). November 17, 2018 by Author Leave a Comment · Leo Play Card. Leo PlayCard APK v1.8 Download ...

bsnlll είπε...

It ensure comfort Bsnl speedtest.

CB είπε...

By reading the article material very very well and this is very useful.
cara mencegah kehamilan
penyebab sering keguguran
cara mengatasi telat haid
tanda tanda kehamilan 1 bulan
kalkulator masa subur akurat dan berhasil
masa subur wanita sebelum haid

Δημοσίευση σχολίου

Παρακαλούμε τους φίλους αναγνώστες:


Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.

© Copyright 2009-14 | 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, *