♫ You're Reading
Pengaturan Blog

Cara Mengetahui & Mengidentifikasi Kode HTML Widget dengan Inspect Element

Terkadang, disaat kita mengunjungi suatu blog yang memiliki widget yang cantik dan ingin kita pasang di blog kita, namun terkadang blog itu tidak menunjukkan bagaimana cara memasang widget tersebut, ditambah tidak semua widget menampilkan judul widgetnya di header widget tersebut sehingga susah untuk mencarinya di google.

Namun, kita masih bisa mengidentifikasi kodenya dengan Inspect Element,yaitu sebuah fitur yang ada di web browser (disini saya menggunakan browser Mozilla Firefox, untuk browser lain, silahkan menyesuaikan, kurang lebih sama kok)

Fitur ini akan muncul disaat kita meng-klik kanan mouse kita di halaman browser, dibagian bawah opsi, ada tertulis Inspect Element. Berikut cara mengidentifikasi kode html widget dengan inspect element

Klik untuk perbesar

Klik untuk perbesar

Disini, saya memberikan contoh cara mengidentifikasi widget Chatbox yang ada diblog ini…

Bagi yang masih bingung “Apa itu HTML” silahkan baca Mengutak-atik kode HTML

  • Setelah menemukan widget yang ingin anda curi :mrgreen: klik kanan di halaman web itu (bukan di widgetnya) lalu pilih opsi Inspect Element
    Klik untuk perbesar

    Klik untuk perbesar

     

  • Klik icon di pojok kiri bawah, bernama Select element with mouse atau gunakan CTRL+SHIFT+I
    Klik untuk perbesar

    Klik untuk perbesar

     

  • Arahkan mouse anda ke widget tadi, setelah muncul garis hitam putus-putus di sekitar widget, klik widget itu dengan mouse kiri satu kali
    Klik untuk perbesar

    Klik untuk perbesar

     

  • Beberapa widget flash mungkin akan menghilang saat dilakukan Inspect ini, but it’s okay :)
  • Setelah itu, klik tanda panah kebawah di sebelah kanan
    Klik untuk perbesar

    Klik untuk perbesar

     

  • Pilih Copy Outer HTML, buka Tampilan > Widget dan seret widget TEXT ke Sidebar, lalu pastekan kode tadi (Klik kanan > Paste)
    Klik untuk perbesar

    Klik untuk perbesar

     

  • Masih bingung? Silahkan berkomentar atau ajukan pertanyaan di Contact & Support :)
About these ads

About Sani Nugraha

Author of PressDesain | Love cat | Love my life | Calm and ambitious

Discussion

3 thoughts on “Cara Mengetahui & Mengidentifikasi Kode HTML Widget dengan Inspect Element

  1. ternyata cukup mudah kalau kita menggunakan menu inspect element pada browser bila dibandingkan dengan mencari melalui source code
    terima kasih ilmunya

    Posted by Rina | 2 June 2013, 7:47 am
  2. artikel ini yang saya cari-cari, maklum masih awam, tapi berhubung suka, jadi terus berselancar sampai ketemu pressdesain ini. terimakasih telah memberikan manfaat.

    Posted by tharzi | 24 April 2013, 10:30 pm

Trackbacks/Pingbacks

  1. Pingback: CARA MEMBUAT BLOG DI WORDPRESS | ailandewi - 23 March 2013

Beri Komentar

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

✄ More Article

Bagaimana cara membuat daftar isi ? Klik Disini

Scroll Down To See More Article

  • ✄ Tweets

    Tentang PressDesain

    wordpressPressDesain menggunakan tema The Morning After. Informasi lebih lanjut silahkan ke Blog Element

    PressDesain
    Klik untuk Membuat Chat Box !
    Follow

    Get every new post delivered to your Inbox.

    Join 337 other followers