Πως να βάλετε στο blog σας πτυσσόμενο Slashdot Menu ( Νο 32 ). |  Στάλες στο γαλάζιο ® <link href='http://3.bp.blogspot.com/_L116RpGjEMY/TDMr1uHv6kI/AAAAAAAACYw/vu3ZbUPYDpc/s72-c/Slashdot-Menu.png' rel='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiME6DVcbv3gKvBNmYAN6FDaLxToDKS-E4cTNSSmHJAS370hC-oKXqo1VtWSfx20ExDsIsLjKJppxnTl_N-7lJi_B4ZDQzj5BQ5TZ9fMdN27ybf3x0Yzs0Jd7JQo_Ar824kLqZbIbRkOUU/s640/Stales_sto_Galazio.jpg'/>
» » » » Πως να βάλετε στο blog σας πτυσσόμενο Slashdot Menu ( Νο 32 ).

9:15 μ.μ. 1 , ,
A+ A-


Σε αυτό το tutorial θα δούμε πως να δημιουργήσουμε ένα όμορφο και κομψό πτυσσόμενο Slashdot sidebar μενού.




1 ) Πρώτα απ' όλα θα κατεβάστε sdmenu.zip , αμέσως μετά κάνετε Extract στο rar και ανοίξτε το αρχείο.

Μέσα στο φάκελο θα βρείτε κάποια  GIF εικονίδια , sdmenu.js  και sdmenu.css αρχεια.

Ανεβάστε όλα τα GIF εικονίδια  και το  sdmenu.js  στο δικό σας  Free file hosting and file sharing site

Αμέσως μετά , ανοίγετε το  sdmenu.css:


div.sdmenu {
width: 150px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(bottom.gif) no-repeat right bottom;
color: #fff;
}
div.sdmenu div {
background: url(title.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url(expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
background : #066 url(linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}


Ψάχνετε μέσα στο css script τις εξής γραμμές: bottom.gif title.gif toptitle.gif, expanded.gif, collapsed.gif linkarrow.gif και αντικαταστήστε τις με τα URL των αντιστοίχων εικονιδίων σας.

Αποθηκεύετε το css script και το ανεβάζετε κ’ αυτό στο δικό σας Free file hosting and file sharing site

2) Τώρα πηγαίνουμε  Διάταξη >> Επεξεργασία HTML >> Επέκταση προτύπων γραφικών στοιχείων και ψάχνουμε στο πρότυπο μας το  <head> και κολλάμε ακριβώς κατω από το  <head> τον παρακάτω κώδικα:


<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
<script type="text/javascript" src="sdmenu/sdmenu.js">
/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/
</script>

<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>


Αλλάζετε τα sdmenu.css και sdmenu.js με τα URL των αντιστοίχων αρχείων σας και αποθηκεύετε το πρότυπο.

3 ) Ενεργοποιήστε το Slashdot sidebar Menu:

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


<div class="sdmenu" id="my_menu">
<div>
Webmaster tools
<a href="http://bloggertrics.blogspot.com/2009/10/static-image-widget-code-generator.html">Static Image Widget Code Generator</a>
<a href="http://bloggertrics.blogspot.com/2009/10/google-pagerank-button-blog.html"> Google Pagerank Button Generator</a>
<a href="http://bloggertrics.blogspot.com/2009/10/broken-link-checker-tool.html">Broken Link Checker tool</a>
<a href="http://bloggertrics.blogspot.com/2009/09/backlink-checker.html">Backlink Checker</a>
<a href="http://bloggertrics.blogspot.com/2009/09/free-search-engine-ranker.html">FREE Search Engine Ranker!</a>
<a href="http://bloggertrics.blogspot.com/2009/09/free-site-submission.html">FREE Site Submission!</a>
</div>
<div>
Blogger Tips
<a href="http://bloggertrics.blogspot.com/2009/08/blog.html">Πώς να Ρυθμίσετε Blog σας?!!</a>
<a href="http://bloggertrics.blogspot.com/">Link to Us</a>
<a href="http://bloggertrics.blogspot.com/2009/08/template-blogger-blogspot.html">Πως να αλλάξετε το template σας στο Blogger </a>
</div>
<div class="collapsed">
blogger hacks
<a href="http://bloggertrics.blogspot.com/2009/10/css-hover-menu.html">δημιουργήστε μόνο με τη χρήση CSS,ένα όμορφο Hover Menu</a>
<a href="http://bloggertrics.blogspot.com/2009/10/blog-balloon-tooltip.html">Πως να βάλετε στο blog σας ένα όμορφο Balloon tooltip</a>
<a href="http://bloggertrics.blogspot.com/2009/10/lcd-blog-javascript_02.html"> LCD ρολόι για το blog σας χρησιμοποιώντας JavaScript</a>
<a href="http://bloggertrics.blogspot.com/2009/09/scroll-to-top-jquery.html">Προσθέστε " scroll to top " κουμπί χρησιμοποιώντας Jquery</a>
</div>
<div>
Blogger Widgets
<a href="http://bloggertrics.blogspot.com/2009/10/static-image-widget-code-generator.html">Static Image Widget Code Generator Για blogger</a>
<a href="http://bloggertrics.blogspot.com/2009/09/fixed-floating-twitter-follow-me-button.html">Fixed-Floating Twitter Follow Me Button </a>
<a href="http://bloggertrics.blogspot.com/2009/08/top-posts-widget.html">Top Posts Widget</a>
<a href="http://bloggertrics.blogspot.com/2009/08/back-links-e-referrer.html">Αυτόματα back links με το e-Referrer</a>
</div>
</div>


Αλλάζετε τα links με τα δικά σας, κάντε αποθήκευση και ανανεώστε την σελίδα σας για να δείτε το αποτέλεσμα.

Καλή επιτυχία σε όλους !!!

Δείτε το Slashdot Menu σε λειτουργία εδώ :


Αν σου άρεσε το άρθρο, κοινοποίησέ το και στους φίλους σου ! ! !

Share to:

URL Of Post:

HTML Embed Code:

BB Forum Embed Code:



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

  1. Dim.Siozos---SeaSpinning30 Ιανουαρίου 2012 στις 10:47 μ.μ.

    Καλησπέρα. Υπάρχει ένα θέμα με το Google sites.

    Ενώ μου δίνει την επιλογή "view" στα .gif δεν μου τη δίνει στα .css και .js
    Έτσι δεν μπορώ να πάρω το URL για να κάνω το δεύτερο βήμα.
    (Ή μήπως και πάλι τα έκανα θάλασσα?)

    Όπως και να χει, κάνετε εξαιρετική δουλειά και με έχετε βοηθήσει ήδη πολύ.

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

Παρακαλώ, την προσοχή σας ! ! !

* Εάν εντοπίσετε κάποιο πρόβλημα σε κάποια δημοσίευση (μη ενεργός συνδεσμος λ.χ. ή οτιδήποτε άλλο), παρακαλούμε κάντε τον κόπο να γράψετε στα σχόλιά σας, το οποιοδήποτε πρόβλημά σας, ώστε να προβούμε στην άμεση διόρθωσή του.
Επίσης, μπορείτε να αποστείλετε ένα "Ευχαριστώ" προς όσους ασχολήθηκαν & σας προσέφεραν ένα... κομμάτι από τη γνώση τους.

Παράκληση προς τους φίλους αναγνώστες-σχολιαστές:

* Να αποφεύγετε να γράφετε με greekglish γιατί τα σχόλιά σας ΔΕΝ θα γίνονται δεκτά.
* Αποφεύγετε το spamάρισμα στα σχόλια. - Please don't spam me!
* Σε περίπτωση που δεν έχετε καταλάβει κάτι, επικοινωνήστε μαζί μας μέσα από την φόρμα των σχολίων και θα σας απαντήσουμε σε εύλογο χρόνο, γι' αυτό ΜΗΝ καταφεύγετε στη αποστολή e-mail για τις όποιες απορίες σας.
* Χρησιμοποιήστε το Reply (που βρίσκεται κάτω από την εικόνα χρήστη), αν θέλετε να του απευθύνετε το λόγο, ή να απαντήσετε σε προυγούμενο σχόλιο.
* Το μέγιστο όριο χαρακτήρων είναι 4.096
* Τα σχόλιά σας θα δημοσιεύονται μετά τον απαραίτητο έλεγχο.

Σημείωση: Όσοι θέλετε να παίρνετε ειδοποιήσεις για τα σχόλια που κανετε, μην ξεχάσετε να τικάρετε το κουμπί "Να λαμβάνω ειδοποιήσεις"

Σας Ευχαριστούμε για την κατανόηση και την επίσκεψή σας.!

Εγγραφή σε: Σχόλια ανάρτησης (Atom)
 
Top
Blogger Tutorials

Δημιουργήστε τώρα ένα ιδανικό ιστολόγιο, χωρίς να ξοδέψετε ούτε 1€.Περισσότερα από 500 tutorials είναι στη διάθεσή σας.
Οι διαχειριστές του ιστολογίου «Στάλες στο γαλάζιο» σας συμβουλεύουν...
Αποφεύγετε την οποιαδήποτε προσφερόμενη "βοήθεια" από τυχάρπαστους και κατ' επίφαση "web designers", που από ιδιοτέλεια και μόνο προσπαθούν να εκμεταλλευθούν την άγνοιά σας!!!
Με εκτίμηση
«Στάλες στο γαλάζιο»:-)