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

[SHARE] Teknik Kloning : Cara Convert HTML ke WP Part 2

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

  1. Aji Zakaria

    Aji Zakaria Newbie

    Joined:
    Sep 20, 2012
    Messages:
    48
    Likes Received:
    385
    Location:
    Jakarta
    Kali ini saya ingin kembali berbagi tentang tutorial bagaimana cara mengkloning suatu website, yaitu teknik kloning dengan cara convert HTML ke Wordpress. Sebenarnya rahasia ini banyak digunakan oleh jasa kloning ataupun para penjual theme wordpress, dan maaf saya tidak ada maksud untuk menyaingi usaha mereka, karena tujuan artikel ini hanya sebagai media pembelajaran saja. Sebenarnya ini adalah lanjutan dari thread yg pernah saya posting sebelumnya :


    Sebenarnya teknik ini tidak jauh berbeda dari tutorial yang pernah saya jelaskan, tetapi karena kita akan mengkloningnya ke engine wordpress, jadi diperlukan sedikit sentuhan khusus. Sebelum membahas tutorial ini lebih lanjut, sebaiknya baca dulu artikel pada thread saya sebelumnya (klik link diatas jika sobat2 belum membacanya) karena langkah - langkah awal sudah saya jelaskan pada artikel itu.

    Sedikit ulasan untuk mengingat kembali, saya jabarkan kembali Hal - hal yang perlu di persiapkan, yaitu :

    • 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)
    • Javascript WhatFont tool (Javascript ini biasa saya gunakan untuk menganalisa font apa yang digunakan oleh suatu website) - ini adalah tool tambahan karena belum saya masukkan di thread sebelumnya.

    Hal - hal yang perlu diketahui :
    karena disini kita akan meniru desain suatu website, pastinya kita akan mengambil beberapa komponen/script yang ada pada website tersebut, 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)
    • Jenis Font

    Baiklah, bila sudah paham kita lanjutkan ke inti tutorialnya, mohon dibaca baik2 langkah2nya agar tidak keliru

    Getting started (mari kita mulai)

    Sebagai contoh disini saya akan meniru desain dari situs support dot twitter dot com (yaitu halaman/pusat bantuan situs Twitter).

    Langkah 1. Buka "support*twitter*com" (ganti bintang dengan titik)
    Langkah 2. Jika halaman sudah terbuka penuh, kita tentukan bagian mana yang akan kita kloning/tiru desainnya. Saya jabarkan bagian2 tertentu kedalam 4 bagian dengan melalui gambar dibawah ini

    [​IMG]

    Kita akan menyeleksinya dengan menggunakan fitur Inspect Tool di Firebug
    1. Header : Bagian ini umumnya berisi logo dan navigasi menu yang akan kita masukkan ke wordpress
    2. Konten Utama : Nantinya bagian ini akan kita jadikan index post di wordpress
    3. Sidebar : Bagian sidebar akan kita gunakan sebagai penempatan widget di wordpress
    4. Footer : Berisi backlink atau copyright

    Tips : Karena kita akan memasukkan file HTML ke theme wordpress yang berekstensi php, jadi kita bisa sesuaikan bagian2 tersebut dengan file php yang sudah ada di folder theme wordpress. Misalnya kamu ingin meniru bagian nomor 1, yaitu Header, maka copy paste kode tersebut ke Header.php. Masih belum paham? Oke akan saya jelaskan lebih rinci pada langkah 3, mohon di simak.

    Langkah 3. Meniru Bagian Header
    Perhatikan gambar yang ada pada langkah 2, disini kita akan meniru bagian header. Sorot bagian header pada situs support twitter dengan menyeleksinya menggunakan Inspect Tool di Firebug

    [​IMG]

    Pada gambar diatas sudah saya jelaskan sedikit keterangannya. Nomor 3, bagian ini adalah Source HTML dari bagian header yang sudah kita sorot tadi. Lalu, bagaimana memasukkan kode HTML tersebut ke theme wordpress? Mudah saja, karena ini adalah bagian header, maka kita akan memasukkannya ke bagian header.php pada folder theme wordpress nya. Jangan lupa, copy terlebih dahulu ya source HTML tersebut dengan cara klik kanan dan pilih "Copy HTML" pada firebug.

    Dari hasil seleksi tadi, kita sudah mendapatkan source HTML bagian header, yaitu

    HTML:
    <div class="topbar">
        <div class="topbar-bg"></div>
        <div class="topbar-inner">
          <div class="fixed-container clearfix">
            <div id="home-logo">
              <a href="/" class="logo">
                <img src="/images/twitter-bird.png">
                <span class="desktop-name">Pusat Bantuan</span>
              </a>
            </div>
    
            <ul class="nav secondary-nav">
              <li class="mobile-search-only">
                <a href="#" class="menu"><span>Cari</span></a>
              </li>
                <li><a href="">Masuk</a></li>
            </ul> 
    
          </div> 
        </div> 
      </div>
    
    Langkah 4. Tempatkan/paste kode tersebut pada header.php, penempatan nya bisa kamu sesuaikan dengan kode header yang sudah ada pada theme wordpress kamu, umumnya ada dibawah tag <body>. Jika kamu sudah mengerti akan kode2 tersebut, silahkan saja untuk mereplace nya, tetapi jika masih bingung langsung saja paste kode tersebut dibawah tag <body> (nanti kamu akan mengerti sendiri apa yang harus dirubah).

    Langkah 5. Setelah kita berhasil memindahkan source HTML tadi ke header.php, sekarang saatnya mengcopy paste/memindahkan kode CSS nya. Caranya, lihat nomor 4 pada gambar di langkah 3 diatas. Copy kode CSS tersebut ke style.css di folder wordpress kamu. Dari gambar tersebut terlihat bahwa kode CSSnya adalah sebagai berikut

    Code:
    div.topbar {
        height: 40px;
        left: 0;
        overflow: visible;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 100;
    }
    
    
    Kode diatas adalah sedikit bagian dari CSSnya, kamu bisa melihatnya lebih lengkap lagi dengan mengklik link yang ada di firebug. Kamu bisa tempatkan kode tersebut di style.css pada baris apa saja, yang penting sesuai dengan penempatan untuk CSS bagian navigasi/header. Jika sudah, klik save. Sekarang coba lihat tampilan blog kamu, sebenarnya sampai disini kamu sudah bisa mengkloning bagian2 tertentu dari sebuah website ke themes blog kamu.

    Langkah 6. Meniru Bagian Sidebar, Konten, dan Footer
    Sama halnya dengan Langkah 3 (Meniru bagian header), tidak jauh berbeda. Misalnya kamu ingin meniru bagian sidebar, tempatkan saja kode - kode HTML dan CSS nya ke sidebar.php untuk source HTML. Dan style.css, untuk kode CSS. Kemudian sama halnya dengan meniru bagian konten yang umumnya digunakan untuk index postingan, ulangi saja langkah - langkahnya, namun biasanya untuk konten penempatannya ada di index.php, dan sama halnya juga untuk footer, tempatkan kode HTMLnya di footer.php, dsb. Intinya, sesuaikan bagian kode yang ingin di kloning dengan file php yang ada pada theme wordpress kamu :).

    Langkah 7. Menganalisa Font yang digunakan suatu website
    Saya biasa menggunakan javascript dari WhatFont Tool untuk mengidentifikasi font yang digunakan suatu website. Kamu bisa mendapatkan javascript ini di situs pengembang resminya :

    Code:
    http://chengyinliu.com/whatfont.html
    Javascript ini saya jadikan sebagai bookmark toolbar di Firefox, untuk instalasinya kita hanya perlu (drag&drop) saja ke bookmark toolbar firefox. Bagaimana cara menggunakannya? Mudah saja, setelah kamu install javascript ini, buka situs yang mau kamu analisa jenis Font apa yang mereka gunakan. Jika loading selesai, klik saja Javascript WhatFont tool yang ada di bookmark bar firefox, maka akan ditampilkan informasi yang cukup jelas. Mulai dari jenis font (font-family), ukuran font (font-size), warna font (color) (line-height) beserta sever fontnya. Semua itu bisa kamu copy dan tempatkan di kode CSS.

    [​IMG]

    Langkah 8. Mengedit Bagian gambar dan icon
    Seperti yang sudah saya jelaskan pada thread saya sebelumnya, saya biasanya menggunakan Photoshop untuk proses editing seperti ini.

    Dari hasil teknik kloning tersebut, bisa kita lihat dibawah ini

    Website asli
    [​IMG]

    Website tiruan/hasil kloning dalam bentuk theme wordpress
    [​IMG]

    Nah itu dia hasil dari teknik kloning versi saya dalam bentuk wordpress. Seperti yang sudah saya jelaskan pada thread saya sebelumnya, 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:

    Live Preview Blog wordpress hasil tiruan/kloning bisa kamu lihat pada halaman dibawah
    Code:
    http://goo.gl/EhLjr
    
    Kesimpulan :

    Untuk engine wordpress, misalnya jika kamu ingin meniru bagian header, bisa kamu pasang ke header.php, sama halnya dengan sidebar, kamu bisa terapkan ke sidebar.php, dan ini berlaku juga untuk footer, bisa kamu terapkan ke footer.php, dan sebagainya. Sedangkan untuk css pada wordpress, kamu bisa terapkan ke style.css di folder theme wordpress kamu.

    Oke, demikian penjelasan tentang tutorial convert HTML ke WP ini karena keterbatasan karakter, tiap thread hanya dapat jatah 10rb saja :swt2:. Mohon maaf apabila ada kekurangan/kesalahan mohon koreksinya, atau jika sobat2 punya cara - cara tertentu bisa ikut sharing atau mungkin ada yg punya pertanyaan silahkan reply di thread ini, insyallah akan saya jawab jika saya bisa. Tujuan artikel ini hanya sebagai pembelajaran, dan mohon untuk tidak disalahgunakan. Sampai bertemu di tips2 selanjutnya :D
     
    Last edited: Sep 30, 2012
  2. park3r

    park3r Super Hero

    Joined:
    May 25, 2008
    Messages:
    4,967
    Likes Received:
    628
    wah ilmu yg bermanfaat nih, ternyata ada juga teknik ginian
    ane baru tahu, like penceted
     
  3. itsmefurzy

    itsmefurzy Super Hero

    Joined:
    Dec 5, 2009
    Messages:
    789
    Likes Received:
    89
    wets tambah mantab sharenya. Ternyata ada tools2 mantab begini
     
  4. pekalongan

    pekalongan Super Hero

    Joined:
    Jan 26, 2010
    Messages:
    1,196
    Likes Received:
    51
    Location:
    Malang
    agan ini kemarin tritnya HT di kaskus :D
     
  5. Aji Zakaria

    Aji Zakaria Newbie

    Joined:
    Sep 20, 2012
    Messages:
    48
    Likes Received:
    385
    Location:
    Jakarta
    iya mas sempat HT di kaskus, tapi sebenarnya yg HT itu trit kakak saya
     
  6. zizot05

    zizot05 Super Hero

    Joined:
    Nov 1, 2009
    Messages:
    1,478
    Likes Received:
    61
    Location:
    Plat F
    mantab tuts'y coba ah di oprek sendiri
     
  7. elv182

    elv182 Ads.id Pro

    Joined:
    Apr 17, 2010
    Messages:
    387
    Likes Received:
    4
    Location:
    Pontianak
    Thanks TS, tutor yang bermanfaat sekali. Di tunggu tips berikutnya.. :)
     
  8. unregistered000

    unregistered000 Hero

    Joined:
    Mar 1, 2012
    Messages:
    607
    Likes Received:
    71
    gelar tikar dulu mastah aji.. cukuckcukcuk :lol:
     
  9. pakji

    pakji Ads.id Pro

    Joined:
    Jul 13, 2012
    Messages:
    272
    Likes Received:
    8
    ijin gelar kardus dulu mastah.. hehehe
     
  10. ryukk

    ryukk Ads.id Pro

    Joined:
    May 14, 2011
    Messages:
    269
    Likes Received:
    5
    keren om tutorialnya,
    dapet ilmu baru lagi nih...
     
  11. sandhi

    sandhi Ads.id Fan

    Joined:
    Oct 4, 2011
    Messages:
    179
    Likes Received:
    1
    Location:
    UNDIP - Informatics Engineering
    wahh ilmu baru nih..
    makasih om TS..d tunggu ilmu lainnya.. :D
     
  12. ahmadferi

    ahmadferi Super Hero

    Joined:
    Jun 18, 2010
    Messages:
    822
    Likes Received:
    44
    Location:
    Pinggir got
    mancaaaaaaaaaaaaap pisan euy, manfaat banget gan ...
    hahahaha, jadi bisa berkreasi sambil cari inspirasi ...
     
  13. reedan

    reedan Hero

    Joined:
    Nov 22, 2011
    Messages:
    518
    Likes Received:
    12
    Location:
    Depan komputer,cari makan buat anak istri
    tutorial mantab nich,, gak kepikiran kalo bisa semudah itu kloning desain situs.. :senyum:
     
  14. wanwan

    wanwan Ads.id Fan

    Joined:
    Jul 11, 2011
    Messages:
    126
    Likes Received:
    1
    Location:
    Malang Raya
    Thanks mastah for sharing.
    mantabss...

    ijin coba dulu...
     
  15. cyberplayer

    cyberplayer Ads.id Fan

    Joined:
    May 18, 2011
    Messages:
    147
    Likes Received:
    105
    sangat bermanfaat
     
  16. hantupenjara

    hantupenjara Ads.id Fan

    Joined:
    Aug 30, 2012
    Messages:
    234
    Likes Received:
    12
    waah..keren nih... :D
     
  17. shinichi_kudo

    shinichi_kudo Hero

    Joined:
    Nov 7, 2011
    Messages:
    537
    Likes Received:
    106
    emang keren ini teknik
     
  18. berkah online

    berkah online Newbie

    Joined:
    May 13, 2012
    Messages:
    31
    Likes Received:
    34
    terima kasih pak guru Aji, akhirnya di sharing juga ilmu convert HTML2WP nya :)
     
  19. Aji Zakaria

    Aji Zakaria Newbie

    Joined:
    Sep 20, 2012
    Messages:
    48
    Likes Received:
    385
    Location:
    Jakarta
    itu requestan dari kawan2 disini juga mas wid
     
  20. engine.dll

    engine.dll Ads.id Starter

    Joined:
    Nov 9, 2011
    Messages:
    57
    Likes Received:
    0
    Thanks mas bro...
    Belum Sempet baca semuanya di bookmark dl dh...:-B
     

Share This Page