FokakMena » admin

Guestbook: JibberBook (Using AJAX)

admin — Mon, 09 May 2011 08:18:37 +0000

JibberBook (A Free AJAX Guestbook)
JibberBook is an easy-to-use, open-source guestbook built with PHP5 and JavaScript. It aims to create a pleasant user experience while giving you much flexibility.

There is an Admin Area, that can help you to delete the spam comments and the other comments that you don’t want.

Demo View: Admin Area
Password: tetcocool

You can Download JibberBook from here: Download JibberBook

I’m oUt oF SerVice :)

admin — Mon, 02 May 2011 12:45:59 +0000

sorry friends, i have a big work this month, i will check out soon ! …..

Nested Side Bar Menu

admin — Wed, 02 Feb 2011 12:04:21 +0000

Nested Side Bar Menu

This is code of the HEAD part:

This is code of the CSS part:

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}

.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

This is code of the HTML part:



Item 1
Item 2
Folder 1
  
  Sub Item 1.1
  Sub Item 1.2
  

Item 3

Folder 2
  
  Sub Item 2.1
  Folder 2.1
    
    Sub Item 2.1.1
    Sub Item 2.1.2
    Sub Item 2.1.3
    Sub Item 2.1.4
    
  


Item 4

Save this IMAGE
Right Click – Save Target As

CSS3 Gradient Menu Buttons

admin — Wed, 02 Feb 2011 11:42:07 +0000

CSS3 Gradient Menu Buttons

This is code of the CSS part:

.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.gradientbuttons li{
display: inline;
margin: 0;
}

.gradientbuttons li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
border:1px solid gray;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}

.gradientbuttons li a:hover{
color: lightyellow;
}

.redtheme li a{
font-size:18px;
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d));
}

.greentheme li a{
font-size:12px;
background: green;
background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690));
}

.blacktheme li a{
font-size:16px;
background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));
}

.orangetheme li a{
font-size:14px;
background: #e55e3f;
background: -moz-linear-gradient(center top, #ecad9a, #e5937c 25%, #cf4c2a 45%, #e5937c 85%, #ecad9a);
background: -webkit-gradient(linear, center top, center bottom, from(#ecad9a), color-stop(25%, #e5937c), color-stop(45%, #cf4c2a), color-stop(85%, #e5937c), to(#ecad9a));
}

This is code of the HTML part:



Home
CSS
PS
JS
TUTORIAL








Home
CSS
PS
JS
TUTORIAL








Home
CSS
PS
JS
TUTORIAL








Home
CSS
PS
JS
TUTORIAL








Home
CSS
PS
JS
TUTORIAL

CSS3 Text Shadows

admin — Wed, 02 Feb 2011 11:16:20 +0000

CSS3 Text Shadows

This is mixed code, HTML & CSS:

Basic Shadow:

FokakMena.com

Blurred Shadow:

FokakMena.com

Shadow with text color set to match closely the document's background color:

FokakMena.com

Inset (aka Letterpress) Text Shadow:

FokakMena.com

Here's a more dramatic example done against a dark background:

FokakMena.com

Multiple, Simultaneous text Shadows:

FokakMena.com

3D looking Text Shadow:

FokakMena.com

Glowing Text Shadow:

FokakMena.com

Slick CSS3 Buttons

admin — Sat, 22 Jan 2011 22:23:44 +0000

Slick CSS3 Buttons

This is the CSS part:

	body { background: #fff; }
	#container { width: 960px; margin: 0 auto; }
	p { margin: 50px 0; }

	.button { color: #fff; padding: 8px 14px 10px; background-color: #bc1815; border: none; margin-right: 25px; position: relative;;
		-webkit-user-select: none;
		-webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
		-moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
		box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		-webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
		-moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
			 }
	.button:active { position: relative; top: 3px;
	    -webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
	    -moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
	    box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
	}
	.button:active:after { content: ""; width: 100%; height: 3px; background: #fff; position: absolute; bottom: -1px; left: 0; }

	.button.blue { background: #22C3EB; }
	.button.green { background: #67b600; }
	.button.orange { background: #da8a00; }
	.button.yellow { background: #b3a400; }
	.button.turquoise { background: #00b1af; }

	.button:last-of-type { margin: 0; }

	.button.gradient {
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.1, rgba(0,0,0,0.3)),
			color-stop(1, rgba(255,255,255,0.2))
		);
		background-image: -moz-linear-gradient(
			center bottom,
			rgba(0,0,0,0.3) 1%,
			rgba(255,255,255,0.2) 100%
		);
		background-image: gradient(
			center bottom,
			rgba(0,0,0,0.3) 1%,
			rgba(255,255,255,0.2) 100%
		);
	}

	.button.gradient:hover {
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.1, rgba(0,0,0,0.45)),
			color-stop(1, rgba(255,255,255,0.3))
		);
		background-image: -moz-linear-gradient(
			center bottom,
			rgba(0,0,0,0.45) 1%,
			rgba(255,255,255,0.3) 100%
		);
		background-image: gradient(
			center bottom,
			rgba(0,0,0,0.45) 1%,
			rgba(255,255,255,0.3) 100%
		);
	}

This is the HTML part:

Press me! Press me! Press me! Press me! Press me! Press me!

With gradient overlay:

Press me! Press me! Press me! Press me! Press me! Press me!

Clock with a black background “LCD”

admin — Sat, 22 Jan 2011 14:00:09 +0000

This is a simple Clock with a black background “LCD”

Copy this code in head area:

Copy this code in body area:

Automatically defrag drives

admin — Fri, 21 Jan 2011 09:48:54 +0000

I found an article on the web the other day about automatically defragmenting drives and thought that I might just as well post a tutorial about it here. Basically, this allows you to defrag any drive by right-clicking on it and choosing “defrag.”

To enable this, open notepad and paste the following code:

; context_defrag.INF

; Adds Defrag to the right click context menu in Windows XP

[version]
signature=”$CHICAGO$”

[DefaultInstall]
AddReg=AddMe

[AddMe]
HKCR,”Drive\Shell\Defrag\command”,,,”DEFRAG.EXE %1″

Next save it as context_defrag.inf onto your desktop or basically anywhere… (Note: be sure to save it as All Files and not Text Documents!)

Right-click on it, choose Install and you’re ready to start defragmenting!

How To Speed Up Your Windows XP

admin — Fri, 21 Jan 2011 06:59:18 +0000

If like mine, your PC is getting slower and slower, there are a number of things you can do to speed it up. You will be surprised how much faster your computer gets after these steps, you won’t need to buy a new one. In addition to following the tips below, it’s a good idea to buy a trusted all-in-one PC optimizer. I would recommend FixCleaner, a Microsoft Certified all-in-one tool which optimizes your computer and hugely improves speed through a number of tasks, including:

cleaning the registry
removing errors
deleting junk files
downloading critical updates
improving browser speed

Please refer to the FixCleaner website at www.fixcleaner.com to see the full list of features. By using a PC maintenance program such as FixCleaner, you can save a load of money from buying a new computer.

Here is what you can do yourself to improve your Windows XP’s performance:

Step 1 : Remove unused software
You probably don’t use half the programs you have installed over time. Removing the ones you don’t need anymore can significantly speed up your Windows XP computer. To remove software:

Go to the Control Panel (Start -> Control Panel) and select Add Or Remove Programs. It may take a while for the list to load if you have many programs installed.
Going through the whole list, select programs you rarely use and uninstall them, one by one.
Restart your computer to see the changes.

Step 2: Use Less Graphics

Do you really need a wallpaper and the fancy animations when opening or closing windows? Disabling animations can increase the speed at which your computer opens and closes windows. To disable window animations:

In Control Panel, go to System and select the Advanced tab. Click the Performance Settings tab.
In the Visual Effects window, disable all the animations in the box, or simply select “Adjust for best performance” as shown on the screenshot on the right. Press Apply.

In the same Performance Options window, choose the Advanced tab, and press the Change button in the Virtual Memory area. From there you can change the size of your paging file – a file on your hard drive that acts as RAM. By increasing the size of your paging file, you can significantly increase speed, but be warned! Using your hard drive as RAM can cause damage to it, so it’s a good idea to buy a better RAM instead.

Step 3: Clean your Registry

You should regularly clean your Windows XP’s Registry to remove old errors that can clog up the registry. To properly clean the Registry, you need a reliable Registry Cleaner software. There are some free ones out there, but I would not be too comfortable with using them. Instead, buy a trusted registry cleaner program so for a little bit of extra cash, you can feel safe. I would recommend FixCleaner, which in addition to cleaning your registry does a number of other things to significantly speed up your Windows XP.

Step 4: Stop unwanted Startup programs

By disabling programs that are set to automatically open when the computer starts, you can greatly speed up your startup process – the time between turning on the computer and being able to fully use it.

Here’s how to disable Startup programs:

Click Run in your Start menu, type msconfig into the box and press enter.
Select the Startup tab.
Go through the list, disabling programs you don’t need by un-ticking the box left of them. Only disable programs you are sure you do not need, and I recommend not touching the ones in the WINDOWS directory.

Step 5: Clean up your hard drive

Performing a disk cleanup can free some hard drive space and also speed up your computer. To use the disk cleanup tool:

Go to Start -> Run and type cleanmgr.exe. Press Enter.
It will probably take a while, especially if you have never used this tool before.

Step 6: Defragment your hard drives

Defragmenting your drives can make a big difference in your computer’s speed. Defragmenting places files physically closer on the hard drive, making it easier and faster for the hard drive to read these files and write new ones. It is a good idea to defragment your hard drive regularily, so it alway stays optimal. I posted a tutorial for an automatic defragment link here: http://www.fokakmena.com/index.php/automatically-defrag-drives/

There are also a number of commercial defragment programs available, which are more powerful than the Windows tool and come with a wide variety of features. If you don’t want to spend any money on this, I would recommend Auslogics Disk Defrag, which is a great, free tool.

Here’s how to defragment your hard drives using the built-in Windows tool:

In My Computer, right click on a drive you want to
defragment.
Click Tools and select Defragment
Click the Analyse button first, which will analyse your
hard drive and see how fragmented it is.
Once the report is finished and the system finds it necessary to perform
a defragmentation, press defrag. This will take a very long
time, but you have to be patient.

CSS Circle Menu

admin — Thu, 20 Jan 2011 20:34:33 +0000

An interesting CSS trick is the creation of “circles”, by using CSS3′s border-radius property that’s set to a very large value: When you do this, the border on each of the four corners of the element merge into a continuous round edge, creating the look of a circle. Using this nifty little trick.

The key as mentioned is just to set the border-radius property to a very large value, at least 50% of both the width and height of the element:

width:100px;
height:100px;
border-radius: 400px; /*really large border radius to create round borders*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;

This technique works in all browsers that support CSS3′s border-radius property, namely, IE9+, FF3+, Safari, Chrome, and Opera 9+.
The CSS:


/*Credits: Dynamic Drive CSS Library */

.circlemenu{
width: 100%;
overflow:hidden;
}

.circlemenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}

.circlemenu li{
display: inline;
margin: 0;
}

.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;
margin: 0;
margin-right:5px; /*right spacing between each link */
width:100px;
height:100px;
border-radius: 400px; /*really large border radius to create round borders*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}

.circlemenu a span{
position:relative;
top:40%;
}

.circlemenu li a:visited{
color: white;
}

.circlemenu a:hover{
background: #a71b15;
}

The HTML:



Link 1
Link 2
Link 3
Link 4
Link 5