Halo Guest, pastikan Anda selalu menaati peraturan forum sebelum mengirimkan post atau thread baru.

[SHARE] Teknik Kloning : Cara Meniru Desain Suatu Website

Discussion in 'Desain Web & Grafis' started by Aji Zakaria, Sep 22, 2012.

Tags:

Page 21 of 22

PopulerWeb Super Hero

Joined:

Jan 1, 2017

Messages:

784

Likes Received:

46

jejak

PopulerWeb, Jan 12, 2017

#401
Rais im Newbie

Joined:

Mar 27, 2017

Messages:

44

Likes Received:

4

ar_nardi said: ↑

wah.wah.. mantap, ninggalin jejak dulu sebelum magriban
Click to expand...

Bookmark dulu ahhh

Sent from my iPhone using Tapatalk

Rais im, Apr 1, 2017

#402
piesang Ads.id Fan

Joined:

Nov 7, 2011

Messages:

177

Likes Received:

4

Location:

0274

Ijin bookmark..bermanfaat nihh

piesang, Apr 1, 2017

#403
hendriliuu Ads.id Fan

Joined:

Jun 18, 2015

Messages:

224

Likes Received:

14

Mantap gan, kalau sering latihan meniru lama2 jadi terbiasa dan paham struktur pembuatan tampilan web yang bagus

Sent from my Mi 4i using Tapatalk

hendriliuu, Apr 5, 2017

#404
Fikrismea Ads.id Fan

Joined:

Jul 5, 2014

Messages:

159

Likes Received:

8

Location:

Jambi

hendriliuu said: ↑

Mantap gan, kalau sering latihan meniru lama2 jadi terbiasa dan paham struktur pembuatan tampilan web yang bagus

Sent from my Mi 4i using Tapatalk
Click to expand...

setuju banget sama agan ini

Fikrismea, Apr 20, 2017

#405
arunstop Newbie

Joined:

Oct 1, 2017

Messages:

14

Likes Received:

1

adakah kemungkinan si pembuat website asli yang kita kloning tahu dan kita kena copyright, padahal designnya udah diubah ?

arunstop, Oct 3, 2017

#406
Muhamad Irfan Zidni Newbie

Joined:

Oct 2, 2017

Messages:

15

Likes Received:

1
Aji Zakaria said: ↑

Ingin berbagi ilmu yg saya dapat dari kakak saya ini, sebelumnya mohon maaf kalau salah kamar, karena saya ingin share yang berhubungan dengan desain, jadi saya post saja di subforum Desain Web & Grafis. Sebenarnya rahasia ini cukup banyak perjual belikan di internet lho, karena memang tekniknya yang bisa dibilang susah2 gampang. Bahkan saya search di google pun blm menemukan tutorial yg jelas tentang kloning website ini.

Pernah terpikir tidak kalau kamu suka dengan desain suatu website dan ingin mempunyai desain yang seperti itu untuk digunakan sebagai desain blog/website kamu? Misalnya seperti ini, kamu sangat suka dengan desainnya situs facebook, dan kamu sangat ingin meniru desainnya buat website/blog kamu, tetapi bingung bagaimana caranya?

Nah, untuk yang sudah mahir dalam pemrograman web mungkin sangat mudah untuk meniru desain tersebut, namun buat yang belum tau atau masih newbie pastinya akan sangat kebingungan dan penasaran kan (pengalaman sy sebagai newbie ).

Tapi sekarang saya sudah gak bingung lagi karena saya sudah tau sedikit lah caranya , ya intinya saya ingin share aja bagaimana cara meniru desain situs lain buat kawan2 yg blm tau gimana caranya. Baiklah, langsung aja ke tutorialnya.

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)

Getting started (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

View attachment 25699

2. Kedua, copy paste seluruh kode2 tersebut ke notepad, kemudian save as dengan nama "index.html" tanpa tanda kutip

View attachment 25700

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

HTML:

<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

View attachment 25701

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

View attachment 25702

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, hasilnya? Lihat dibawah

Website asli

View attachment 25703

Website tiruan/hasil kloning

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

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.

Nah itu dia hasil dari teknik kloning versi saya. 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? )

Nah, untuk media pembelajaran, saya sediakan berkas file/ contoh dari hasil kloning tersebut, meskipun belum benar2 selesai semuanya, silahkan unduh disini

Code:

Mohon maaf link download saya tutup untuk mencegah hal- hal yg tidak diinginkan

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

Mohon maaf kalau ada kesalahan, mohon koreksinya untuk para master. Atau jika ada yang ingin tanya2 silahkan saja reply di thread ini, insyallah akan saya jawab jika saya bisa. Trims

Tambahan :
tujuan artikel ini hanya sebagai media pembelajaran saja, dan bukan untuk disalahgunakan. TS tidak bertanggung jawab apabila file atau berkas yang diunduh digunakan untuk hal - hal yang melanggar hukum.

Ada juga yg request tentang bagaimana cara convert HTML ke WP, mungkin jika thread ini banyak pembacanya, insyallah akan saya posting tutorial tersebut di pada kesempatan berikutnya. TS bukan master dan masih perlu banyak belajar, jadi yuk mari kita bahas dan belajar bersama2 disini

UPDATE : Tutorial cara convert HTML ke Wordpress. Klik disini
Click to expand...

Mantap bro... bisa jadi ilmu baru nih jadi gak susah-susah buat desain sendiri tinggal edit aja jadi hahah
Muhamad Irfan Zidni, Oct 3, 2017

#407
mukhyiddin Newbie

Joined:

Oct 1, 2017

Messages:

24

Likes Received:

2
Aji Zakaria said: ↑

Ingin berbagi ilmu yg saya dapat dari kakak saya ini, sebelumnya mohon maaf kalau salah kamar, karena saya ingin share yang berhubungan dengan desain, jadi saya post saja di subforum Desain Web & Grafis. Sebenarnya rahasia ini cukup banyak perjual belikan di internet lho, karena memang tekniknya yang bisa dibilang susah2 gampang. Bahkan saya search di google pun blm menemukan tutorial yg jelas tentang kloning website ini.

Pernah terpikir tidak kalau kamu suka dengan desain suatu website dan ingin mempunyai desain yang seperti itu untuk digunakan sebagai desain blog/website kamu? Misalnya seperti ini, kamu sangat suka dengan desainnya situs facebook, dan kamu sangat ingin meniru desainnya buat website/blog kamu, tetapi bingung bagaimana caranya?

Nah, untuk yang sudah mahir dalam pemrograman web mungkin sangat mudah untuk meniru desain tersebut, namun buat yang belum tau atau masih newbie pastinya akan sangat kebingungan dan penasaran kan (pengalaman sy sebagai newbie ).

Tapi sekarang saya sudah gak bingung lagi karena saya sudah tau sedikit lah caranya , ya intinya saya ingin share aja bagaimana cara meniru desain situs lain buat kawan2 yg blm tau gimana caranya. Baiklah, langsung aja ke tutorialnya.

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)

Getting started (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

View attachment 25699

2. Kedua, copy paste seluruh kode2 tersebut ke notepad, kemudian save as dengan nama "index.html" tanpa tanda kutip

View attachment 25700

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

HTML:

<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

View attachment 25701

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

View attachment 25702

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, hasilnya? Lihat dibawah

Website asli

View attachment 25703

Website tiruan/hasil kloning

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

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.

Nah itu dia hasil dari teknik kloning versi saya. 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? )

Nah, untuk media pembelajaran, saya sediakan berkas file/ contoh dari hasil kloning tersebut, meskipun belum benar2 selesai semuanya, silahkan unduh disini

Code:

Mohon maaf link download saya tutup untuk mencegah hal- hal yg tidak diinginkan

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

Mohon maaf kalau ada kesalahan, mohon koreksinya untuk para master. Atau jika ada yang ingin tanya2 silahkan saja reply di thread ini, insyallah akan saya jawab jika saya bisa. Trims

Tambahan :
tujuan artikel ini hanya sebagai media pembelajaran saja, dan bukan untuk disalahgunakan. TS tidak bertanggung jawab apabila file atau berkas yang diunduh digunakan untuk hal - hal yang melanggar hukum.

Ada juga yg request tentang bagaimana cara convert HTML ke WP, mungkin jika thread ini banyak pembacanya, insyallah akan saya posting tutorial tersebut di pada kesempatan berikutnya. TS bukan master dan masih perlu banyak belajar, jadi yuk mari kita bahas dan belajar bersama2 disini

UPDATE : Tutorial cara convert HTML ke Wordpress. Klik disini
Click to expand...

mantap banget gan tutorialnya terimakasih
mukhyiddin, Oct 4, 2017

#408
ayamgore Ads.id Starter

Joined:

Jan 26, 2011

Messages:

62

Likes Received:

4

arunstop said: ↑

adakah kemungkinan si pembuat website asli yang kita kloning tahu dan kita kena copyright, padahal designnya udah diubah ?
Click to expand...

kemungkinan nya tetep ada.
jika design web yang dicloning dipake untuk web pribadi misalnya, bukan untuk web bisnis, mungkin tidak akan berbuntut panjang, tetapi berbeda kalo sebaliknya.
karena hasil dari teknik kloning maka design breadcumb nya hampir pasti sama, kecuali agan modif posisi2 semua content nya.

ayamgore, Oct 12, 2017

#409
Gelap Ads.id Starter

Joined:

Oct 29, 2017

Messages:

93

Likes Received:

2

thx sharenya gan bookmark dulu

Gelap, Nov 15, 2017

#410
Kurnia Isya Ads.id Pro

Joined:

Nov 30, 2016

Messages:

294

Likes Received:

37

Gambarnya gak kebuka nih

Kurnia Isya, Nov 15, 2017

#411
goetriflip Newbie

Joined:

Oct 12, 2017

Messages:

9

Likes Received:

0

Mantep suhu

goetriflip, Nov 21, 2017

#412
rhino Ads.id Starter

Joined:

Dec 3, 2017

Messages:

75

Likes Received:

2

Ini hanya untuk html yah?

rhino, Dec 16, 2017

#413
Roy Jono Ads.id Starter

Joined:

Dec 26, 2017

Messages:

65

Likes Received:

1

mantap banget gan share ilmunya...

ane jadinya ngga bingung lg ngedesain...
tinggal edit-edit dikit aja gan..

Roy Jono, Jan 7, 2018

#414
haqie007 Ads.id Fan

Joined:

Aug 8, 2014

Messages:

108

Likes Received:

49

Cmiwww makasih share nya

Sent from my SM-A510F using Tapatalk

haqie007, Apr 22, 2018

#415
Roy Jono Ads.id Starter

Joined:

Dec 26, 2017

Messages:

65

Likes Received:

1

btw, untuk copyright di footer gmn gan?

Roy Jono, May 8, 2018

#416
Nulzen Banned

Joined:

Jul 11, 2015

Messages:

35

Likes Received:

22

bestshare gan
untuk yg males kaya ane bakal g selesai belajarnya

Nulzen, Jun 13, 2018

#417
ecellnetwork Ads.id Starter

Joined:

Jan 9, 2016

Messages:

51

Likes Received:

2

Jejak dulu

Sent from my Mi A1 using Tapatalk

ecellnetwork, Jun 14, 2018

#418
tipsbolaparlay Newbie

Joined:

Nov 12, 2017

Messages:

21

Likes Received:

1

wow nice share..

tipsbolaparlay, Jun 21, 2018

#419
backbock Newbie

Joined:

Nov 17, 2017

Messages:

3

Likes Received:

0

kok pada banyak bilang, "ini jadinya html ya" & "untuk convert biar jd wp theme gmna", sebenarnya beda nya ada dmna ya? bukanya sama2 menggunakan bahasa html & style nya css. maap sebelumnya niube brtnya seperti ini karna blm tahu. hehehee

Sent from my m2 using Tapatalk

backbock, Jul 8, 2018

#420

(You must log in or sign up to reply here.)

Page 21 of 22

Share This Page