1. 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.

  1. Aji Zakaria

    Aji Zakaria New Comer

    Joined:
    Sep 20, 2012
    Messages:
    48
    Likes Received:
    384
    Location:
    Jakarta
    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 :D).

    Tapi sekarang saya sudah gak bingung lagi karena saya sudah tau sedikit lah caranya :D, 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 :D

    Website asli

    Website tiruan/hasil kloning
    [​IMG]


    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

    [​IMG]

    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? :peace:)

    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 :swt2:

    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
     
    Last edited: Jun 20, 2013
  2. ar_nardi

    ar_nardi Super Hero

    Joined:
    Mar 16, 2010
    Messages:
    2,344
    Likes Received:
    188
    Location:
    Ujungnya Samarinda
    wah.wah.. mantap, ninggalin jejak dulu sebelum magriban :D
     
    belajarlagi and oriens club like this.
  3. BapakMuda

    BapakMuda AdSense Pro

    Joined:
    Apr 12, 2012
    Messages:
    383
    Likes Received:
    159
    Location:
    BGR
    kalau tempelet blogger bisa gak om
     
    priowicaksono likes this.
  4. jeffgeby

    jeffgeby Hero

    Joined:
    Mar 25, 2011
    Messages:
    721
    Likes Received:
    83
    Location:
    Bogor
    keren masbro :) izin ninggalin bekas dolo ya,hehehe....
    nice share masbro
     
  5. cakilmbeling

    cakilmbeling Super Hero

    Joined:
    Jan 8, 2009
    Messages:
    813
    Likes Received:
    32
    Location:
    Ogoronop, Indonesia
    ok bro......mantab...klo bisa sih sekalian convert ke wp hiks hiks...btw sip dah tekniknya
     
  6. superijo

    superijo Super Hero

    Joined:
    Apr 11, 2011
    Messages:
    1,749
    Likes Received:
    57
    Location:
    Kasih Tau Gak yah??
    wah ane langsung save master :D
    oia berrti ini hasil jadinya HTML file yah?

    ada tutorial biar bisa jadi WP theme master? :D
     
  7. irvandikky

    irvandikky Super Hero

    Joined:
    Jun 9, 2012
    Messages:
    843
    Likes Received:
    58
    Location:
    Malang
    ini cuma homepage atau halaman tertentu saja berarti ya om..? ga semuanya :swt2: atau inidapet 1 theme..?
     
  8. superijo

    superijo Super Hero

    Joined:
    Apr 11, 2011
    Messages:
    1,749
    Likes Received:
    57
    Location:
    Kasih Tau Gak yah??
    oia bener nih :hmm:
    udah nyoba file yg di kasih TS, ternyata cuma homepagenya yah...
    klo mau nambahin page baru gimana ya om TS ganteng? :swt2:
     
  9. Aji Zakaria

    Aji Zakaria New Comer

    Joined:
    Sep 20, 2012
    Messages:
    48
    Likes Received:
    384
    Location:
    Jakarta
    kalau untuk blogspot juga tidak terlalu beda sob dengan cara diatas, intinya ambil bagian2 CSS dan HTMLnya saja

    ---------- Post added at 05:32 PM ---------- Previous post was at 05:29 PM ----------

    betul sekali, hasil dalam bentuk HTML mas, mungkin untuk tutorial convert ke wordpress akan saya post di tutorial selanjutnya

    ---------- Post added at 05:33 PM ---------- Previous post was at 05:32 PM ----------

    iya sob, tapi kalau mau buat 1 theme juga bisa, tetapi ya karena keterbatasan waktu dan tingkat kesulitan, jadi sebagai contoh dasar dimulai dari yang 1 ini saja dulu hehe

    ---------- Post added at 05:35 PM ---------- Previous post was at 05:33 PM ----------

    kalau mau menambahkan page baru, bisa diulangi saja mas langkah2 diatas, atau untuk cara simple nya copy saja file index.html, dan rubah namanya menjadi (misal content.html, about.html, dst). Nanti tinggal rubah2 saja file HTMLnya sesuai dengan keinginan :). Sebenarnya bisa kalau mau dibuat beberapa halaman, tapi karena ini hanya sebagai contoh dan juga karena keterbatasan waktu jadi saya buatkan contoh yang simple dulu biar lebih mudah di mengerti buat yg blm tau, hehe
     
  10. Akbarz

    Akbarz Super Hero

    Joined:
    Jul 4, 2010
    Messages:
    942
    Likes Received:
    181
    Location:
    sidoarjo
    Ijin bookmark kakak aji. :lol:
     
    nawi99 likes this.
  11. smitadd01

    smitadd01 Super Hero

    Joined:
    Oct 17, 2010
    Messages:
    980
    Likes Received:
    123
    Location:
    Kotagede JOGJA
    mantap sekali mas brow, kalo ane biasa pake inspect element milik google chrome...
     
  12. Mocaz

    Mocaz AdSense Fan

    Joined:
    Aug 31, 2012
    Messages:
    106
    Likes Received:
    17
    Location:
    USA ( Urang Sunda Asli )
    Mantap sharenya om....tapi kayaknya teknik ini lebih ke cloning tampilannya saja yang menggunakan bahasa HTML .

    Sedangkan untuk clone web / blog di blogger or wordpress diperlukan pemahaman lebih tentang struktur bahasa pemrograman yang digunakan oleh 2 platform tersebut. Contoh misalnya pada blogger, kita ga akan bisa clone kode asli xml nya hanya dengan menggunakan firebug, karena apa yang di tampilkan oleh firebug itu kode HTML hasil generated kode XML nya blogger ( mungkin bahasa nya yaitu layout data tag ).

    But, mantap sharenya om................ keep sharing ya ;)
     
    rhino likes this.
  13. itsmefurzy

    itsmefurzy Super Hero

    Joined:
    Dec 5, 2009
    Messages:
    788
    Likes Received:
    81
    di ctrl + S jg bisa. Haha. But harus complete web page :p
     
  14. Yogy Anggry

    Yogy Anggry Super Hero

    Joined:
    Sep 11, 2009
    Messages:
    797
    Likes Received:
    14
    Location:
    Jogja
    untuk convert to wp, harus paham php :)
     
  15. Aji Zakaria

    Aji Zakaria New Comer

    Joined:
    Sep 20, 2012
    Messages:
    48
    Likes Received:
    384
    Location:
    Jakarta
    sip, itu untuk cara instantnya gan, tapi secara teknisnya untuk para newbie2 kan gak akan tahu, apalagi gimana caranya untuk menyeleksi sebagian objek dan tidak secara keselurahan :)
     
  16. babeh_orayz

    babeh_orayz Super Hero

    Joined:
    Dec 29, 2008
    Messages:
    1,270
    Likes Received:
    9
    Nunggu tutorial convert ke wordpressnya biar lebih mantap :D
     
  17. superijo

    superijo Super Hero

    Joined:
    Apr 11, 2011
    Messages:
    1,749
    Likes Received:
    57
    Location:
    Kasih Tau Gak yah??
    Nunggu tutorialnya lebih lanjut master :D
     
  18. three_hans

    three_hans AdSense Fan

    Joined:
    Jan 9, 2012
    Messages:
    109
    Likes Received:
    2
    bagus banget gan share,,, minta Ijin untuk bookmark gan!!
     
  19. deydey

    deydey AdSense Fan

    Joined:
    Aug 11, 2012
    Messages:
    197
    Likes Received:
    1
    Location:
    sand n beach
    wowww....menarik banget nih kaka mastah..:)
    cari - cari contoh dulu aahhh :p
     
  20. alhijr

    alhijr Super Hero

    Joined:
    Feb 27, 2010
    Messages:
    4,463
    Likes Received:
    863
    Location:
    PIN : 7568977
    ini teknik untuk 1 page atau index html saja ya...
     

Share This Page