Ανακοίνωση: Τα περισσότερα download links από το Mediafire & το Rapidshare πλέον δεν λειτουργούν...Μπορείτε να κατεβάζετε τις εφαρμογές από τα official links!

DHTML Select Menu


7.2.09 | ,

Για να περάσουμε ένα μονό ή διπλό dropdown menu με εικονίδια και mouseover στο blog μας θα πρέπει να  κάνουμε τα παρακάτω βήματα:

BHMA 1
Κάνετε σύνδεση στον λογαριασμό σας από το http://blogger.com
Πηγαίνετε: Διάταξη => Edit html και ψάξτε (με ctrl + f) για τον κώδικα
<head>

Κάνετε ακριβώς από κάτω του  επικόλληση τον παρακάτω κωδικό και πατήστε αποθήκευση....


<link rel="stylesheet" type="text/css" href="http://ia601004.us.archive.org/22/items/Dhtmlcombo/dhtmlcombo.css" />
<script type="text/javascript" src="https://ia601900.us.archive.org/27/items/Dhtmlcombo_201309/dhtmlcombo.js"></script>

BHMA 2
Πηγαίνετε: Διάταξη => Στοιχεία σελίδας => Προσθήκη gadget => HTML/Javascript
Επικολλήστε εκεί μέσα τον παρακάτω κώδικα:

<form> <b>
<!-- 1st example -->
<select id="webmaster" title="Τηλεοπτικοί Σταθμοί">
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 1ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 2ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 3ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 4ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 5ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 6ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 7ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
</select>

<script type="text/javascript">
//dhtmlselect("id_of_select_menu", "optional_width_of_select_box_px", "optional_width_of_drop_down_menu_px")
dhtmlselect("webmaster")</script>

<br>

<!-- 2nd example -->
<select id="network" title="Ραδιοφωνικοί Σταθμοί ">
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 1ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 2ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 3ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 4ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 5ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 6ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 7ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
</select>

<script type="text/javascript">
//dhtmlselect("id_of_select_menu", "optional_width_of_select_box_px", "optional_width_of_drop_down_menu_px")
dhtmlselect("network", "133px", "133px")

</script></b>

</form>

Κάνετε τις απαραίτητες αλλαγές περνώντας τα δικά σας λινκ και τις ονομασίες τους, αποθηκεύστε και είστε έτοιμοι.... ;)

ΒΟΗΘΗΜΑΤΑ
1, Αν δεν θέλετε διπλό το menu άλλα μονό απλά στο ΒΗΜΑ 2 βάλτε μόνο αυτόν τον κωδικό:

<form> <b>
<!-- 1st example -->
<select id="webmaster" title="Τηλεοπτικοί Σταθμοί ">
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 1ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 2ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 3ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 4ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 5ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 6ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 7ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK
</select>

<script type="text/javascript">
//dhtmlselect("id_of_select_menu", "optional_width_of_select_box_px", "optional_width_of_drop_down_menu_px")
dhtmlselect("webmaster")</script>
</b>

</form>

2. Αν θέλετε τα 2 menu να μην έχουν κενό αναμεταξύ τους απλά αφαιρέστε τον κωδικό
<br>
από το 2ο βήμα...

3. Το tip αυτό χρησιμοποιεί 2  αρχεία τα οποία έχω ανεβασμένα σε δικό μου hosting account ο οποίος υπάρχει περίπτωση να μην αντέξει την ζήτηση αν είναι μεγάλη....
Αν θέλετε μπορείτε να δημιουργήσετε δωρεάν ένα account στο Code.google.com  να ανεβάσετε εκεί τα 2 αρχεία που θα σας δώσω παρακάτω και να αντικαταστήσετε τα λινκ του κώδικα 1ου βήματος με τα δικά σας για να μην υπάρξουν στο μέλλον προβλήματα bandwidth...Το πως θα το κάνετε μπορείτε να το δείτε πατώντας ΕΔΩ .
Επεξεργάζοντας τα 2 αυτά αρχεία μπορείτε να διαμορφώσετε τις διαστάσεις ή χρωματισμό του menu που σας εξυπηρετεί...

dhtmlcombo.css
dhtmlcombo.js 

4. Μπορείτε να προσθέσετε ή να αφαιρέσετε λινκς από το menu προσθέτοντας ή αφαιρώντας   όσες φορές θέλετε τον κώδικα:
<option value="ΕΔΩ ΒΑΖΕΤΕ ΤΟ 1ο LINK ΣΑΣ" />ΕΔΩ ΒΑΖΕΤΕ ΤΗΝ ΟΝΟΜΑΣΙΑ ΤΟΥ LINK

ΜΠΟΡΕΙΤΕ ΝΑ ΔΕΙΤΕ ΣΕ ΠΛΗΡΗ ΛΕΙΤΟΥΡΓΙΑ ΤΟ SCRIPT ΑΝ ΕΠΙΣΚΕΦΤΕΙΤΕ ΤΟ BLOG ΚΑΙ ΠΕΡΑΣΕΤΕ ΤΟ ΠΟΝΤΙΚΙ ΣΑΣ ΠΑΝΩ ΑΠΟ ΤΑ ΠΕΡΙΕΧΟΜΕΝΑ ΤΩΝ MULTIMEDIA


Ίσως να σου αρέσουν και αυτά:


0 Σχόλια...Αφήστε το δικό σας.:

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

Αφήστε ανώνυμα ή επώνυμα το σχόλιό σας (θετικό-αρνητικό) για αυτό το post ή απλά εκφράστε σχετικές απορίες σας...

@Από 19/09/2011 σχόλια που θα γράφονται με Greeklish θα διαγράφονται...

HTML tags που μπορείτε να χρησιμοποιήσετε:

Έντονη γραφή
Πλάγια γραφή
Εικόνα
Κυλιόμενο κείμενο
Σύνδεσμος
Χρωματισμός Κειμένου (Αντικαταστήστε το red με # και τον κωδικό χρώματος που θέλετε)

 
Ανακοίνωση: Επισκεφτείτε και κάντε εγγραφή τώρα στο Forum της σελίδας μας...Προγράμματα - Blogger tips - Τεχνολογικά νέα και πολλά άλλα σας περιμένουν.