Hello everyone, this tutorial will guide you to make your own gadget.
NOTE: It is recommended that you can write and understand HTML scripts. The gadget we will make today is like a link panel.
follow the steps below:

we will make a folder named 'Images' (in this folder the images will be placed).

1. prepare a new webdocument (use a texteditor like notepad)
2. we will write the html code below and make a body of 500px by 210px. (use div)
3. create some links. we will use links to My Documents; My Music; My Pictures and My Videos
Use Documents
Where the ******** is, fill the path in (e.g. C:/Users/User/Documents)
4. Save the document as a webpage and name it index.html
The full code code:
-----------------------------------------------------------------------------------------------
<html>
<head>
<title> Alienware Panel </title>
<link rel='stylesheet' href='style.css'>
</head>
<body scroll="no" unselectable="on">
<div class='base'>
<table border='0' width='480px' align='center' cellspacing='0' cellpadding='0'>
<tr><td rowspan='3'>
[img]images/computer.png[/img]
</td>
<td colspan='2' align='right'>
[img]images/logo.png[/img]

<font class='motto'>by Harvey's Designs</font>

</td>
</tr><tr>
<td width='140px'>
<UL class='list'>[*]COMPUTER [*]RECYCLE BIN [*]DESKTOP [*]HARDDRIVE [*]RECENT ITEMS [/list]
</td>

<td width='140px'>
<UL class='list'>[*]DOCUMENTS [*]MUSIC [*]PICTURES [*]VIDEOS [*]DOWNLOADS [/list]
</td></tr>
<tr>
<td colspan='2' height='20px'> <marquee class='marq'> Alienware Satellite C655 | Windows Alienware 3.1 | 250GB SATA HDD | 2GB DDR3 RAM | 128 MB Video Adapter </marquee> </td>
</tr>
</table>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------



5. Make a external CSS and name it as style.css :

body {
width:500px;
height:210px;
margin:0;
padding:0;
}

.base {
border:5px solid #dddddd;
background:url(images/body.png);
height:210px;
width:500px;
}

.list {
list-style:none;
margin:0 0 0 0;
padding:0;
}
.list li {
padding:3 0 0 0;
}

.link {
font-family:eurostile extended;
color:#dddddd;
font-size:10pt;
text-decoration:none;
letter-spacing:0;
}

.link:hover {
color:#ff0000;
}

.motto {
font-family:eurostile extended;
color:#dddddd;
font-size:9pt;
}

.marq {
color:#ff0000;
font-family:eurostile extended;
font-size:9pt;
}

----------------------------------------------------------------------------------------



6. Windows will look up for an xml file for the gadget.
lets make one. Copy the following code and save it as gadget.xml
----------------------------------------------------------------------------------------

<?xml version="1.0" encoding="utf-8"?>
<gadget>
<name>Alienware Panel Red</name>
<namespace>microsoft.windows</namespace>
<version>1.0.0.0</version>
<author name="Harvey's Designs">
<info url="https://go.microsoft.com/fwlink/?LinkId=124093" text="www.gallery.microsoft.com"/>
<logo src="logo.png"/>
</author>
<copyright>© 2011</copyright>
<description>The fast launching Alienware Panel</description>
<icons>
<icon height="48" width="48" src="icon.png"/>
</icons>
<hosts>
<host name="sidebar">
<autoscaleDPI>true</autoscaleDPI>
<base type="html" apiVersion="1.0.0" src="Index.html"/>
<permissions>full</permissions>
<platform minPlatformVersion="1.0"/>
<defaultImage src="drag.png"/>
</host>
</hosts>
</gadget>
----------------------------------------------------------------------------------------

7. save all the files (index.html / style.css / gadget.xml) and folder (Images in a folder named: 'en-US')
Save this folder in another folder named: 'Yourgadgetname.gadget'
8. Place this folder in C:/program files/windows sidebar/gadgets/
9. Open your gadgets and there you have them.

IF YOU ARE MISSING SOMETHING OR YOU DON'T UNDERSTAND IT DOWNLOAD THE WHOLE GADGET HERE

you can ask me some questions if you don't userstand something. use the same forum to do so(please don't PM me).
you can REP me(by clicking on the green hand) for the work.