Create Vertical Menu

We have learned how to create horizontal menu before. Now we will try to make a vertical menu. We will make a vertical menu like the image. Ok let's do it

1. Login to blogger then choose "Layout-->Edit HTML"
2. Put the script below before this code ]]></b:skin> or put it in CSS code area.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

You can change the menu color, look at the red text (blue1.gif and blue2.gif). Change it with some color menu below. For example, if you want to choose red color, then the code would be like this :

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Vertical Menu Color :

	blue1.gif blue2.gif
	green1.gif green2.gif
	red1.gif red2.gif
	pink1.gif pink2.gif
	black1.gif black2.gif

3. Save your template.
4. Then go to "Page Elements" menu
5. choose "Add a Gadget -->HTML/JavaScript" the insert the code below.

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Note :
- The red code is the links.
- The Blue code is anchor text.
- If you want to add menu, just copy the blink code and paste it.

6. Then click "Save"

About PuTTy and Tutorials, including a PuTTy Tutorial

After my last post about the powers of PuTTy in conjunction with an SSH-enabled router, I started thinking about tutorials.
I am not a big tutorial-fan, cause I always can’t quite shake the feeling that I’m doing something here I have no particular knowledge of. And depending on what I do, this bothers me. A lot. Take sewing for instance (yes, I do indeed enjoy the fun of sewing, at least as long as it is fun); in the beginning I only did pre-set tutorials. I got to see some achievements, pretty fast as well, and was happy. But the clothings didn’t fit that well, more often than not I had to make corrections to be at least a bit satisfied with my work.
By now, I do most of my sewing patterns myself by taking bits from tutorials and knowledge and putting them together, and it works just fine for me. My point is, tutorials are often brief, giving appealing results in a short time, but often lack some of the necessary theory. Ever happened to you that you did something with a tutorial that just would not work? And after going through the complete text again, looking at all pictures, you realize there’s a small mistake in it, or something you wouldn’t have thought of, which the author took as given?
I guess that’s the reason I don’t want to write tutorials, the danger of missing something (or to cut off too much or something like that) or to have people sitting in front of it thinking “Screw this guy, this just doesn’t work!”. Plus, there are plenty of tutorials out there regarding nearly any topic. Or are there?
But – as the headline suspects – I’m gonna break with this habit for now, and give you a few shots and explanations regarding my former post. No tutorial in a classical sense, but one like I try to write my stuff as well: just concepts and ideas, but this time with pictures.
So let’s get started. Since I’m keeping my connection open most of the time, I’m using PuTTyTray instead of the regular PuTTy or its portable cousin, so some functions described here are not available in other versions.

Here we got the starting screen. Use “Settings from file” (at the bottom of the screen) to save sessions to a file in the PuTTy-directory instead of the windows-registry. An absolute must for all portable users. The first ellipse is where you type your target server’s (or router’s, in our case) IP in. If you can’t remember your IP at any time or get dynamic IPs, make an dyndns-account to save you trouble. Most Routers come with built-in dyndns-support anyway nowadays, sparing you the effort of an update tool. Of course, we want to have “SSH” as a connection type, but it’s per default enabled, so there shouldn’t be any problems.

Ah, that one took me awhile to figure out. Or to be more precise: I was swearing and cursing about the problem I encountered and by accident managed to find a solution in the settings for my terminal, which struck me to be very odd. So I wanna share my insights. The option I circled changes the character send to the server by pressing the backspace-key. Since the routers I mentioned all use some sort of linux, you might wanna change the option to the right one, “Control+? (127)”. Without that enabled, my fritzbox would only type “[^” or something like that instead of deleting the last character. Very annoying.

That one is one of the PuTTyTray-only functions I mentioned that I don’t wanna miss ever again, regardless how more convenient PuTTyPortable sometimes might be for my purposes. Leave the option on “normal” to start it in normal terminal mode. I prefer that one, since I want to use password-authentication. No use minimizing the window to tray on start, only to have to bring it back up, type the password in and minimize it again. “Always” and “Never” produced funny behaviors that I couldn’t get a hold of, but, if you wanna guess and like riddles, go and give it a try.
And oh, the “Accept single-click…”-option is nice as well, if you use this kind of restoring in all of your programs. Mixing double-click and single-click is definitely not a good idea, at least not for me.

Oh, yeah. Not that important, I gotta admit. But it would allow you to pick a username that’s hard to remember (please don’t say anything about the “root” I typed in there.. it is for demonstration purposes only!), and even harder to guess. When using password authentication, I only have to type in my password and not my username. spares me ~1.2 seconds. yay!

Painting Frenzy!! Okay, now here we go. This tab is the mekka for all your needs, the holy grail of port forwarding.
The first option I circled is recommended to use, but it is not without risks (security, mostly). Some protocols may need this option to function properly though. When you look at the entries 1, 2 and 3 they all have a source port (the first column) and a destination (the second one), like my arrows – done extremely skilled, if I may say so – try to show you.
1.) This is a standard port forwarding like used by any program. I specified my source port, which is 5700 (always select “local” as a type if unsure for the others and their doings), and a destination that is usually an IP plus a port. As you can see or at least guess, it’s for VNC (port 5900), and it’s for a fictional desktop in my home network.
2.) That one I use for the emulation of a vpn. Remember the virtual network adapter I had to create? I gave it the very innovative IP 10.0.0.1, Windows File Sharing services use port 139, so its 10.0.0.1:139 for source. The destination is my main network-hard drive with the very same port. If you specify an IP for the source port, the port is only forwarded if the accordant network adapter is used. In case of the file sharing, I had to do this, since I wanted to work both ways at the same time – local file sharing and file sharing over SSH. If you need only one of both, feel free to just forward the port without a source IP.
3.) This one is pretty much like the first, but it points to a virtual network card I created on my Router. I did so because it is forbidden to map any ports directly to the routers own IP, but mapping to the virtual NIC is allowed. Here, I’m forwarding localhost’s port 80 (do NOT do this when running a webserver or any software using port 80) to the virtual NIC’s port 80, so I can display my router’s status page in my browser here at work, taking a look at phone lists and the like. I also could’ve made a port forwarding like “6666 192.168.178.253:80″, to view my routers page then, I would have to connect to “localhost:6666″ in my browser, as well as for connecting my VNC, I have to connect to “<dyndns-address>:5700″ instead of just “<dyndns-address>”.
Be careful with the Connection -> Proxy-Tab though. You don’t have to specify anything here for PuTTy to provide the SOCKS-proxy I mentioned. This is only necessary if PuTTy is forced (or wanted) to use a proxy to connect to the target net (usually, the internet) itself, like when using PuTTy over TOR for instance, which is by the way in my opinion the most comfortable way of using TOR there is.

Oh my, I almost forgot that one.. this is crucial when keeping your connection up and running for a long time. If the connection gets broken there is a chance that your server-component remains active and running on the router, and if your reconnect, you got a second one running, and a third one if that happens again.. you catch my drift. I chose a value of 60 seconds, and it works for me. It was a more or less random choice though, other values might do equally fine.
Okay. I admit, that didn’t hurt that much at all. Maybe I will just… keep posting funny daubed pictures about programs I use…

What is Command Prompt

 
The Command Prompt program allows you to work in an environment that looks more like a traditional operating system as opposed to the icon based Windows environment. In Command Prompt, you will use your keyboard. You won't use your mouse at all. Command Prompt works at a lower level than Windows. This means that you will have more control over the machine. The disadvantage is that it is less user-friendly.
You will need the command prompt in COS 126 to compile and execute your Java programs. Learning the Command Prompt also provides a gradual transition to Unix and Linux systems, which are prevalent in science, engineering, and industry.
To launch Command Prompt select Start -> Run and type cmd in the box.
The Command Prompt shows up as a black terminal window. The command prompt should look something like:

C:\>

This is where you type commands. The boldface type below (that follows the command prompt) is what you should type as you work through this tutorial. Windows does not care if you use upper or lower case. That means that command cd is the same as CD. It also means that, in Windows, file HelloWorld.java is the same as helloworld.java. This is NOT true in the system to which you will be submitting your files. Be very careful!!!

Some Useful Commands

• javac:  To compile a Java program, use the javac command. Your program should compile without any errors or warnings (or if there are warnings be absolutely sure that they do not indicate a flaw in your program). 

  C:\>javac HelloWorld.java

• java:  To run a successfully compiled Java program, use the java command.

  C:\>java HelloWorld

• more:  Display the contents of a file one screenful at a time.

  C:\>more HelloWorld.java
  

• exit:  Exit the Command Prompt program and close the terminal window.

  C:\>exit
  

Working with Files and Directories

You can also use Command Prompt commands to organize files into a directory hierarchy. These commands are equivalent to corresponding commands that you access via the Windows point-and-click interface. It is useful to be familiar with both interfaces for managing files.

• dir:  To view the contents of a directory, type dir. This command will list all the files and directories within the current directory. It is analogous to clicking on a Windows folder to see what's inside.

  C:\> dir
   Volume in drive C has no label.
   Volume Serial Number is C8C7-BDCD
  
   Directory of C:\
  
  10/26/2004  01:36 PM         0 AUTOEXEC.BAT
  10/26/2004  01:36 PM         0 CONFIG.SYS
  02/10/2005  01:36 PM       126 HelloWorld.java
  12/09/2004  12:11 AM    DIR    Documents and Settings
  02/10/2005  08:59 PM    DIR    introcs
  11/02/2004  08:31 PM    DIR    j2sdk1.4.2_06
  12/29/2004  07:15 PM    DIR    Program Files
  01/13/2005  07:33 AM    DIR    WINDOWS
                 3 File(s)            126 bytes
                 5 Dir(s)  32,551,940,096 bytes free 

  There are 7 items in this directory. Some of them are files, like HelloWorld.java. Others are directories, like introcs.
• cd:   It is frequently useful to know in which directory you are currently working. In order to find out, type cd at the command prompt.

  C:\> cd
  C:\

  To change directories, use the cd command with the name of a directory.

  C:\> cd introcs

  Now, the command prompt will be:
  

  C:\introcs> 

  To see what is in this directory type:
  

  C:\introcs> dir 
   Volume in drive C has no label.
   Volume Serial Number is C8C7-BDCD
  
   Directory of C:\introcs
  
  02/10/2005  08:59 PM    DIR            .
  02/10/2005  08:59 PM    DIR            ..
  02/03/2005  11:53 PM               126 HelloWorld.java
  01/17/2005  01:16 AM               256 readme.txt
                 2 File(s)            382 bytes 
                 2 Dir(s)

  To return to the previous directory, use the cd command, but this time followed by a space and two periods.
  

  C:\introcs> cd ..
  C:\> 
  

• mkdir: To create a new directory, use the command mkdir. The following command creates a directory named hello, which you can use to to store all of your files associated with the Hello World assignment.

  C:\introcs> mkdir hello

  To see that it actually worked, use the dir command.
  

  C:\introcs> dir 
   Volume in drive C has no label.
   Volume Serial Number is C8C7-BDCD
  
   Directory of C:\introcs
  
  02/10/2005  08:59 PM    DIR            .
  02/10/2005  08:59 PM    DIR            ..
  02/11/2005  02:53 PM    DIR            hello
  02/03/2005  11:53 PM               126 HelloWorld.java
  01/17/2005  01:16 AM               256 readme.txt
                 2 File(s)            382 bytes
                 3 Dir(s)
  

• move: Now, move the two files HelloWorld.java and readme.txt into the hello directory using the move command.

  C:\introcs> move HelloWorld.java hello
  C:\introcs> move readme.txt hello
  C:\introcs> dir
   Volume in drive C has no label.
   Volume Serial Number is C8C7-BDCD
  
   Directory of C:\introcs
  
  02/10/2005  08:59 PM    DIR            .
  02/10/2005  08:59 PM    DIR            ..
  02/11/2005  02:53 PM    DIR            hello
                 0 File(s)              0 bytes
                 3 Dir(s)
  

  The two files are no longer visible from the current directory. To access the two files, change directories with the cd command. Then use the dir command to see what is in this new directory.
  

  C:\introcs> cd hello
  C:\introcs\hello> dir
   Volume in drive C has no label.
   Volume Serial Number is C8C7-BDCD
  
   Directory of C:\introcs\hello
  
  02/10/2005  08:59 PM    DIR            .
  02/10/2005  08:59 PM    DIR            ..
  02/03/2005  11:53 PM               126 HelloWorld.java
  01/17/2005  01:16 AM               256 readme.txt
                 2 File(s)            382 bytes
                 2 Dir(s)
  

  You can also use move to rename a file. Simply specify a new filename instead of a directory name. Suppose you accidentally messed up the upper and lower case and had saved HelloWorld.java as helloworld.java. Use two move commands to fix it.
  

  C:\introcs\hello> dir
   Volume in drive C has no label.
   Volume Serial Number is C8C7-BDCD
  
   Directory of C:\introcs\hello
  
  02/10/2005  08:59 PM    DIR            .
  02/10/2005  08:59 PM    DIR            ..
  02/03/2005  11:53 PM               126 helloworld.java
  01/17/2005  01:16 AM               256 readme.txt
                 2 File(s)            382 bytes
                 2 Dir(s)
  
  C:\introcs\hello> move helloworld.java temp.java
  C:\introcs\hello> move temp.java HelloWorld.java
  C:\introcs\hello> dir
   Volume in drive C has no label.
   Volume Serial Number is C8C7-BDCD
  
   Directory of C:\introcs\hello
  
  02/10/2005  08:59 PM    DIR            .
  02/10/2005  08:59 PM    DIR            ..
  02/03/2005  11:53 PM               126 HelloWorld.java
  01/17/2005  01:16 AM               256 readme.txt
                 2 File(s)            382 bytes
                 2 Dir(s)
  
  

  It takes two moves because Windows won't let you move to an already existing filename and, to Windows, helloworld.java is the same as HelloWorld.java.
• copy:  To make a copy of a file, use the copy command. The following command creates a backup copy of our HelloWorld.java program. This is especially useful when you modify a working program, but might want to revert back to the original version if your modifications don't succeed. 

  C:\introcs\hello> copy HelloWorld.java HelloWorld.bak
  C:\introcs\hello> dir 
   Volume in drive C has no label.
   Volume Serial Number is C8C7-BDCD
  
   Directory of C:\introcs\hello
  
  02/10/2005  08:59 PM    DIR            .
  02/10/2005  08:59 PM    DIR            ..
  02/03/2005  11:53 PM               126 HelloWorld.java
  01/17/2005  01:16 AM               256 readme.txt
                 2 File(s)            382 bytes
                 3 Dir(s)
  

• del:  Subsequently, you might want to clean up useless files. The del command deletes a file. 

  C:\introcs\hello> del HelloWorld.bak
  C:\introcs\hello> dir 
   Volume in drive C has no label.
   Volume Serial Number is C8C7-BDCD
  
   Directory of C:\introcs
  
  02/10/2005  08:59 PM    DIR            .
  02/10/2005  08:59 PM    DIR            ..
  02/03/2005  11:53 PM               126 HelloWorld.java
  01/17/2005  01:16 AM               256 readme.txt
                 2 File(s)            382 bytes
                 3 Dir(s)
  

  WARNING: When you revise a file in jEdit, the jEdit program will automatically save a backup copy of your original file in the same directory. The name of the backup file will be the name of the original file with a ~ at the end. When you submit your program be careful to submit HelloWorld.java and not HelloWorld.java~ which is an old version of the file and has the wrong name.
  
• wildcards:  You can also apply the copy, del, and move commands to several files (or directories) at once. To create a new directory called loops, and copy all of the files in the hello directory C:\introcs\hello\ into this newly created directory type:

  C:\introcs> mkdir loops
  C:\introcs> copy c:\introcs\hello\* loops

  Here the * matches all files in the C:\introcs\hello directory. It copies them to your newly created loops directory.

Redirection

Two important abstractions in Command Prompt are standard input and standard output. By default standard input is your keyboard, and standard output is your computer screen. For example, in Assignment 1, we write a program CenterofMass.java that reads input using StdIn.java and writes output using System.out.println(). To run our program, the user types the command "java CenterofMass" and enters double type values in triplets: xposition yposition mass from the keyboard. The results appear in the terminal window.

C:\introcs\loops> java CenterofMass
0 0 10
1 1 10
0.5  0.5  20

• Redirecting standard input. As an alternative, we can create a file that consists of the same six input numbers. Using a text editor (like jEdit), create a file named input.txt, and type in the six numbers. After saving the file in the loops directory, type the following command to verify that you entered the integers correctly:

  C:\introcs\loops> more input.txt
  0 0 10
  1 1 10
  

  Then to read the integers from the file instead of the keyboard, we use the redirection symbol "<".
  

  C:\introcs\loops> java CenterofMass < input.txt
  0.5  0.5  20

  This produces exactly the same result as if the user had typed the numbers, except that the user has no opportunity to enter numbers from the keyboard. This is especially useful for two reasons. First, if there are lots of input values (there are over 700 inputs for Assignment 2) it would be tedious to retype them in each time we run our program.  Second, it allows programs to be automated, without waiting for user interaction. This means that your grader can process your homework programs without typing in the input values by hand each time.
  
• Redirecting standard output. Similarly it is possible to redirect the output to a file instead of to the screen. Continuing with the same example, if we want to save the output permanently, we can use the output redirection symbol '>'. 

  C:\introcs\loops> java CenterofMass > output.txt
  0 0 10
  1 1 10

  The user still types in the input values from the keyboard, but instead of sending the output to the screen, it is sent to the file named output.txt. Note that all printf output is sent to the file, even the statement that tells the user what to do. Be careful, if the file output.txt already exists, it will be overwritten. (To append use '>>' instead.)

  phoenix.Princeton.EDU% more output.txt

• Redirecting standard input and standard output. It is often useful to use both redirection operations simultaneously.

  C:\introcs\loops> java CenterofMass < input.txt > output2.txt 

  After executing this command, no output appears on the screen, but the file output2.txt now contains exactly the same data as output.txt above.

 

Piping

Another useful abstraction is piping.  Piping is when the output of one program is used as the input of another program. For example, suppose we want to view the output of a program, but there is so much that it whizzes by on the screen too fast to read. (The program RandInts.java prints out a bunch of random integers.) One possible way to accomplish this is to type the following two commands.

C:\introcs> java RandInts > temp.txt
C:\introcs> more < temp.txt

Note that more will work by redirecting the file temp.txt to standard input (as is done here) or by simply using the filename (as is done at the beginning of the document). Instead, we could do this in one line using the pipe symbol '|'

C:\introcs> java RandInts | more