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

Sidebar Menu


5.2.09 | ,

Σήμερα θα σας δείξουμε πως μπορείτε να περάσετε ένα πολύ όμορφο menu στο blog σας δίνοντας του έτσι κάτι ξεχωριστό από τα συνηθισμένα...

Για να τo περάσετε κάνετε τα εξής:



1) Σύνδεση στον λογαριασμό σας από το blogger.com
2) Διάταξη>Στοιχεία σελίδας>Προσθήκη gadget>HTML/Javascript
3) Επικολλήστε εκεί μέσα τον παρακάτω κώδικα:


<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://magakos.googlecode.com/files/ddaccordion.js">


</script>

<script type="text/javascript">

//Initialize Arrow Side Menu:
ddaccordion.init({
headerclass: "menuheaders", //Shared CSS class name of headers group
contentclass: "menucontents", //Shared CSS class name of contents group
revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["unselected", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: 500, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

</script>

<style type="text/css">

.arrowsidemenu{
width: 190px; /*width of menu*/
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
}

.arrowsidemenu div a{ /*header bar links*/
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
display: block;
background: transparent url(http://i43.tinypic.com/3522p34.gif) 100% 0;
height: 24px; /*Set to height of bg image-padding within link (ie: 32px - 4px - 4px)*/
padding: 4px 0 4px 10px;
line-height: 24px; /*Set line-height of bg image-padding within link (ie: 32px - 4px - 4px)*/
text-decoration: none;
}

.arrowsidemenu div a:link, .arrowsidemenu div a:visited{
color: #26370A;
}

.arrowsidemenu div a:hover{
background-position: 100% -32px;
}

.arrowsidemenu div.unselected a{ /*header that's currently not selected*/
color: #6F3700;
}


.arrowsidemenu div.selected a{ /*header that's currently selected*/
color: blue;
background-position: 100% -64px !important;
}

.arrowsidemenu ul{
list-style-type: none;
margin: 0;
padding: 0;
}

.arrowsidemenu ul li{
border-bottom: 1px solid #a1c67b;
}


.arrowsidemenu ul li a{ /*sub menu links*/
display: block;
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: black;
padding: 5px 0;
padding-left: 10px;
border-left: 10px double #a1c67b;
}

.arrowsidemenu ul li a:hover{
background: #d5e5c1;
}

</style>



<div class="arrowsidemenu">

<div><a href="http://www.freeware-tools.net/" title="Αρχική Σελίδα">Home</a></div>
<div class="menuheaders"><a href="" title="Categories">Categories</a></div>
<ul class="menucontents">
</ul>
<div><a href="http://www.freeware-tools.com">Forums</a></div>
<div><a href="http://magakos-tools.blogspot.com/2009/02/download-httprapidshare.html" title="Λίστα αρχείων">Λίστα αρχείων</div>
<div><a href="http://www.blogger.com/home" title="Log-in">Webmaster Log-in</a></div>

</div>




</!doctype>


Αποθηκεύστε και είναι έτοιμο...Μπορείτε να περάσετε τα δικά σας λινκ στα σημεία του κώδικα που χρωμάτισα με κόκκινο και να αλλάξετε τα url με τα δικά σας ενώ όσοι έχετε blog με μαύρο φόντο θα πρέπει να αλλάξετε στον κώδικα το σημείο που έχω χρωματίσει με πράσινο "color: black;" σε color: white; για να φαίνονται οι σύνδεσμοι...


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


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

Traveler είπε...

polu kalo thanks! omws exw ena mikro themataki, otan patas panw na anoikseis mia kartela ginetai aytomata ananewsi selidas. mporw na to allaksw ayto?

magakos είπε...

Μπορείς να το κάνεις άλλα θα έχει κάποιες μικροδιαφορές...

Αντικατέστησε τον κώδικα:
[im]http://1.bp.blogspot.com/-dUwzF-lR2Vc/Tbg2H03rtrI/AAAAAAAAB5c/1EuO65Lhuf8/s1600/code%2B1.PNG[/im]

Με τον κώδικα:
[im]http://1.bp.blogspot.com/-HvW_FowJaS8/TbhBTmYgHeI/AAAAAAAAB5s/KT41euA2Np4/s1600/code2.PNG[/im]

Σημ. Tους κώδικες τους δημοσιεύω σε εικόνα για να εμφανιστούν σωστά στα σχόλια...Αν δυσκολεύεσαι να τους αντιγράψεις πες μου να τους ανεβάσω σε text.

Traveler είπε...

se eyxaristw polu gia tin apantisi, ontws twra den ginetai ananewsi selidas omws allakse to menu kapws. den einai xwrismenes oi katigories, mpainoun ola se ena koutaki kai den vgazei to xeraki tis epilogis. mipws mporeis na mou peis pws na valw ena orizontio menu opws to diko sou pou vlepw pio panw. einai poly wraio ki opws vlepw doulevei mia xara. eixa vrei ena orizontio menu allou alla eixe provlima, den anoigan oi ypokatigories.
eyxaristw kai pali.

magakos είπε...

Ok...Όταν βρω χρόνο κάποια στιγμή ανάλογα και την ροή των θεμάτων θα δημοσιεύσω και οριζόντιο menu...

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

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

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

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

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

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