Home » » Cara membuat gadget windows 7 dalam HTML

Cara membuat gadget windows 7 dalam HTML



Mungkin pada saat kita melihat desktop Windows 7 pada PC/Laptop, kita melihat beberapa tampilan gadget yang begitu menakjubkan. Trus bagaimana kalau kita membuatnya sendiri? Oke kita mulai membuat gadget tersebut step by step. Gak ada software khusus hanya untuk membuat gadget tersebut, hanya sedikit pengetahuan tentang HTML (sedikit saja lho, gak usah banyak-banyak. 

Tapi kalau punya lebih gak apa-apa sih, malah dianjurkan). Apakah anda termasuk dalam kategori tersebut? Saya yakin anda termasuk dalam kategori diatas, malahan melebihi pengetahuan penulis.


 Oke kita mulai proyek ini, Pertama kita siapkan software yang umum kita pakai yaitu Winzip, Winrar, 7-Zip, etc… yang penting software compress yang menjamur didunia. Kemudian siapkan 2 gambar “icon.ico” ukuran (Ukuran Icon) dan “Gambar_anda.gif/png” ukuran (Terserah).

Selanjutnya, Copas (copy_paste –red) kode dibawah ini pada aplikasi Notepad:

<gadget>
<name>cob</name>
<version>1.0.0.0</version>
<author name="Pentium Setengah">
<info url="mj-hack.blogspot.com" />
<logo src="icon.ico" />
</author>
<icons>
<icon height="42" width="42" src="Applications iTunes.ico" />
</icons>
<copyright>MJ_Hack Corp.</copyright>
<description>Menampilkan Gadget ciptaan kita sendiri</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="cob.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>



Save file tadi yg sudah di buat di notepad dgn nama "Gadget.xml" (Tanpa tanda petik. Ingat nama tidak boleh di ganti..


Kemudian kita tulis lagi atau Copas tulisan dibawah ini:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<title>cob</title>
<style type="text/css">
body
{
margin: 0;
width: 130px;
height: 100px;
font-family: verdana;
font-weight: bold;
font-size: 12;
}
#gadgetContent
{
margin-top: 100px;
width: 190px;
vertical-align: middle;
text-align: center;
}
</style>
<script>
</script>
</head>
<body>
<img src="gambar_anda.png">
</body>
</html>



Save as dengan nama file *.html pada script sebelumnya.
Setelah itu persiapkan icon.ico dan gambar_anda.png, kumpulkan semua file yang kita buat tadi dalam sebuah folder, setelah semua terkumpul dalam satu folder, drag semua file yang didalam folder tersebut, klik kanan -> Send to -> pilih Compressed (zipped) folder.





Setelah selesai di-compress, ubah ekstensi “.zip” menjadi “.gadget” (tanpa tanda petik). Seperti opsi standar ekstensi-ekstensi itu di sembunyikan, trus untuk menampilkan ekstensi itu bisa dengan cara klik Tool –> Folder Options (atau masuk ke control panel, cari Folder Options, klik 2x) –> View –> hilangkan checkmark pada Hide Extensions for known type files.


Setelah itu klik dua kali file yang kita buat tadi. Dan walhasil…… jreng – jreng…… Catatan: Contoh gadget yang kita buat diatas hanya untuk menampilkan gambar gif yang kita punya sebelumnya pada desktop kita. Untuk membuat gadget yang lain (yang lebih menarik –red), anda bisa kembangkan sendiri codenya, tinggal kreatifitas kita aja.

Selamat ngoprek komputer anda. Eh sebentar satu lagi, jadi kesimpulannya semua Style, Skin, Welcome Screen,Tema HP, atau masih banyak lagi, kebanyakan menggunakan *.*zip sebagai dasar pembuatannya, kemudian ekstensi tersebut di ubah sesuai dengan format yang sesuai dengan apa yang mereka (Programmer -red) kehendaki.

0 comments:

Post a Comment

http://i1227.photobucket.com/albums/ee434/jackcrausher/images-2.jpg
WidgetAutomotive hi-tech

Popular Posts

List news


widgeo.net
 
Support : Your Link | Publish to publish | Thank's's for visiting this blog
Copyright © 2013. Publish to publish - All Rights Reserved
Template Created by Creating Website Published by Automotive hi-tech--avenueserenade.blogspot.com
Proudly powered by Blogger