Πώς να προσθέσετε CSS3 dropdown μενού στο blogger blog σας

Πάει καιρός που σας έδωσα αυτό το όμορφο μενού => click4money.gr/2013/08/orizontio-menou-me-koutaki-anazhthshs.html. Σε αυτό το post σας έχω ένα ακόμα καταπληκτικό μενού φτιαγμένο με css3 το οποίο μπορείτε να προσθέσετε στο blog σας αρκετά εύκολα.

Στην δεξιά πάνω μεριά του μενού υπάρχουν μερικά έξτρα πραγματάκια εκτός του μενού. Είναι ένας σύνδεσμος "About" άλλος ένας για την επικοινωνία και κουμπάκια κοινωνικών δικτύων του Facebook, Twitter, Google Plus και RSS feed. Επίσης μετά από τις καρτέλες του μενού δεξιά υπάρχει και ένα κουτάκι αναζήτησης.

Για να επιτευχθεί καλύτερη διεπαφή του χρήστη με το blog σας, το μενού διαθέτει υποκατηγορίες που εμφανίζονται με μια ωραία πινελιά από CSS3.
DEMO

Με την κατάλληλη παραμετροποίηση εννοείτε ότι μπορεί να προστεθεί σε όποιο site έχετε! Εγώ πιο κάτω δείχνω την διαδικασία προσθήκης του μενού στην πλατφόρμα του blogger για ένα blogspot blog.

Προσθήκη του CSS3 dropdown menu στο blogger με 5 απλά βήματα

Βήμα 1. Συνδεθείτε στο λογαριασμό σας στο blogger και από τις ρυθμίσεις του blog σας πηγαίνετε στο Πρότυπο και πατήστε στο κουμπί Επεξεργασία HTML όπως φαίνεται και πιο κάτω εικόνα

Βήμα 2. Κάντε κλικ οπουδήποτε μέσα στο κώδικα και πιέστε τα πλήκτρα CTRL + F για να ανοίξει το κουτάκι αναζήτησης. Πληκτρολογήστε μέσα στο κουτί αναζήτησης το παρακάτω tag και πατήστε Enter για να το βρείτε.

</header>

Βήμα 3. Ακριβώς κάτω από το </header> προσθέστε την πιο κάτω HTML δομή:

<div id='contact-links'>
    <div id='my-links'>
        <a href='#'>About</a>
        <a href='#'>Επικοινωνία</a>
                <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJsQv9HXFNIektmj9LU5sIqxRMP9OtVwkAxLAZneVUeN5Y_Z0KJTBBQmpVyM6YLewhh0DKMmRpkVZhmmFwzkewv_M8yYpw1LETcv9MM6wJ_7qBkJkuRdn8bLNPt5cEtiMSqMvaNW-qIMc/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijMKfsMm60G71l2O7xlz19mW0QugIktsPQB5LkY6feXD6-T73X_tb9JLE_Ka1RJjqda9GMmfLq6JNFxOMLm5sqDdmp7eWZqVP3ftkUUTTMRONVOjySWndAWnojulgxK0E07fnU5Es24Lff/s1600/twitter.png' title='Twitter' width='18px' /></a>
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy321Bdz4bYo74n0BNgZ2-ZkaAE3eDaNDmKnuedRagQAnnyF9yMQpCDs1xSvcEFkMDiRpLYcLMakEPGIUiuScNxwIGaeWa9Py9TTiSI0ZCQexBIwBSRVG9h0SWEq7-A3pv0k-LU4ZrWv0_/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjORJ-rAJUdnx0QdWWenc0W9oUrP5Gto59_pVplqpNEYUupCTV5R9tOBSJmV0Q6OwVjVX8nxq77BgeaP17hMDEoJZAI589JhAilGl-_rls-jdlwjmMr2iPxxXUQGVbONopzMHnAWHSaDqYe/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
    </div>

    <div id='menu-container'>
        <nav id='neat-menu'>
            <ul>
              <li class='active'><a href='/'>Αρχική</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Single Menu</a></li>
                <li><a href='#'>Single Menu</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <!-- menu-search form -->
        <div id='menu-search'>
          <form method='get' action='/search'>
                <input autocomplete='off' name='q' placeholder='Αναζήτηση...' type='text' value=''/>
            </form>
        </div>
    </div>
</div>

Αντικαταστήστε τα σύμβολα # με τις διευθύνσεις URL των συνδέσμων σας και αντικαταστήστε τα κείμενα που είναι σε μπλε χρώμα με τους τίτλους που θέλετε να εμφανίζονται ως σύνδεσμοι του μενού.

Αν θέλετε να αφαιρέσετε τις υποκατηγορίες, αφαιρέστε τον κώδικα μέσα στις ετικέτες που είναι με κίτρινο χρώμα, συμπεριλαμβανομένων και των <ul> ετικετών. Για να αφαιρέσετε μόνο ένα στοιχείο μενού, αφαιρέστε το κομμάτι που αρχίζει με <li> και τελειώνει με </li>

Στο παρακάτω βήμα (βήμα 4) μπορείτε να προσθέσετε ένα από τους 3 διαφορετικούς κώδικες ανάλογα με τα χρώματα που θέλετε.

Βήμα 4. Και τώρα ας προσθέσουμε το στυλ του μενού, δηλαδή το CSS. Πατήστε όπως και πριν τα πλήκτρα CTRL + F και ψάξτε για το πιο κάτω κομμάτι του κώδικα.

]]></b:skin>

Αν θέλετε το μενού σας να έχει ίδια χρώματα με αυτό του demo ακριβώς από πάνω από το ]]></b:skin> προσθέστε τον πιο κάτω κώδικα
Ίδια χρώματα με του DEMO (1ο στυλ χρωμάτων)

#contact-links {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    margin: auto;
    position: relative;
    width: 100%;
}
#contact-links a {
    color: #FF2A2A;
}
#contact-links a:hover {
    color: #FF2A2A;
}
#my-links {
    float: right;
    font-size: 12px;
    margin: 4px 10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
    margin-left: 7px;
    padding-left: 8px;
    text-decoration: none;
}
#my-links a:first-child {
    border-width: 0;
}
#menu-container {
    background: -webkit-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    background: linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF2A2A', endColorstr='#FF2A2A',GradientType=0 );
    border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    clear: both;
    height: 46px;
    padding-top: 1px;
}
#neat-menu {
    float: left;
}
#neat-menu a {
    text-decoration: none;
}
#neat-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#neat-menu > ul > li {
    float: left;
    padding-bottom: 12px;
}
#neat-menu ul li a {
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    border-color: #D1D1D1;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 0 0;
    color: #333333;
    display: block;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding: 11px 15px 10px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
    background: -webkit-linear-gradient(#FF2A2A, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#FF2A2A, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#FF2A2A, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF2A2A', endColorstr='#3F96E5',GradientType=0 );
    border-bottom: 1px solid #2D81CC;
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #FF2A2A inset, 1px 0 0 #FF2A2A inset;
    color: #FFFFFF;
    margin: -1px 0 -1px -1px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
    background: -webkit-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    background: linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF2A2A', endColorstr='#FF2A2A',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
    border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
    background: -webkit-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 padding-box transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF2A2A', endColorstr='#FF2A2A',GradientType=0 );
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 #FFFFFF inset;
    height: 0;
    margin-top: 1px;
    opacity: 0;
    overflow: hidden;
    width: 240px;
    padding: 0;
    position: absolute;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#neat-menu ul li:hover ul  {
    margin-top: 0\2;
    height: auto;
    opacity: 1;
    visibility: visible;
}
#neat-menu ul ul a {
    border-right-width: 0;
    border-top: 1px solid #FF2A2A;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #FF2A2A;
    height: 24px;
    line-height: 24px;
    padding: 7px 12px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    background: linear-gradient(#FF2A2A, #FF2A2A) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF2A2A', endColorstr='#FF2A2A',GradientType=0 );
    border-top: 1px solid #FF2A2A;
    box-shadow: -1px 0 0 #FF2A2A inset, 1px 0 0 #FF2A2A inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
    border-top-width: 0;
}
#menu-search {
    margin:8px 10px 0 0;
    float: right;
}
#menu-search form {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKSM3EM1Cmv4aVFc2vVAcfxr8bCjTPccSyDNPqgyeAb8SV3JFw4zgRL7jGNvV0JjniSKSsCGoKszInanC9Zr7XkHG_ljp6yxGBqKaxg7g9szT3o9qnQjfcNn1z9854PwKgV7tyj5nUlUu7/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
    border: 1px solid #FF2A2A;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
    height: 26px;
    padding: 0 25px;
    position: relative;
    width: 130px;
}
#menu-search form:hover {
    background-color: #F9F9F9;
}
#menu-search form input {
    color: #999999;
    font-size: 13px;
    height: 26px;
    text-shadow: 0 1px 0 #FFFFFF;
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: left;
    outline: medium none;
    padding: 0;
    width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
    color: #FF2A2A;
}

2ο στυλ χρωμάτων

#contact-links {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    margin: auto;
    position: relative;
    width: 100%;
}
#contact-links a {
    color: #4C9FEB;
}
#contact-links a:hover {
    color: #3D85C6;
}
#my-links {
    float: right;
    font-size: 12px;
    margin: 4px 10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
    margin-left: 7px;
    padding-left: 8px;
    text-decoration: none;
}
#my-links a:first-child {
    border-width: 0;
}
#menu-container {
    background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
    border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    clear: both;
    height: 46px;
    padding-top: 1px;
}
#neat-menu {
    float: left;
}
#neat-menu a {
    text-decoration: none;
}
#neat-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#neat-menu > ul > li {
    float: left;
    padding-bottom: 12px;
}
#neat-menu ul li a {
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    border-color: #D1D1D1;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 0 0;
    color: #333333;
    display: block;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding: 11px 15px 10px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
    background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-bottom: 1px solid #2D81CC;
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    margin: -1px 0 -1px -1px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
    background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
    border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
    background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 #FFFFFF inset;
    height: 0;
    margin-top: 1px;
    opacity: 0;
    overflow: hidden;
    width: 240px;
    padding: 0;
    position: absolute;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#neat-menu ul li:hover ul  {
    margin-top: 0\2;
    height: auto;
    opacity: 1;
    visibility: visible;
}
#neat-menu ul ul a {
    border-right-width: 0;
    border-top: 1px solid #D1D1D1;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #444444;
    height: 24px;
    line-height: 24px;
    padding: 7px 12px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
    border-top-width: 0;
}
#menu-search {
    margin:8px 10px 0 0;
    float: right;
}
#menu-search form {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKSM3EM1Cmv4aVFc2vVAcfxr8bCjTPccSyDNPqgyeAb8SV3JFw4zgRL7jGNvV0JjniSKSsCGoKszInanC9Zr7XkHG_ljp6yxGBqKaxg7g9szT3o9qnQjfcNn1z9854PwKgV7tyj5nUlUu7/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
    height: 26px;
    padding: 0 25px;
    position: relative;
    width: 130px;
}
#menu-search form:hover {
    background-color: #F9F9F9;
}
#menu-search form input {
    color: #999999;
    font-size: 13px;
    height: 26px;
    text-shadow: 0 1px 0 #FFFFFF;
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: left;
    outline: medium none;
    padding: 0;
    width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
    color: #C4C4C4;
}

3ο στυλ χρωμάτων

#contact-links { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); margin: auto; position: relative; width: 100%; } #contact-links a { color: green; } #contact-links a:hover { color: green; } #my-links { float: right; font-size: 12px; margin: 4px 10px; overflow: hidden; text-shadow: 0 1px 0 #FFFFFF; } #my-links a { margin-left: 7px; padding-left: 8px; text-decoration: none; } #my-links a:first-child { border-width: 0; } #menu-container { background: -webkit-linear-gradient(#FFFF1FFF, #e9eaea) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#FFFF1FFF, #e9eaea) repeat scroll 0 0 transparent; background: linear-gradient(#FFFF1FFF, #e9eaea) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF1FFF', endColorstr='#e9eaea',GradientType=0 ); border-radius: 0 0 4px 4px; border:1px solid rgba(0,0,0,0.1); box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset; clear: both; height: 46px; padding-top: 1px; } #neat-menu { float: left; } #neat-menu a { text-decoration: none; } #neat-menu ul { list-style: none; margin: 0; padding: 0; } #neat-menu > ul > li { float: left; padding-bottom: 12px; } #neat-menu ul li a { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset; border-color: #D1D1D1; border-image: none; border-style: solid; border-width: 0 1px 0 0; color: #333333; display: block; font-size: 14px; height: 25px; line-height: 25px; padding: 11px 15px 10px; text-shadow: 0 1px 0 #FFFFFF; } #neat-menu ul li a:hover { background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 ); } #neat-menu > ul > li.active > a { background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 ); border-bottom: 1px solid #2D81CC; border-top: 1px solid #4791D6; box-shadow: -1px 0 0 #000000 inset, 1px 0 0 #000000 inset; color: #FFFFFF; margin: -1px 0 -1px -1px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); } #neat-menu > ul > li.active > a:hover { background: -webkit-linear-gradient(#000000, #000000) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#000000, #000000) repeat scroll 0 0 transparent; background: linear-gradient(#000000, #000000) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); } #neat-menu > ul > li:first-child > a { border-radius: 0 0 0 5px; } #neat-menu ul ul { background: -webkit-linear-gradient(#000000, #000000) repeat scroll 0 0 padding-box transparent; background: -moz-linear-gradient(#000000, #000000) repeat scroll 0 0 padding-box transparent; background: linear-gradient(#000000, #000000) repeat scroll 0 0 padding-box transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); border-radius: 5px 5px 5px 5px; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0 #FFFFFF inset; height: 0; margin-top: 1px; opacity: 0; overflow: hidden; width: 240px; padding: 0; position: absolute; visibility: hidden; z-index: 1; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } #neat-menu ul li:hover ul { margin-top: 0\2; height: auto; opacity: 1; visibility: visible; } #neat-menu ul ul a { border-right-width: 0; border-top: 1px solid #D1D1D1; box-shadow: 0 1px 0 #FFFFFF inset; color: #444444; height: 24px; line-height: 24px; padding: 7px 12px; text-shadow: 0 1px 0 #FFFFFF; } #neat-menu ul ul a:hover { background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 ); border-top: 1px solid #4791D6; box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset; color: #FFFFFF; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); } #neat-menu ul ul li:first-child a { border-top-width: 0; } #menu-search { margin:8px 10px 0 0; float: right; } #menu-search form { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKSM3EM1Cmv4aVFc2vVAcfxr8bCjTPccSyDNPqgyeAb8SV3JFw4zgRL7jGNvV0JjniSKSsCGoKszInanC9Zr7XkHG_ljp6yxGBqKaxg7g9szT3o9qnQjfcNn1z9854PwKgV7tyj5nUlUu7/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent; border: 1px solid #CCCCCC; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF; height: 26px; padding: 0 25px; position: relative; width: 130px; } #menu-search form:hover { background-color: #F9F9F9; } #menu-search form input { color: #999999; font-size: 13px; height: 26px; text-shadow: 0 1px 0 #FFFFFF; background: none repeat scroll 0 0 transparent; border: medium none; float: left; outline: medium none; padding: 0; width: 100%; } #menu-search form input.placeholder, #menu-search form input:-moz-placeholder { color: #C4C4C4; }

Βήμα 5. Κάντε κλικ στο κουμπί Αποθήκευση προτύπου για να αποθηκευτούν οι αλλαγές.. και τελειώσατε!
Ελπίζω να σας αρέσει αυτό το μενού με CSS3. Αν σας άρεσε, κάντε μια δημοσίευση να το δουν και οι φίλοι σας είναι δωρεάν μην τσιγκουνευεστε ;)

Σπάσιμο κωδικών facebook

Πώς μπορεί κάποιος να σας κλέψει τον κωδικό του Facebook (hack facebook). Παρακάτω σας έφτιαξα ένα βίντεο που μου ζητήσατε για το πως σπάμε κωδικούς στο facebook εύκολα. Με ένα απλό τρόπο μπορεί να σας κλέψουν το κωδικό του facebook . Το βίντεο είναι καθαρά για εκπαιδευτικούς σκοπούς. Τον οδηγό αυτό κυρίως τον έφτιαξα για αρχάριους, να μπορούν να δουν ένα από τους πολλούς τρόπους που μπορεί κάποιος έμπειρος hacker να κλέψει τον κωδικό του ς. Μετά από το βίντεο θα έχετε μια άλφα γνώση και θα μπορείτε να προστατευτείτε. Τα εργαλεία που θα χρειαστείτε για να το κάνετε και εσείς : http://lefta4klik.blogspot.gr/2012/12/spasimo-kodikon-crack-wep.html Όποιος έχει απορίες για το πως να σπάσω κωδικό facebook ας αφήσει σχόλιο να το βοηθήσουμε. Σημείωση : Η τεχνική αυτή δουλεύει όταν οι υπολογιστές βρίσκονται στο ίδιο δίκτυο. Πώς σπάμε κωδικούς του φβ - Δείτε τον οδηγό βίντεο ...

Διαβάστε περισσότερα

lefta4klik - Blogger widgets, tricks, tips & hacks

Αναζήτηση αυτού του ιστολογίου