Log in screen

Does someone know how to make a login screen with a popup?
So now when you press on Log in it goes to another page and then you can login through there.

But now what I want is that a popup opens and a login screen shows like this:
http://codepen.io/GeBuOr/full/mJJmgx/

If you could implement that, that would be great.

Website: Ao1clan.forumfreek.com

Code to download the login screen from codepen: 
http://codepen.io/GeBuOr/share/zip/mJJmgx/

Follow the Tutorial here:  http://www.avacweb.com/t59-5-lgforum-style-login

@Mike, could you help me again, please.
I did the steps, only step 2 I don't understand.
Where do i put the HTML code in?

EDIT:
That tutorial is talking about widgets. I dont want that.
I want it when you press Log in/Register. See pic

You'd put the HTML in either overall header template, or on an announcement so that is active on every page.

When I put it in the overall_header, it doesn't work.
And what you mean with 'announcment'?
Create topic > mark as announcement?
If you meant that I have tried that too, @Mike

Announcements are in General -> Messages -> announcements

Ah, I see.
Now it works only I have a problem now:


The button works, it opens the login screen, yeah, but it covers my toolbar AND it doesn't work on the other Logins.
It works only when you click on that gray button. @Mike

Right, this is the only way that that will work. However, Im currently modifying the forum links on my forum to work with the button popup. Ill let you know once I get it figured out and Ill give you the code.