Slide-In Menu Bar

Ένα ακόμη τρόπο θα σας δείξω σήμερα για το πως μπορείτε να περάσετε ένα ξεχωριστό menu στο blog σας μερικός κρυφό αυτήν την φορά (θα εμφανίζεται μόνο ένα μικρό πλαίσιο αριστερά) και θα εμφανίζεται μόνο όταν περάσετε το ποντίκι από πάνω του (mouseover)...
Μπορείτε να δείτε ένα live demo στο test-blog μου εδώ http://freeware-tools-guides.blogspot.com


Για να τo περάσετε θα πρέπει να κάνετε τα εξής:
1) Σύνδεση στον λογαριασμό σας από το blogger.com
2) [color=blue]Διάταξη>Επεξεργασία html.
Ψάχνετε (με Ctrl + F) να βρείτε στον κώδικα το και από κάτω του προσθέτετε τον παρακάτω κώδικα:

<style>

<!--

#slidemenubar, #slidemenubar2{

position:absolute;

border:1.5px solid black;

background-color:#F2F2F2;

layer-background-color:#F2F2F2;

font:bold 12px Verdana;

line-height:20px;

}

-->

</style>

3) Πατήστε Αποθήκευση...
4)Στην συνέχεια πηγαίνουμε: Διάταξη>Προσθήκη gadget>HTML/Javascript
5) Επικολλήστε εκεί μέσα τον παρακάτω κώδικα:

<script language="JavaScript1.2">

var slidemenu_width='160px' //specify width of menu (in pixels)

var slidemenu_reveal='12px' //specify amount that menu should protrude initially

var slidemenu_top='200px' //specify vertical offset of menu on page

var ns4=document.layers?1:0

var ie4=document.all

var ns6=document.getElementById&&!document.all?1:0

if (ie4||ns6)

document.write('<div id="slidemenubar2" style="left:'+((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)+'px; top:'+slidemenu_top+'; width:'+slidemenu_width+'" onMouseover="pull()" onMouseout="draw()">')

else if (ns4){

document.write('<style>\n#slidemenubar{\nwidth:'+slidemenu_width+';}\n<\/style>\n')

document.write('<layer id="slidemenubar" left=0 top='+slidemenu_top+' width='+slidemenu_width+' onMouseover="pull()" onMouseout="draw()" visibility=hide>')

}

var sitems=new Array()

///////////Edit below/////////////////////////////////

//siteitems[x]=["Item Text", "Optional URL associated with text"]

sitems[0]=["<big><font face='Arial'>Περιεχόμενα</font></big>", ""]

sitems[1]=["Αρχική σελίδα", "http://www.freeware-tools.net/"]

sitems[2]=["Forum", "http://www.freeware-tools.com"]

sitems[3]=["Λίστα αρχείων", "http://magakos-tools.blogspot.com/2009/02/download-httprapidshare.html"]

sitems[4]=["Audio and Video Tools", "http://magakos-tools.blogspot.com/search/label/Audio%20and%20Video%20Tools"]

sitems[5]=["Image Tools", "http://magakos-tools.blogspot.com/search/label/Image%20Tools"]

sitems[6]=["Anti-Virus/Anti-Spyware", "http://magakos-tools.blogspot.com/search/label/Anti-Virus%2FAnti-Spyware"]

sitems[7]=["System Utilities", "http://magakos-tools.blogspot.com/search/label/System%20Utilities"]

sitems[8]=["Web Tools", "http://magakos-tools.blogspot.com/search/label/Web%20tools"]

sitems[9]=["Games Freeware", "http://magakos-tools.blogspot.com/search/label/Freeware%20Games"]

sitems[10]=["Misc", "http://magakos-tools.blogspot.com/search/label/Misc"]

//If you want the links to load in another frame/window, specify name of target (ie: target="_new")

var target=""

/////////////////////////////////////////////////////////

if (ie4||ns4||ns6){

for (i=0;i<sitems.length;i++){

if (sitems[i][1])

document.write('<a href="'+sitems[i][1]+'" target="'+target+'">')

document.write(sitems[i][0])

if (sitems[i][1])

document.write('</a>')

document.write('<br>\n')

}

}

function regenerate(){

window.location.reload()

}

function regenerate2(){

if (ns4){

document.slidemenubar.left=((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)

document.slidemenubar.visibility="show"

setTimeout("window.onresize=regenerate",400)

}

}

window.onload=regenerate2

rightboundary=0

leftboundary=(parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1

if (ie4||ns6){

document.write('</div>')

themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style

}

else if (ns4){

document.write('</layer>')

themenu=document.layers.slidemenubar

}

function pull(){

if (window.drawit)

clearInterval(drawit)

pullit=setInterval("pullengine()",10)

}

function draw(){

clearInterval(pullit)

drawit=setInterval("drawengine()",10)

}

function pullengine(){

if ((ie4||ns6)&&parseInt(themenu.left)<rightboundary)

themenu.left=parseInt(themenu.left)+10+"px"

else if(ns4&&themenu.left<rightboundary)

themenu.left+=10

else if (window.pullit){

themenu.left=0

clearInterval(pullit)

}

}

function drawengine(){

if ((ie4||ns6)&&parseInt(themenu.left)>leftboundary)

themenu.left=parseInt(themenu.left)-10+"px"

else if(ns4&&themenu.left>leftboundary)

themenu.left-=10

else if (window.drawit){

themenu.left=leftboundary

clearInterval(drawit)

}

}

</script>

Αποθηκεύστε και είναι έτοιμο...To menu θα εμφανίζεται αριστερά μόλις περνάτε το ποντίκι πάνω από ένα μικρό πλαίσιο που προεξέχει ενώ θα χάνετε μόλις απομακρύνετε το ποντίκι από εκεί...
Ωστόσο μπορείτε να κάνετε και κάποιες αλλαγές ώστε να το φέρετε στα μέτρα σας:

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

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