How to create a cool Button for your website

With this post I will show you how to create a cool button to use in your webpages or anywhere you want for free!
In my I case I wanted to add a download button for the code parts I post here.

Step1:
Go to Cool Text Graphics Generator
And go down to Choose a Button Design and select the button you like

Step2:
Write your text and select the disired fonts and colours.
In my case the text was "DOWNLOAD".
Filled the colours and selected Text Offest Y = -5 (move the text 5 pixels up from the center)
For Mouse over I selected Glow.
Now hit the button "Render Button"
Here you see two images. One for the normal button and one for the mouseover trigger.
Just save/download the first image. e.g. mybutton.png
Mine is

Step3:
Click "Edit this logo" and change Text Offest Y to 0 and click again "Render Button"
Now save the second image. e.g. mybuttonMouseOver.png
Mine is

Step4:
Now we have the two images we need. We just have to upload them somewhere.
There are a lot of free web host and space providers for your files. Just choose who you like.
Let's say you uploaded the two pictures to the address http://myurl/

To display the picture you write the following html:

<img src="http://myurl/mybutton.png" border=none
onmouseover="this.src='http://myurl/mybuttonMouseOver.png';"
onmouseout="this.src='http://myurl/mybutton.png';" />

Step5:
Wait a minute here... We are not done. We just show the picture without any link...
Fortunately is easy to add link to the above picture. Let's say you want a link to http://mylink
then add before the <img...
<a href="http://akomaenablog.blogspot.com"> and at the end close it by adding </a>

That's it! Now you have a cool button linking anywhere you want like my cool Download button!

Tip:
Use alt tag to show some text if picture is not available. e.g.
<img src="http://myurl/mybutton.png" alt="Download The Code" ....

Thank you for reading my posts. Any comments are appreciated

Del.icio.us

How to display source code with line numbers into a Blog

Today I realized that it will be better to have line numbers shown with the parts of code I publish into this blog.
I tried with google but didn't find any "easy" way to do it.
So I figured out my way which I am going to describe here!
First of all I wanted to show line numbers for the code but I also wanted the visitors to be able to copy the code without the line numbers.

As I'm using the <pre> tag to show my code I wrote a JavaScript function which will get the pre tags and change their innerHtml.

Here is the function:

function showLineNumbers() {
 /************************************ 
 * Written by Andreas Papadopoulos   *
 * http://akomaenablog.blogspot.com  *
 * akoma1blog@yahoo.com              *
 ************************************/
  var isIE = navigator.appName.indexOf('Microsoft') != -1;

  var preElems = document.getElementsByTagName('pre');
  if (preElems.length == 0) return;
  for (var i = 0; i < preElems.length; i++) {
    var pre = preElems[i];
    var oldContent = pre.innerHTML;
    oldContent = oldContent.replace(/ /g,"&nbsp;");
    var strs = oldContent.split("<br>");
    if (isIE) {
       strs = oldContent.split("<BR>");
    }

    oldContent = oldContent.substring(4); //remove the 1st <br>
    var newContent = "<table><tr>";
    newContent  = "<td bgcolor='#d4d0c8'>";
    for(var j=1; j < strs.length - 1; j++) {
        newContent += j+".<br>";
    }
    newContent += "</td><td> </td><td>";
    newContent += oldContent;
    newContent += "</td></tr></table>";

    pre.innerHTML = newContent;
  }
}

I saved the above in a file let's say showLineNumbers.js and uploaded somewhere.
Let's explain the code:
Line7: Check if browser is Internet Explorer
Line9: Get all the pre elements
Line13: Get the html inside the pre tag
Line14: Replace all the spaces with the sequence "&nbsp;"
Line14: Remove the first <br> from the inner Html
Line15-18: How many lines are in the pre tag (depending on browser)
Line21-22: Html code to create a table , row and a cell with background colour = #d4d0c8 (You can change it if you don't like it)
Lines23-25: Fill the cell with the numbers 1 till the lines of pre tag
Line26-28: Add the old content in the next cell
Line30: Set the new html code as the code for the tag element

Notice that you can copy the code without the line numbers if you want. You just copy the right cell of the table! That's something I really wanted. Visitors can copy only the code!

After that I had to link the code with my template.
How?
Log in to Blogger - Select Layout and then Edit HTML
Now add before the </head> the line:
<script src='http://..../showLineNumbers.js' type='text/javascript'/>

and now we have to call the function in the showLineNumbers.js so we add before the </body>
<script type='text/javascript'>
showLineNumbers();
</script>

Preview template and if it's ok save it. Remember to backup your template before changes.

Tip1:
If you use pre tag for other purposes too or you use other tag you defined in a css file for your code
then edit the javascript function for your needs.

For example if you defined the tag code in your css file and use it inside a pre block then you add
these lines to the function at line 12:

    var code = pre.getElementsByTagName('code')[0];
    if (code == null) continue; // no code; move on

Tip2:
You can use the tool postable to replace any characters that create problem with html.

Tip3:
I tested the above code with Another Computers Blog and firefox 3.0.10 and Internet Explorer 8 and worked fine.

I hope this will help you. I am waiting for your comments.

Del.icio.us

My First Program in C Programming Language

Programing in C is not that difficult if you know the basic rules.

I'll show you how to create a simple program in C.

First of all open a text editor(kate,kwrite,vi,whatever you want). To compile the file I will show you, you will need to have gcc installed in your pc. If you are on Linux you open the software management,select gcc and install it. If you are on Windows I suggest you use a C developing program like Dev-Cpp witch is free.

If you installed Dev-Cpp on Windows or gcc on linux just do the following.

Open Dev-Cpp or a text editor and create a new empty file and save it as myfirstcprogram.c

Now first you have to include the stdio (standard library for input/output) so write in the first line

#include <stdio.h>

The next step is to write the header of the main function,open brackets {} and write your code.

This is your first program and I'm going to explain it.

#include <stdio.h>
int main(int argc, char *argv[]) {
int a,b;
printf("give number a : ");
scanf("%d",&a);
printf("give number b : ");
scanf("%d",&b);
printf("%d   %d = %d\n",a,b,a b);
exit(0);
}

Now, What does the above code do?

Line 1: include the stdio library(explained above)

Line 2: main function from where your program will start execution

Line 3: we say that we have two integers named a and b

Line 4: print at the desktop the message give number a

Line 5: read the number entered. the function scanf waits until enter is pressed

Line 5 and 6 : do the same as 4 and 5 to read the number b

Line 7: prints the message number a + number b = a+b

Line 8: the program ended successfully

Now that you wrote the above code you have to compile it.

In Linux in the directory you saved the file type in the Konsole

gcc myfirstcprogram.c -o myfirstprogram

in Windows from the Dev-C++ menu select exectute - compile.

In windows open command prompt windows (start - run -cmd - ok)

use cd command to go to the directory you saved it.

In windows type myfirstprogram and press enter

and in Linux type ./myfirstprogram

Now you see the message " give number a : " type a number and press enter and you will see the same message for the number b so do the same again.

After that you will see the result : a + b = sum

Example of output:

give number a : 3

give number b : 4

3 + 4 = 7

That's it. You wrote and compiled your first program in C!!!

Del.icio.us