Belajar CSS, HTML Menggunakan Offline HTML Editor

Masalah terbesar yang dihadapi oleh sebagian besar blogger pemula seperti Kang Fathur untuk mengedit template blogger. setelah survey yang telah dilakukan, kurangnya kesadaran dengan bahasa browser seperti CSS, XML, HTML, JavaScript dll. Meskipun ada beberapa situs online yang memiliki tutorial di bidang ini dan salah satu situs tersebut adalah www.w3schools.com Website ini sangat populer karena memungkinkan anda bermain dengan kode.

Ini memiliki Alat Editor online HTML yang memungkinkan anda melihat langsung (live preview) dari kode yang anda gunakan. Banyak pengembang menemukan tool ini sangat berguna namun memiliki seseorang pernah membayangkan bahwa anda benar-benar dapat menyalin alat ini keluar dari W3Schools dan menggunakannya offline untuk berlatih coding saat offline? Nah untungnya setelah beberapa trial and error yang kami dapat berhasil membuat alat serupa yang kami beri nama PIO HTML Editor yang berhasil saya modifikasi dari blogger luar Mohammad Mustafa Ahmedzai. Semua blogger yang memiliki kesempatan untuk bersenang-senang bermain dengan kode penting seperti CSS, HTML dan JavaScript dan belajar coding penting dalam cara yang lebih menarik.

Sekarang Anda benar-benar dapat menguji kode sebelum menambahkannya ke blogger. Intinya, anda bisa melihat terlabih dahulu blog yang dimaksudkan.

1. Alat ini tersedia sebagai perangkat lunak, serta memiliki keunggulan berikut :
2. Ia bekerja Offline di browser yang tersedia
3. Memakan waktu kurang dari sepersekian detik untuk menunjukkan live preview
4. Ukurannya sama dengan kacang yaitu 2,32 Mb
5. Kode otomatis tersimpan di browser jika PC Anda sengaja di shutdowns
6. Anda dapat kembali (undo) beberapa kali menggunakan Ctrl + Z dan maju (Redo) menggunakan Ctrl + Y

Cara Mendownload

• Klik link ini >> PIO HTML Editor
• Jendela PIO HTML Editor akan terhubung
• Sekarang anda dapat mulai menggunakannya Viia Online
• Tetapi untuk bekerja secara Offline anda perlu menyimpannya terlebih dahulu.

Untuk menyimpannya ditunjukkan pada gambar berikut

• Selesai

Petunjuk Untuk Menggunakan PIO HTML EDITOR

Alat ini terdiri dari dua ruang yaitu ruang kiri dan ruang kanan. Seperti yang ada pada gambar berikut,

Ruang kiri adalah area di mana anda dapat menambahkan kode anda dan ruang kanan adalah area dar hasil tampilan dari kode yang dimasukkan pada ruang kiri. Kode CSS ditambahkan hanya antara <style> dan </ style> dan kode HTML ditambahkan tepat di bawah </ style>

Contoh Permainan Kode ala HTML Editor Kang Fathur

Pada contoh kali ini, Kang Fathur akan menggunakan menggunakan Trik Gambar dengan Efek Keburaman (Mouse Hover) artinya, image atau gambar yang sudah diuplod akan tampak buram jika didekati oleh mouse.

img {
filter: alpha (opacity = 100);
-moz-opacity: 1.0;
opacity: 1.0;
border: 0;
}
img: hover {
filter: alpha (opacity = 30);
-moz-opacity: 0,30;
opacity: 0,30;
border: 0;
}

Sekarang untuk menerapkan efek ini untuk gambar kita akan membutuhkan kode HTML seperti di bawah ini,

<img class="kangfathur" src="https://lh5.googleusercontent.com/-t_Xzph8zlKY/TutEpnNfr7I/AAAAAAAAA6I/bxyNsHO-NDk/s400/kang_fathur.png" />

Untuk menghasilkan yang terbaik, tambahkan Kode CSS hanya antara <style> dan </ style> dan Kode HTML di bawah </ style>. Tekan tombol Lihat danlihat hasilnya di ruang kanan.  Screen shot kira-kira seperti ini,

Beberapa Tips Penting: ~

1. Undo, klik Ctrl + Z
2. Redo, klik Ctrl + Y
3. Untuk mendapatkan URL dari gambar yang disimpan dalam hard drive anda misalkan Drive F, membuka kembali Firefox browser dan ketik F: di address bar dan tekan enter. Drive yang akan terbuka dan sekarang hanya browse ke gambar itu dan klik kanan di atasnya dan kemudian klik pada Copy Link Location. Aduh! Anda punya URL. Sekarang gunakan URL ini dimanapun diperlukan selama offline anda mengedit kode.
4. Setelah anda puas dengan kode yang anda siapkan maka cukup paste kode CSS di atas ]]></ b: skin> dalam template blogger Anda dan kode HTML di mana anda ingin efek yang akan dilihat yaitu posting atau sidebar

Harapannya, bagi yang blogger pemula ini, sebaiknya menggunakan tool ini untuk tahap belajar

Semoga ini bermanfaat bagi anda semua, dan jangan lupa klik Google + dipojok kanan atas untuk membagikan artikel ini.

Source : Kang Fathur