Cara mengedit template menggunakan halaman w3school

Pada bagian akhir tulisan ini kami menyertakan contoh dengan konten video silahkan di tonton. Ya..

Ini adalah cara blogging sambil belajar koding yang telah kami lewati tanpa terasa. Iseng tapi membuahkan hasil yang sebenarnya cukup menyenangkan: Jadi melek koding, terutama teknologi programming web. Dengan melakukannya setiap ada waktu luang kita akan mendapatkan manfaat berikut ini (berdasarkan pengalaman):

1. Jadi melek koding. Betapa tidak di w3school ada pelajaran koding dari HTML web, C+, Java, Php, hingga bahasa programming Python. Wah ternyata mempelajarinya membuat wawasan dan cakrawala pengatahuan menjadi bertambah.
2. Jadi mengerti bagaimana mendesain template, mengedit dan memodifikasi template template bawaan (default) blogger. Mengerti bagaimana halaman web telah dibuat.
3. Yang paling penting jadi mengerti dan bisa menuliskan kode kode tersebut dengan benar, mengerti apa itu projek baik web maupun pembuatan aplikasi. Bagi kami mengerti dan memahami itu saja sudah sangat indah.
4. Menambah kepercayaan diri.

Apa contoh hal sederhana yang paling mudah namun bermanfaat untuk mengedit template bawaan blogger?

Pada halaman w3school ada menu 'Example" dan diantaranya 'How to Example' yang jika kita klik kita akan diberikan contoh contoh penulisan dan penerapan kode kode HTML, CSS, Javascript yang dapat diterapkan langsung untuk memodifikasi template bawaan blogger. 

Misalnya untk membuat navigasi menu (navbar), sidebar, merombak warna, membuat header, menbuat footer dan masih banyak lagi. Dalam contoh yang akan kami berikan adalah bagaimana membuat navigasi menu horisontal sederana dengan mudah melaluinya. 

Keuntungan menggunakan fitur 'how to example' W3school adalah ia memliki halaman editor dimana kita dapat berlatih mengedit contoh yang telah ada, menambah dan memodifikasinya sesuka hati dan kemudian mengcopy-pastekannya ke dalam template blogger. Boleh dikatakan 90% template buatan kami adalah hasil belajar disini. Eh satu rahasia lagi, kami mengunduh template gratisan dan memodifikasinya dengan mudah menjadi tampak premium berkat w3school, atau mengintip struktur dan elemen yang ada pada template template premium melalui browser tertentu menyalin semua kodenya dan mengeditnya. Cara ini juga bermanfaat sebagai latihan mendesain dan menemukan gaya kita sendiri.

Contoh halaman editor HTML w3school kebetulan kami melakukan pengeditan melalui ponsel (hape):

Dari gambar diatas dapat kami jelaskan: 

1). Sebelah atas (atau kiri kalau menggunakan laptop) adalah halaman editor HTML yang telah berisi contoh menu navigasi halaman web horizontal. Melalui editor ini ini kita dapat mengedit kode CSS dan HTML yang telah ada sehingga tampilannya sesuai dengan selera kita. Misalnya melalui pengaturan CSS kita dapat merubah warna, ukuran dan gaya font (huruf), padding, margin dan banyak lagi.

2). Sebelah bawah (atau kanannya kalau menggunakan laptop) adalah halaman pratinjau, Dimana kita bisa melihat hasil dari pekerjaan kita tadi.

Nah dengan setelah dirasa cocok dengan hasil editan, kita dapat mengcopy pastekan hasinya ke dalam template blogger caranya ya masuk ke dasbor blogger> pilih tema>pilih edit HTML.

Caranya sebenarnya sederhana saja. Apalagi kode yang dibutuhkan untuk membuat model navigasi menu web diatas tergolong sangat mudah dan sederhana dan terdiri hanya dari untaian CSS dan HTML saja tanpa Javascript, pasti ringan banget, bukan? Kalau mau lihat hasilnya lihat.

DEMO

Caranya: 

1. Yang kalian butuhkan hanya menyalin kode CSS yang di mulai dari tag pembuka <style> dan di akhiri dengan tag penutup </style> lalu mempastekannya ke dalam editor template blogger dan meletakannya di atas tag </head> cara ini berlaku untuk semua model kode CSS style.
2. Lalu salin kode HTML yang di mulai dari kode pembuka <div> dan di akhiri kode penutup </div> letakan dibawah kode <body..sebenarnya boleh di letakan di bawah kode </head> namun untuk merubah posisi navigasi kalian bisa meletakannya di atas kode </nav> kode ini terdapat pada template terbaru bawaan Blogger.

Supaya kalian lebih jelas gambarannya sebaiknya ikuti video kami berikut:

Demikanlah cara Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: