Σήμερα θα σας δείξουμε πως μπορείτε να περάσετε ένα πολύ όμορφο 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">
<li><a href="http://magakos-tools.blogspot.com/search/label/Anti-Virus%2FAnti-Spyware">Anti-Virus/Anti-Spyware</a></li>
<li><a href="http://magakos-tools.blogspot.com/search/label/Audio%20and%20Video%20Tools">Audio and Video Tools</a></li>
<li><a href="http://magakos-tools.blogspot.com/search/label/Image%20Tools">Image Tools</a></li>
<li><a href="http://magakos-tools.blogspot.com/search/label/System%20Utilities">System Utilities</a></li>
<li><a href="http://magakos-tools.blogspot.com/search/label/Freeware%20Games">Games Freeware</a></li>
<li><a href="http://magakos-tools.blogspot.com/search/label/Web%20tools">Web Tools</a></li>
<li><a href="http://magakos-tools.blogspot.com/search/label/Players">Players</a></li>
<li><a href="http://magakos-tools.blogspot.com/search/label/Misc">Misc</a></li>
</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 Σχόλια...Αφήστε το δικό σας.:
polu kalo thanks! omws exw ena mikro themataki, otan patas panw na anoikseis mia kartela ginetai aytomata ananewsi selidas. mporw na to allaksw ayto?
Μπορείς να το κάνεις άλλα θα έχει κάποιες μικροδιαφορές...
Αντικατέστησε τον κώδικα:
[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.
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.
Ok...Όταν βρω χρόνο κάποια στιγμή ανάλογα και την ροή των θεμάτων θα δημοσιεύσω και οριζόντιο menu...
Δημοσίευση σχολίου
Αφήστε ανώνυμα ή επώνυμα το σχόλιό σας (θετικό-αρνητικό) για αυτό το post ή απλά εκφράστε σχετικές απορίες σας...
HTML tags που μπορείτε να χρησιμοποιήσετε:@Από 19/09/2011 σχόλια που θα γράφονται με Greeklish θα διαγράφονται...
Έντονη γραφή
Πλάγια γραφή
Εικόνα
Κυλιόμενο κείμενο
Σύνδεσμος
Χρωματισμός Κειμένου (Αντικαταστήστε το red με # και τον κωδικό χρώματος που θέλετε)