Κυριακή, 26 Ιουνίου 2011

Προσθήκη όμορφου Drop-down Gadget.

Print and PDF


Σήμερα θα μάθουμε πώς να προσθέσετε ένα drop down μενού για blogger με ένα πολύ εύκολο τρόπο,
Το μενού αυτό είναι συμβατό με τα περισσότερα σύγχρονα και κλασικά προγράμματα περιήγησης, και μπορεί να προστεθεί για κάθε πρότυπο σε λίγα βήματα.


1) Πρώτα από όλα, συνδεθείτε στο λογαριασμό σας Blogger.
2) Κάντε κλικ στο Σχεδίαση. και επιλέξτε Επεξεργασία HTML.

Προσοχή:

3) Πριν ξεκινήσουμε:
- Πρέπει να είστε προσεκτικοί κατά την αλλαγή του προτύπου σας.
- Πριν κάνετε οποιαδήποτε αλλαγή, αποθηκεύστε το προτυπο σας σε ασφαλή μέρος (Στον υπολογιστη σας).

4) Τώρα, ψάξτε για αυτήν την γραμμή. (Ctrl+F)

]]></b:skin>

5) Μέτα αντιγράψτε τον επόμενο κωδικά και επικολλήστε πριν από το ]]></b:skin>: 

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

- Αποθήκευση προτύπου.

6) Τώρα, ψάξτε για αυτήν την γραμμή: 

</head>

7) Αντιγράψτε τον παρακάτω κωδικά και επικολλήστε των ακριβώς πριν από το </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
  //]]>
  </script>

- Αποθήκευση προτύπου.

8) Τέλος πηγαίνετε στην σχεδίαση - στοιχειά σελίδας.

9) Και πατήστε προσθήκη Gadget - HTML/JavaScript

10) Και αντιγράψτε και επικολλήστε τον παρακάτω κωδικά:

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">BlogyTricks</a></li>
  </li></ul>


- Αποθήκευση.

Σημίωση:

Το μονό που αλλάζετε είναι το τα πράσινα γράμματα με τους τίτλους που θέλετε,
και τα μπλε γράμματα με τα ανάλογα link τους.

Για ότι πρόβλημα υπάρξει μην διστάσετε να επικοινωνήστε μαζί μας μεσώ του
κουμπιού "Επικοινωνία" που θα βρείτε πάνω πάνω.

Copyrights: BlogyTricks© 

Πηγη κωδικα: Allblogtools
.

9 σχόλια :

  1. Να ρωτήσω κάτι. Όταν λέτε "μπλε γράμματα με τα ανάλογα link τους" πια links ... αν εγώ στο μεθούν θέλω να βάλω ένα εβδομαδιαίο πρόγραμμα π.χ Δευτέρα, Τρίτη κλπ ... πια link βάζω;

    ΑπάντησηΔιαγραφή
  2. "Το μονό που αλλάζετε είναι το τα πράσινα γράμματα με τους τίτλους που θέλετε,
    και τα μπλε γράμματα με τα ανάλογα link τους."

    Εκεί που λεμέ για τα ανάλογα link τους εννοούμε τα links των τίτλων. Δηλαδή, στο παράδειγμα για το πρόγραμμα της εβδομάδας μπορείς πολλή απλά να βάλεις τις ημέρες εκεί που λέει 'Menu1', 'Menu2' κ.α. Και διπλά στα μπλε γράμματα αντίστοιχα στο κάθε μενού να βάλεις αν θέλεις το λινκ της κάθε μέρας άμα έχεις κάποια ανάρτηση, ετικέτα ή γενικότερα κάπου να θες να το πηγαίνει. Άμα δεν έχεις ή δεν θες να βάλεις, απλά άσε την δίεση. Τέλος μπορείς εκεί που λέει με πράσινα γράμματα 'Drop 1-2', Drop 2-3 κ.α. Να βάλεις τους τίτλους από αυτά που θες να δείχνει κάτω από τις ημέρες για παράδειγμα και διπλά αντίστοιχα στα μπλε γράμματα σε κάθε drop να βάλεις άμα θες πάλι ένα λινκ που έχεις για αυτόν τον κάθε τίτλο.

    ΑπάντησηΔιαγραφή
  3. Δεν κάνει τίποτα, ελπίζω η απάντηση μου να σε βοήθησε.

    ΑπάντησηΔιαγραφή
  4. Καλησπέρα.

    Εγώ το βάζω σαν gadget κάτω από την επικεφαλίδα-φωτγαγραφία του blog μου και τα μενού δεν ανοίγουν κάθετα (κρύβονται). Για να ανοίξουν κάθετα πρέπει να ανοίξω στον κώδικα πολύ το περιθώριο και φαίνεται άσχημο (ένα μεγάλο γκρι κενό). Κάνω κάτι λάθος???
    Το μόνο που κατάφερα να κάνω ήταν να τροποποιήσω τυχαία τις παραμέτρους του κώδικα και να ανοίγει το μενού οριζόντια και ΌΧΙ κάθετα.
    Τι μπορώ να κάνω. Το blog το ξεκίνησα αρχές Μαίου. Δεν ξέρω αν αυτό παίζει ρόλο ως προς το πρότυπο που χρησιμοποιώ, αν και έχω βάλει κλασικό πρότυπο.
    Αν μπορείς παρακαλώ βοηθησέ με γιατί θα ήθελα να βάλω ένα drop dawn menu.
    Ευχαριστώ.

    ΑπάντησηΔιαγραφή
  5. Φιλέ μου δυστυχώς είναι αυτό που λες ότι καταρχάς χρειάζεται χώρο για να μπορέσει να ανοίγει κάθετα και κατά δεύτερον ότι σε αυτό φυσικά φταίει πολλές φορές και το πρότυπο.

    ΑπάντησηΔιαγραφή
  6. ok δεν πειράζει.Ευχαριστώ για την άμεση απάντηση.Αν βρείτε κάτι άλλο εδώ θα είμαι και θα το διαβάσω.
    Συνεχίστε έτσι, κάνετε πολύ καλή δουλειά με ενδιαφέροντα θέματα.

    ΑπάντησηΔιαγραφή
  7. Ευχαριστούμε φιλέ.
    Και μην ανησυχείς άμα είναι θα δημοσιεύσουμε στην σελίδα μας, αφού βέβαια τελειώσει ο διαγωνισμός, ένα drop-menu για σένα.

    ΑπάντησηΔιαγραφή