Kadang kita tertarik ingin memiliki suatu web/blog dengan desain web milik yang lain. Terbersit bisakah memilikinya tanpa harus membeli atau menyuruh orang lain untuk membuatnya, miisal dengan cara meniru script dari web tersebut dengan tampilan list atau galleri dan sejenisnya yang menarik --umpamanya. Bagi yang sudah mahir dalam masalah pemograman atau utak-atik desain web/blog, soal ini tentunya merupakan hal gampang, tapi bagi yang awam atau masih newbie :D) tentu masih bingung.
Tapi sebaiknya kini tak perlu bingung, ada solusi untuk mendapatkan semua itu, dan saya temukan dari internet. Gimana cara praktis meniru dersain situs lain, ikuti caranya ya..
Hal - hal yang perlu di persiapkan :
Notepad bawaan Windows (Kalau saya sih lebih suka pakai Notepad++ karena lebih lengkap)
Mozilla Web browser dan situs yang mau ditiru desainnya (ini wajib)
Install Firebug (ini adalah addons di mozilla untuk melihat source dan komponen halaman web)
Photoshop (untuk merubah beberapa gambar2 yang diambil dari website yg mau di kloning)
Hal - hal yang perlu diketahui :
karena disini kita akan meniru desain suatu website, pastinya kita akan mengambil beberapa komponen/script yang ada pada website yg ingin kita tiru desainnya/kloning, diantaranya :
CSS (Cascading style sheet) ini bahasa style yg paling penting dalam kesuksesan meniru desain websitenya.
Source HTML dari website yang ingin ditiru
Beberapa gambar/icon yang pada website yg ingin ditiru
Javascript (bila diperlukan)
Mari kita mulai
Pastikan kamu sudah menginstall addon Firebug ke Mozilla ya. Sebagai contoh disini saya akan meniru desain dari situs crocweb dot com (yaitu salah satu perusahaan webhosting).
1. Buka crocweb dot com, jika loading selesai tekan Ctrl + U (untuk menampilkan view source). Alhasil, akan terlihat berbagai kode2 HTML, inilah susunan kode HTML dibalik situs crocweb
2. Kedua, copy paste seluruh kode2 tersebut ke notepad, kemudian save as dengan nama "index.html" tanpa tanda kutip.
Sebenarnya sampai disini kita sudah berhasil mengkloning situs crocweb, tapi blm secara keseluruhan.
3. Selanjutnya, cari dan copy file CSSnya, dari view source di gambar 1, terlihat bahwa ada satu kode CSS di baris ke 6. Ini dia link shortcut CSS yg saya maksud.
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
Kemudian, buka CSS tersebut, dengan cara klik "style.css", copy dan paste semua kode CSSnya ke notepad. Simpan dengan nama yg sama "style.css".
4. Setelah itu, kembali ke halaman situs crocweb. Ambil semua gambar yang terdapat pada situs crocweb, dengan cara klik kanan pilih "View Page Info". Akan terlihat banyak sekali daftar/link images, blok semua link tersebut, kemudian Save As
Tentukan folder penyimpanan gambar, buat folder baru dengan nama "images" ini disesuaikan dengan direktori tempat penyimpanan images yang ada di dalam kode CSS. Ingat! folder images ini harus di simpan dalam satu folder dengan index.html dan style.css tadi. Lalu bagaimana cara mengetahui direktori penyimpanan dari file images tersebut? mudah saja, kita bisa lihat pada style.css, contohnya bisa lihat pada gambar dibawah ini
5. Untuk merubah beberapa gambar bawaan dari crocweb kita bisa mengeditnya sendiri melalui Photoshop, misalnya ingin merubah logo, banner, ataupun icon - icon lainnya. Kita anggap disini selesai karena dibuat sesuai kebutuhan masing2.
6. Sampai disini sudah selesai sebenarnya untuk versi simplenya.
Tahap Advanced
Setiap website pastinya memiliki struktur halaman yang berbeda2, untuk itu dibutuhkan kemampuan lebih dalam melewati tahap2 ini, terkadang para web developer atau bahkan kita hanya membutuhkan bagian2 tertentu saja dalam meniru desain suatu website, sehingga tidak perlu meniru semua desain secara keseluruhan.
Untuk itu, disinilah peran Firebug (addons di mozilla) yang memudahkan kita untuk meniru bagian2 tertentu saja dari suatu website. Penasaran seperti apa sih firebug itu dan seberapa besar fungsinya dalam membantu kita mengkloning website? Lihat gambar dibawah
http://www.ads-id.com/forums/clear.gif
Keterangan :
Nomor 1 : Inspect Tool, digunakan untuk menyeleksi suatu objek, tool inilah yang biasa digunakan untuk menyeleksi bagian2 tertentu yang akan kita ambil.
Nomor 2 : Setelah mengklik inspect tool, arahkan mouse/sorot bagian2 yang akan diseleksi
Nomor 3 : hasil dari seleksi tersebut dapat di lihat source HTMLnya. Kode ini bisa kita copy ataupun edit
Nomor 4 : Sama seperti nomor 3, bagian ini adalah source dari CSS website, kita bisa copy dan menerapkan CSS ini pada website kita.
Sedikit tips tentang bagaimana cara menanggapi etika dalam hal yang menyangkut copyright/hak cipta, disini tingkat kemiripan sebisa mungkin dibuat tidak benar2 100% sama (sudah pasti, jika tidak ingin dilaporkan ke pihak berwajib oleh empunya karena melanggar hak cipta kan? :peace:)
Kesimpulan :
Tingkat kesulitan dalam meniru desain suatu website/cloning berbeda - beda, tergantung dari bagaimana struktur website tersebut ditampilkan. Cara diatas bisa Anda terapkan untuk desain website Anda nantinya, tentunya harus ada pemahaman lebih tentang bahasa pemrograman web jika hasilnya ingin memuaskan.
Intinya, bagian2 yang sangat dibutuhkan adalah CSS jika ingin meniru bagian2 tertentu, gunakanlah firebug agar memudahkan proses pengerjaan. Untuk program editing berbagai kode2 pemrograman kamu bisa gunakan Notepad++, search di google sudah pasti ada kok :).
Nah, demikianlah sedikit tutorial dalam meniru desain website, TS juga agak lelah nih menulis artikel panjang ini, semoga bermanfaat :swt2:
Mohon maaf kalau ada kesalahan, mohon koreksinya untuk para master.
*note:
Artikel yang Buanakata (bk) sajikan ini hanya sebagai media pembelajaran saja, dan bukan untuk disalahgunakan. Dan admin buanakata tidak bertanggung jawab apabila tindakan yang digunakan untuk hal-hal yang melanggar hukum.(*)
Tapi sebaiknya kini tak perlu bingung, ada solusi untuk mendapatkan semua itu, dan saya temukan dari internet. Gimana cara praktis meniru dersain situs lain, ikuti caranya ya..
Hal - hal yang perlu di persiapkan :
Notepad bawaan Windows (Kalau saya sih lebih suka pakai Notepad++ karena lebih lengkap)
Mozilla Web browser dan situs yang mau ditiru desainnya (ini wajib)
Install Firebug (ini adalah addons di mozilla untuk melihat source dan komponen halaman web)
Photoshop (untuk merubah beberapa gambar2 yang diambil dari website yg mau di kloning)
Hal - hal yang perlu diketahui :
karena disini kita akan meniru desain suatu website, pastinya kita akan mengambil beberapa komponen/script yang ada pada website yg ingin kita tiru desainnya/kloning, diantaranya :
CSS (Cascading style sheet) ini bahasa style yg paling penting dalam kesuksesan meniru desain websitenya.
Source HTML dari website yang ingin ditiru
Beberapa gambar/icon yang pada website yg ingin ditiru
Javascript (bila diperlukan)
Mari kita mulai
Pastikan kamu sudah menginstall addon Firebug ke Mozilla ya. Sebagai contoh disini saya akan meniru desain dari situs crocweb dot com (yaitu salah satu perusahaan webhosting).
1. Buka crocweb dot com, jika loading selesai tekan Ctrl + U (untuk menampilkan view source). Alhasil, akan terlihat berbagai kode2 HTML, inilah susunan kode HTML dibalik situs crocweb
2. Kedua, copy paste seluruh kode2 tersebut ke notepad, kemudian save as dengan nama "index.html" tanpa tanda kutip.
Sebenarnya sampai disini kita sudah berhasil mengkloning situs crocweb, tapi blm secara keseluruhan.
3. Selanjutnya, cari dan copy file CSSnya, dari view source di gambar 1, terlihat bahwa ada satu kode CSS di baris ke 6. Ini dia link shortcut CSS yg saya maksud.
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
Kemudian, buka CSS tersebut, dengan cara klik "style.css", copy dan paste semua kode CSSnya ke notepad. Simpan dengan nama yg sama "style.css".
4. Setelah itu, kembali ke halaman situs crocweb. Ambil semua gambar yang terdapat pada situs crocweb, dengan cara klik kanan pilih "View Page Info". Akan terlihat banyak sekali daftar/link images, blok semua link tersebut, kemudian Save As
Tentukan folder penyimpanan gambar, buat folder baru dengan nama "images" ini disesuaikan dengan direktori tempat penyimpanan images yang ada di dalam kode CSS. Ingat! folder images ini harus di simpan dalam satu folder dengan index.html dan style.css tadi. Lalu bagaimana cara mengetahui direktori penyimpanan dari file images tersebut? mudah saja, kita bisa lihat pada style.css, contohnya bisa lihat pada gambar dibawah ini
5. Untuk merubah beberapa gambar bawaan dari crocweb kita bisa mengeditnya sendiri melalui Photoshop, misalnya ingin merubah logo, banner, ataupun icon - icon lainnya. Kita anggap disini selesai karena dibuat sesuai kebutuhan masing2.
6. Sampai disini sudah selesai sebenarnya untuk versi simplenya.
Tahap Advanced
Setiap website pastinya memiliki struktur halaman yang berbeda2, untuk itu dibutuhkan kemampuan lebih dalam melewati tahap2 ini, terkadang para web developer atau bahkan kita hanya membutuhkan bagian2 tertentu saja dalam meniru desain suatu website, sehingga tidak perlu meniru semua desain secara keseluruhan.
Untuk itu, disinilah peran Firebug (addons di mozilla) yang memudahkan kita untuk meniru bagian2 tertentu saja dari suatu website. Penasaran seperti apa sih firebug itu dan seberapa besar fungsinya dalam membantu kita mengkloning website? Lihat gambar dibawah
http://www.ads-id.com/forums/clear.gif
Keterangan :
Nomor 1 : Inspect Tool, digunakan untuk menyeleksi suatu objek, tool inilah yang biasa digunakan untuk menyeleksi bagian2 tertentu yang akan kita ambil.
Nomor 2 : Setelah mengklik inspect tool, arahkan mouse/sorot bagian2 yang akan diseleksi
Nomor 3 : hasil dari seleksi tersebut dapat di lihat source HTMLnya. Kode ini bisa kita copy ataupun edit
Nomor 4 : Sama seperti nomor 3, bagian ini adalah source dari CSS website, kita bisa copy dan menerapkan CSS ini pada website kita.
Sedikit tips tentang bagaimana cara menanggapi etika dalam hal yang menyangkut copyright/hak cipta, disini tingkat kemiripan sebisa mungkin dibuat tidak benar2 100% sama (sudah pasti, jika tidak ingin dilaporkan ke pihak berwajib oleh empunya karena melanggar hak cipta kan? :peace:)
Kesimpulan :
Tingkat kesulitan dalam meniru desain suatu website/cloning berbeda - beda, tergantung dari bagaimana struktur website tersebut ditampilkan. Cara diatas bisa Anda terapkan untuk desain website Anda nantinya, tentunya harus ada pemahaman lebih tentang bahasa pemrograman web jika hasilnya ingin memuaskan.
Intinya, bagian2 yang sangat dibutuhkan adalah CSS jika ingin meniru bagian2 tertentu, gunakanlah firebug agar memudahkan proses pengerjaan. Untuk program editing berbagai kode2 pemrograman kamu bisa gunakan Notepad++, search di google sudah pasti ada kok :).
Nah, demikianlah sedikit tutorial dalam meniru desain website, TS juga agak lelah nih menulis artikel panjang ini, semoga bermanfaat :swt2:
Mohon maaf kalau ada kesalahan, mohon koreksinya untuk para master.
*note:
Artikel yang Buanakata (bk) sajikan ini hanya sebagai media pembelajaran saja, dan bukan untuk disalahgunakan. Dan admin buanakata tidak bertanggung jawab apabila tindakan yang digunakan untuk hal-hal yang melanggar hukum.(*)
Tidak ada komentar:
Posting Komentar