Cara kloning template blog atau website
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 :
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 :
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
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
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, hasilnya? Lihat dibawah
Website asli
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
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
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
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
HTML Code:
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
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, hasilnya? Lihat dibawah
Website asli
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
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
