Cara Mudah Copy Kode Dari Website (SnappySnippet)

Sebagai pengembang web, kadang-kadang kita menemukan beberapa inspirasi pada sebuah situs web yang ...

Sebagai pengembang web, kadang-kadang kita menemukan beberapa inspirasi pada sebuah situs web yang sedang kita kunjungi, kemudian kita akan bertanya-tanya bagaimana mereka membuat sesuatu hal tersebut. Kemudian, Anda akan berpikir tentang bagaimana mendapatkan salinan kode tersebut. Misal seperti Chrome DevTools serta Firebug dari Firefox memang tidak asing lagi bagi untuk kita manfaatkan sebagai tool untuk mengcopy kode HTML dan CSS dari sebuah situs web tersebut.

Cara Mudah Copy Kode Dari Website (SnappySnippet)

Namun, tool ini hanya bekerja untuk mengcopy HTML atau CSS saja, Anda tidak dapat menggunakan tool ini untuk menyalin CSS yang terkait dengan elemen HTML yang Anda pilih. Sebagai contoh, katakanlah Anda memilih sebuah elemen HTML yang berisi beberapa elemen, sebagai berikut.
[<div class="container">
 <button>Submit</button>
<p><span>By submitting you are agree to our term and condition</span></p>
</div>]

Masing-masing elemen di dalamnya memiliki pengaturan style sendiri. Beberapa elemen HTML mungkin telah memiliki style yang berbeda-beda. Bagaimana cara mengcopy kedua HTML dan CSS denga bersama-sama?. Di sinilah Anda akan senang karena tool seperti SnappySnippets akan membantu anda.

SnappySnippet adalah ekstensi Chrome (dapatkannya di sini) setelah diinstal, akan memberikan tab baru bernama SnappySnippet dalam Google Chrome DevTools. Di sinilah kita akan menggunakan SnappySnippet.

Cara Mudah menggunakan tool extensi SnappySnippet di chrome

Untuk menguji itu, kami telah menyiapkan halaman web yang berisi beberapa elemen HTML yang membentuk sebuah web login sederhana yang sangat bagus. Masing-masing elemen HTML ini memiliki kode CSS. Untuk menyalin semua kode ini dengan cara lama yaitu menggunakan fungsi normal dari DevTools yang sedikit memakan waktu.

Cara Mudah Copy login sebuah website dengan SnappySnippet

Dengan menggunakan SnappySnippet anda akan lebih menghemat waktu. Pertama, memilih elemen yang ingin Anda copy, kemudian buka tab SnappySnippet dan klik elemen kode tersebut.

Cara Mudah Copy Kode Dari Website denagn cara manual dan dengan cara menggunakan sebuat software

Seperti yang Anda lihat pada gambar di bawah ini, elemen yang dipilih disalin termasuk sub elemen dan ditempatkan dalam panel HTML di sisi kiri. Semua aturan style yang membentuk elemen-elemen HTML juga disalin dan ditempatkan dalam panel CSS.

Cara Mudah Copy Kode HTML dan CSS bersamaan

Pengaturan 
SnappySnippet memungkinkan kita untuk mengatur output kode. Di bawah dua panel yang digunakan untuk menempatkan HTML dan CSS, Anda akan menemukan panel Settings. Anda dapat mengatur beberapa hal, seperti menghapus properti CSS dengan-webkit-prefix dari output, memasukkan awalan untuk ID yang diberikan kepada elemen HTML, dan sebagainya.

Cara mengatur setingan di SnappySnippet

Seorang Web developer mungkin akrab dengan platform kode-sharing seperti Codepen. Situs ini memungkinkan pengembang web untuk berbagi code snippets. Ini seperti sebuah situs jaringan sosial tapi bukan seperti berbagi status dan foto selfies, disini kita berbagi kode. Dengan SnappySnippet, Anda dapat mengirim kode yang Anda disalin ke Codepen, JSFiddle, dan JSBin

Untuk mengirim kode, pastikan bahwa Anda telah login ke website masing-masing di mana Anda akan mengirim kode Anda. Hal ini juga untuk memastikan bahwa kode akan segera disimpan ke acccount Anda. Kemudian klik salah satu dari tiga tombol share tersebut.

situs jejaring sosial untuk sharing koding

Kesimpulan, SnappySnippet adalah tool yang sangat berguna untuk menyalin kode tapi ingat untuk tidak menggunakan ini sebagai sarana untuk menjiplak kode pengembang lain. Apapun yang Anda lakukan menyalin, bertujuan untuk tujuan belajar, dengan harapan untuk belajar sesuatu yang baru dari teknik yang digunakan.

COMMENTS

Nama

Inspiration Photografer Photoshop Software Video Tutorial Web Design
false
ltr
item
Desain Grafis, Tutorial dan Inspirasi : Cara Mudah Copy Kode Dari Website (SnappySnippet)
Cara Mudah Copy Kode Dari Website (SnappySnippet)
https://4.bp.blogspot.com/-o9gQe7gj1dA/U7Zak8IE8FI/AAAAAAAAP2Q/TpeONN21phI/s1600/website-html-code-browser-view-white-background-24331527.jpg
https://4.bp.blogspot.com/-o9gQe7gj1dA/U7Zak8IE8FI/AAAAAAAAP2Q/TpeONN21phI/s72-c/website-html-code-browser-view-white-background-24331527.jpg
Desain Grafis, Tutorial dan Inspirasi
http://www.javagrafis.com/2014/07/cara-mudah-copy-kode-dari-website.html
http://www.javagrafis.com/
http://www.javagrafis.com/
http://www.javagrafis.com/2014/07/cara-mudah-copy-kode-dari-website.html
true
917012177411184077
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy