Home / WordPress / Cara Meniru Tampilan Website Atau Blog Orang Lain Dengan Mudah

Cara Meniru Tampilan Website Atau Blog Orang Lain Dengan Mudah

Cara Meniru Tampilan Website Atau Blog – Mau tidak mau jika kita ingin membuat tampilan website berbeda dengan tampilan website orang lain, maka kita harus berani bermain dengan kode. Apalagi jika template yang kita gunakan adalah template gratis. Otomatis akan banyak tampilan website yang sama. Karena umumnya kita lebih suka menikmati fasilitas gratis daripada yang berbayar.

Baca Juga : Cara Membuat Tampilan Posting Unik Di WordPress

Ketika kita sedang menata tampilan website atau blog sering terbentur dengan ide dalam menata layout tersebut. Contoh kecilnya kita bingung dalam menentukan warna website yang tepat dan sebagainya.

Jalan keluar untuk memecahkan permasalahan tersebut adalah dengan mencari di internet untuk menemukan blog atau website yang tampilannya bagus. Namun jika pengetahuan kita akan script atau kode sangat minim sekali, justru akan semakin tambah bingung juga.

Yang ada mungkin kita malah tercengang saja dengan tampilan website tersebut!

Jika kita terdampar disebuah blog yang tampilannya keren, mungkin dalam pikiran kita akan terlintas bagaimana cara membuat tampilan tersebut? Kode CSS apa saja yang blog tersebut gunakan? Kode PHP, HTML, atau mungkin kode Javascipt apa yang digunakan blog tersebut sehingga tampilannya bisa memikat setiap pengunjung?

Solusi satu-satunya adalah kita meski tahu source code yang digunakan blog tersebut. Kita bisa meniru tampilan website atau blog tersebut tanpa harus meminta bantuan admin blog.

Ko bisa, bagaimana caranya?

Berikut Cara Meniru Tampilan Website Atau Blog Orang Lain

Alat yang kita gunakan untuk meniru tampilan website orang lain hanya media browser. Cukup media browser saja! Semua jenis media browser seperti Google Chrome, Mozilla Firefox, dan lain-lain bisa kita gunakan untuk mengetahui source kode website atau blog orang lain.

Mari kita praktikkan sekarang!

Contohnya kita ingin mengetahui kode CSS yang digunakan oleh blog InfoMenarik, tepatnya adalah CSS pada header.

Cara Meniru Tampilan Website Atau Blog Orang Lain Dengan Mudah 0

Perlu diketahui bahwa source kode yang ditampilkan oleh media browser adalah source kode yang telah diproses oleh media browser itu sendiri. Jadi bukan source kode asli atau source kode yang diproses oleh server (seperti PHP dan Javascript) kecuali kode CSS dan HTML.

Mari dilanjut materinya ….

Setelah kita menentukan bagian tampilan website mana yang akan tiru desainnya, contoh disini tampilan header website InfoMenarik. Arahkan kursor mouse pada header kemudian klik kanan dan pilih Periksa elemen (Chrome) Inspeksi Elemen (Firefox).

Cara Meniru Tampilan Website Atau Blog Orang Lain Dengan Mudah 1

Maka kita akan mengetahui elemen header yang digunakan blog InfoMenarik.

Cara Meniru Tampilan Website Atau Blog Orang Lain Dengan Mudah 2

Untuk mengetahui kode CSS yang digunakan, Anda bisa lihat pada tab Style (sebelah kanan). Disana sangat jelas terlihat style.css yang digunakan pada menu header InfoMenarik.

Jika kita ingin meniru tampilan header berdasarkan elemen style css tersebut, maka kita cukup melakukan copy dan paste kedalam file style.css template yang digunakan.

Saya sarankan sebaiknya Anda coba dulu di WordPress offline seperti menggunakan Instant WordPress.

Cara Meniru Tampilan Website Atau Blog Orang Lain Dengan Mudah 3

Menggunakan media browser Google Chrome kita juga bisa mengetahui pengaturan kode Responsive Website atau Blog. Hal ini cukup dengan memilih Toggle device mode atau Ctrl+Shift+M pada keyboard.

Fasilitas cek responsive ini bisa kita manfaatkan untuk mengetahui apakah suatu website atau blog yang kita kunjungi sudah responsive atau belum.

Baca Juga : Tema Responsive Belum Tentu Mobile Friendly

Cara Meniru Tampilan Website Atau Blog Orang Lain Dengan Mudah 4

Setelah Anda memilih Toggle device mode maka tampilan browser akan berubah seperti gambar di bawah ini. Jika website atau blog sudah responsive, maka ketika kita rubah ukuran media screennya tampilan website akan tetap rapi.

Cara Meniru Tampilan Website Atau Blog Orang Lain Dengan Mudah 5

Kita juga bisa mengetahui element style css responsive yang digunakan blog orang lain.

Cara Meniru Tampilan Website Atau Blog Orang Lain Dengan Mudah 6

Kita bisa mencoba screen lainnya untuk menayangkan tampilan responsive website. Atau kita bisa memilih device model otomatis browser google chrome.

Cara Meniru Tampilan Website Atau Blog Orang Lain Dengan Mudah 7

Dengan memanfaatkan fasilitas Periksa elemen (Chrome) atau Inspeksi Elemen (Firefox) maka kita akan mengetahui source kode yang digunakan website atau blog orang lain. Kita bisa memodifikasi tampilan blog yang bersumber dari tampilan blog orang lain.

Sebaiknya ketika kita meniru tampilan website orang lain, kita modifikasi atau sesuaikan lagi dengan blog kita. Dengan begitu tampilan website kita akan berbeda dengan tampilan blog pada umumnya.

Baca Juga : Percantik Tulisan Posting Di WordPress Dengan Efek Gradient

Bagaimana mudah bukan? Selamat mencoba dan semoga sukses!

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

11 comments

  1. itu hanya untuk pengguna wordpress ya mas, kalau untuk pengguna blogspot gimana caranya ya? apakah sama dengan cara di atas atau ada modifikasi lain?

    • Pengguna Blogspot sama saja gan. Bedanya penempatan kode HTML dan CSS saja. Biasanya di Blogspot semua kode ditempatkan sama yaitu di Editor HTML Template.

  2. Pertamax di amankan :D

    Keren tipsnya. Saya termasuk pengguna WP self hosting. Banyak saya temukan themes gratis dengan atribut responsive dan mobile friendly.

    Saya test di browser bawaan android cukup memuaskan. Tapi ada beberapa kasus tampilannya ngga sempurna di aplikasi UC browser android. Apakah sudah pernah mencoba?

    Saya tidak tahu apakah UC browser yang masih ada bug atau themes yang masih belum optimal. Belakangan ini UC browser mulai populer karena kecepatan loading lebih cepat.

    • Saya sendiri belum pernah coba untuk mengetes tampilan blog ini di UC Browser mas. Kemungkinan besar script responsivenya memang tidak suport untuk UC Browser seperti akses blog dari Internet Explorer.

      • mungkin juga karena UC itu browser cepat , mereka juga melakukan kompres lebih banyak (IMO)

        nb : asem komentar harus 100 kata dulu baru bisa masuk -_-

        • Hahahaha karena banyak komentar hanya sekedar lewat saja bro makanya saya setting saja jadi minimal komentar harus 100 kata. Terima kasih sudah mampir ke gubukku admin lostmyidea :D

  3. menarik juga ini web site nya nanti saya akan kunjungi lagi, adsennya sudah terpasang ya bro, penghasilan perbulan kasih bocoran dong?? hehe

  4. cara mengkopi php nya gimana gan..?

    dan maksudnya ini gimana :
    Perlu diketahui bahwa source kode yang ditampilkan oleh media browser adalah source kode yang telah diproses oleh media browser itu sendiri. Jadi bukan source kode asli atau source kode yang diproses oleh server (seperti PHP dan Javascript) kecuali kode CSS dan HTML.

    • Sejauh ini saya belum tahu caranya untuk mengetahui kode PHP orang lain dengan menggunakan web browser. Tapi Anda bisa mencoba add-ons Firebug.

  5. Wah informasi yg menarik bagi newbie seperti saya, harus dicoba, kalau Untu wp gratisan sudah gak bisa diedit ya gan? Makasih sebelum

  6. Maaf Gan….,
    Ajarin Cara bikin Menu Drop Down kaya di Dropdown blog ini ( Khususnya di Menu Nav Software )

    Klo Berkenan via Email ya gan di [email protected]
    Terimakasih Sebelumnya…

Leave a Reply

Your email address will not be published. Required fields are marked *