Cara Memasang Notifications Cookies di Blogspot!
Blog Cara Ocha - Cara Memasang Notifications Cookies di Blogspot! - Hello gaes! Selamat siang & selamat membaca kembali di blog noob ( Blognya Cara Ocha ) 😊. Pada kesempatan siang hari ini akan sedikit aku ulas bagaimana caranya membuat Notifikasi Cookie di blog Khusus nya di Blogspot, namun sebelum jauh membahas ke inti topik kali ini, perlu di garis bawahi ini bukanlah artikel yang harus di bahas, karena memang sudah banyak di luar sana yang membagikan cara seperti ini.
Tapi karena kebetulan ada yang bertanya "Kak gimana sih, caranya buat tulisan yang ada di Zone Mod Apk, apa sih namanya? Saya kurang paham, tapi intinya notifikasi cooki gitu deh, tolong dong jelasin, saya lagi belajar ngeblog hehehe emoticon
Oleh karena itu aku jawab di postingan ini, Dengan harapan dan tujuan mungkin akan sedikit lebih berguna lagi buat kalian semuanya yang belum tau caranya dan ingin memasangnya juga di blogspot kalian. Dan di bawah ini contoh nya yang mau di bahas kali ini
Oke kita lanjut aja gaes! Sesuai dengan peraturan dari Uni Eropa, semua situs atau blog harus memasang notifikasi cookies (EU Cookie Law) di situs atau di blog. Aturan ini disebut sebagai General Data Protection Regulation (GDPR) atau Regulasi Perlindungan Data yang digunakan untuk mengatur perlindungan data pribadi di dalam maupun di luar Uni Eropa.
Dengan peraturan tersebut blogger selaku miliknya Google, sudah memasang notifikasi cookies secara otomatis disemua blog yang dibuat dari platform blogger yang akan tayang jika pengunjung blog kita dari negara-negara Eropa.
Untuk informasi lebih lengkap mengenai GDPR ini, silahkan kamu kunjungi link ini https://id.wikipedia.org/wiki/Regulasi_Umum_Perlindungan_Data, Lalu bagaimana cara memasang notifikasi cookie di blog?
Jika kamu ingin memasang notifikasi cookies di blog yang dimana nofitikasi cookies yang aku bagikan ini akan selalu tampil dari semua negara-negara para pengunjung blog kita ( jadi tidak hanya akan tampil jika pengunjung dari eropa saja! Tapi dari semua negara ) yuk langsung aja simak langkah-langkahnya dibawah ini.
2. Klik menu tema / thema disebelah kiri
3. Klik edit html
4. Letakkan kode notifikasi cookies dibawah ini tepat diatas </head> atau <!--</head>--></head>
Keterangan :
Perhatikanlah kode notifikasi cookies diatas yang aku kasih tag mark.
"background": "green"
( silahkan ganti dengan warna background sesuai selera masing-masing agar sesuai dengan warna blog kalian, di sini dengan warna background Green / Hijau
"button": {
"background": "black"
Ini dengan tampilan button / tombol dengan warna background nya Black / Hitam, jadi bisa kalian ubah bagian nama warna ini dengan nama warna sesuai keinginan kalian!
"text": "white"
Ini tampilan text dan juga text yang berada di dalam tombol / button, dengan warna White / Putih bisa kalian ubah juga dengan nama warna sesuka kalian, misal jadi warna hitam dsb!.
"border": "white"
Kalau yang ini border button, bisa kalian ubah juga jika tidak suka dengan tampilan tombol ber'border White / Putih dengan background Black / Hitam, misal di samakan saja antara background dan border jadi warna hitam!
Nah, kalau yang terakhir ini, wajib kalian ubah "href": "https://cara-ocha.blogspot.com/p/privacy.html" dengan link halaman privacy yang ada di blog kalian, jika belum memiliki halaman privacy, terlebih dulu kamu buat, bisa secara manual bisa juga secara otomatis dengan menggunakan Privacy Generator ( bisa kalian search aja di google!
Untuk penjelasan selengkapnya, mengenai kode warna HTML / Nama-nama warna, bisa kalian cek pada postingan sebelum nya di Kumpulan Kode Warna HTML
Gimana, sangat mudah kan gaes? Tinggal copas langsung jadi 😅 ( mudah bagi yang sudah tau, gk mudah bagi yang belum tau, makanya aku kasih tau & semoga dapat membantu buat kalian yang belum tau! )..
Btw terasa simple cuma gitu doang ya! Terasa masih pengen ngetik 😅 boleh ya sedikit aku berbagi pengalaman ( di baca alhamdulillah, enggk juga gk apa-apa kok ) 😊 intinya sih yang mau aku share pengalaman ini, masih ada kaitannya dengan pertanyaan orang tersebut! Yaitu soal CSS & HTML
Oke deh langsung aja ya gaes! pengalaman aku saat dulu di awal-awal baru mengenal dunia internet ( Khusus nya dunia Blogging ) melihat blog orang lain kesannya terasa wow banget gitu 😅
Dari rasa wow tersebut, timbul banyak pertanyaan "Gimana ya caranya bikin seperti ini / itu" ( karena masih malu bertanya di tambah lagi belum tau harus nanya kesiapa & di mananya!
Jadi akhirnya aku memutuskan untuk berpikir dan berusaha membuatnya sendiri padahal jujur saja belum tau cara buatnya seperti apa dan bagaimananya 😅
Tapi yang pasti saat itu aku masih belajar tahap dasar mengenai CSS & HTML gaes! Karena memang tahapan awal harus tau dulu dasar-dasar / pehamanan arti dari kode HTML / CSS tersebut
Sedikit aku kasih gambaran dulu, apa sih HTML & CSS itu ? ( Sekedar sharing saja yang mungkin masih berguna buat kalian yang baru pertama kalinya ingin membuat blog / web dan belum paham soal kedua jenis tersebut )
Jadi CSS itu singkatan dari Cascading Style Sheet yang digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.
CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. hanya perlu menulis markup untuk situs.
Tags, seperti <font> diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini.
HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.
Tak hanya penting di sisi teknis, CSS juga berpengaruh pada tampilan sebuah website. Tentunya kalian tidak ingin website terlihat seperti situs yang ‘telanjang’ tanpa modifikasi apa pun, bukan?
Lalu bagaimana cara melihat situs web / blog tanpa CSS ? 🤔 Mudah saja bagi kalian untuk mengetahui mana website yang menggunakan CSS dan mana yang tidak.
Kalian pasti pernah membuka website, tapi sesaat kemudian gagal loading dan malah menampilkan background putih yang didominasi teks hitam dan biru. Situasi ini menggambarkan bahwa CSS pada situs tersebut tidak dapat di-load dengan benar atau situs sama sekali tidak memiliki CSS. Umumnya, situs seperti ini hanya menerapkan HTML.
Sebelum menggunakan CSS, semua stylizing harus disertakan ke dalam markup HTML. Itu berati kalian harus mendeskripsikan semua background, warna font, alignment, dan lain-lain secara terpisah.
Dengan CSS, kalian dapat mengatur tampilan semua aspek pada file yang berbeda, lalu menentukan style, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah di-maintain.
Singkatnya, dengan CSS, kalian tidak perlu mendeskripsikan tampilan dari masing-masing elemen secara berulang-ulang. Kalian tidak membuang-buang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir.
Karena opsi kustomisasi yang ada hampir tak terbatas, CSS memungkinkan kamu untuk menerapkan berbagai macam style pada satu halaman HTML
Cara kerjanya CSS menggunakan bahasa Inggris sederhana berbasis syntax yang dilengkapi dengan sekumpulan rule yang mengaturnya. Seperti yang telah di sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan elemen style, hanya markup halaman saja. HTML dirancang semata-mata untuk mendeskripsikan konten. Sebagai contoh: <p>This is a paragraph.</p>
Satu yang menjadi pertanyaannya sekarang, bagaimana caranya style paragraf? Struktur syntax CSS cukup sederhana. Struktur ini memiliki selector dan declaration block. Pilih elemen yang diinginkan, kemudian deklarasi (declare) yang harus kalian lakukan terhadap elemen tersebut. Sangat mudah, kan?
Setiap deklarasi menyertakan nama dan value dari properti CSS, yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi oleh tanda kurung kurawal.
Mari kita lihat contoh di bawah ini :
Semua elemen <p> ditandai dengan warna biru dan hurufnya ditebalkan (bold).
Kita bahas beberapa style CSS, yakni Inline, External, dan Internal.
Jika ingin membuat website, pilihlah website builder yang tepat ( Bisa kalian search saja di google 😅 ), terdapat tool builder yang menawarkan drag & drop yang mudah. Gunakan template gratis yang tersedia di builder tersebut dan buat website dengan tampilan yang menarik. Dan Onlinekan situs kalian dengan segera!
Ok lanjut gaes! CSS Style Internal diload setiap kali website di-refresh, dan kekurangannya adalah waktu loading semakin lama. CSS style yang sama pun tidak dapat digunakan di halaman lain karena sudah aktif terlebih dulu di suatu halaman. Namun di balik kekurangannya, CSS Style Internal memiliki beberapa kelebihan. Salah satunya adalah kemudahan dalam sharing template untuk pratinjau (preview) karena CSS hanya ada di satu halaman.
External merupakan CSS style yang paling mudah dan tidak menyulitkan. Semuanya dilakukan secara eksternal pada file .css. Styling dilakukan di file terpisah, lalu terapkan CSS ke halaman mana pun yang kamu inginkan. Sayangnya, CSS Style External juga memperlama waktu loading.
CSS Style Inline menggunakan elemen spesifik yang memuat tag <style>. Karena setiap komponen harus di-stylize, maka Inline bukan metode yang tepat jika kamu ingin menggunakan CSS dengan cepat. Namun di sisi lain, hal tersebut mendatangkan keuntungan. Misalnya, jika kamu ingin mengubah satu elemen, atau menampilkan pratinjau dengan cepat, atau kamu tidak punya akses ke file CSS.
CSS dibuat untuk dapat bekerja bersama dengan bahasa markup seperti HTML. Biasanya CSS digunakan untuk mengatur tampilan halaman.
Ada tiga style di CSS, dan untuk menerapkan CSS di banyak halaman pada waktu bersamaan, gunakan External style.
Saat ini sudah banyak website yang menggunakan CSS. Hal ini dikarenakan CSS adalah salah satu bahasa markup yang diwajibkan ada.
Semoga pembahasan mengenai CSS ini dapat berguna bagi kalian semuanya yang masih dalam tahap belajar ( sama seperti aku masih terus belajar karena dari 2005 s/d sekarang 2020 aku belum bisa apa-apa 😂 Newbie berkarat wkwkwkwk ) Noob kok bangga ya 🙄 bangga nya tulisan noob di baca sama kalian hehe!
Btw sudah cukup kan ? Dengan penjelasan soal CSS juga ? Sudah menyinggung soal HTML jadi aku rasa tanpa harus di jelasin lagi ? 🤔 Tapi oke deh biar gk nanggung, sedikit aku ulas juga mengenai HTML nya ( itu pun jika kalian masih mau melanjutkan membacanya 😌 )
Singat nya saja HTML atau kepanjangan dari Hypertext Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegrasi.
Lebih lanjutnya HTML memungkinkan seorang user untuk membuat dan menyusun bagian paragraf, heading, link atau tautan, dan blockquote untuk halaman web dan aplikasi.
HTML bukanlah bahasa pemrograman, dan itu berarti HTML tidak punya kemampuan untuk membuat fungsionalitas yang dinamis. Sebagai gantinya, HTML memungkinkan user untuk mengorganisir dan memformat dokumen, sama seperti Microsoft Word.
Ketika bekerja dengan HTML, kita ( sebut sajaMawar 😂 pengelola web / blog / situs dsb yang mengharuskan menggunakan HTML ) yaitu dengan menggunakan struktur kode yang sederhana (tag dan attribute) untuk mark up halaman website. Misalnya, aku membuat sebuah paragraf dengan menempatkan enclosed text di antara tag pembuka <p > dan tag penutup </p>
<p>This is how you add a paragraph in HTML.</p>
<p>You can have more than one!</p>
Hypertext merujuk pada teks yang memuat referensi (link) ke teks lain yang bisa diakses langsung oleh viewer. Tim merilis versi pertama HTML pada tahun 1991, dan di dalamnya terdiri atas 18 HTML tag. Sejak saat itu, setiap kali bahasa HTML merilis versi teranyarnya, selalu ada tag dan attribute (tag modifier) terbaru.
Berdasarkan HTML Element Reference milik Mozilla Developer Network untuk saat ini, ada 140 HTL tag meskipun sebagiannya sudah usang (tidak lagi didukung oleh versi terbaru browser).
Berkat popularitasnya yang terus meningkat, HTML kini dianggap sebagai web standard yang resmi. Spesifikasi HTML di-maintain dan dikembangkan oleh World Wide Web Consortiumm (W3C). Cek versi terbaru dari bahasa ini di website W3C
Upgrade HTML besar-besaran terjadi pada tahun 2014, dan hasilnya adalah pengenalan HTML5. Pada upgrade tersebut, terdapat semantic baru yang memberitahukan arti dari kontennya sendiri, seperti <article>, <header>, dan <footer>
Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang berbeda-beda. Contohnya, beranda utama, halaman ‘tentang kami’, halaman kontak yang semuanya memiliki dokumen HTML terpisah.
Masing-masing halaman HTML terdiri atas seperangkat tags (bisa disebut juga elements), yang mengacu pada building block halaman website. Tag tersebut membuat hirarki yang menyusun konten hingga menjadi bagian, paragraf, heading, dan block konten lainnya.
Berikut contoh kode dari susunan atau struktur HTML :
Elemen teratas dan terbawah adalah division sederhana (<div></div>) yang bisa kamu gunakan untuk mark up bagian konten yang lebih besar.
Susunan HTML di atas terdiri atas heading (<h1></h1>), subheading (<h2></h2>), dua paragraf (<p></p>), dan satu gambar (<img>).
Paragraf kedua meliputi sebuah link (<a></a>) dengan attribute href yang terdiri atas URL tujuan.
Tag gambar memiliki dua attribute, src untuk path gambar dan alt untuk deskripsi gambar.
Elemen block-level memakai semua space yang tersedia dan selalu membuat line baru di dalam dokumen.
Contoh dari tag block adalah heading dan paragraf.
Elemen inline hanya memakai space sesuai dengan kebutuhannya dan tidak membuat line baru di halaman. Biasanya elemen ini akan memformat isi konten dari elemen block-level.
Contoh dari tag inline adalah link dan emphasized strings.
Tag <html></html> adalah elemen level tertinggi yang menyertakan setiap halaman HTML.
Tag <head></head> menyimpan informasi meta, seperti judul dan charset halaman.
Tag <body></body> melampirkan semua konten yang muncul pada suatu halaman.
Heading memiliki 6 level di HTML. Level tersebut bervariasi, mulai dari <h1></h1> sampai ke <h6></h6>, di mana h1 merupakan level heading tertinggi dan h6 adalah level terendah. Paragraf dibuka dan ditutup dengan tag <p></p>, sedangkan blockquote menggunakan tag <blockquote></blockquote>.
Division merupakan bagian konten yang lebih besar dan biasanya terdiri atas beberapa paragraf, gambar, kadang-kadang blockquote, dan elemen lebih kecil lainnya. Kita bisa membuat mark up dengan menggunakan tag <div></div>. Di dalam elemen div juga terdapat tag div lainnya.
kamu juga bisa menggunakan tag <ol></ol> untuk list yang berurutan dan <ul></ul> untuk list yang tidak berurutan. Masing-masing list item harus dibuka dan ditutup dengan tag <li></li>
Hyperlink adalah elemen inline yang mewajibkan adanya tag <a></a> dan attribute href untuk mengindikasi tujuan link :
Gambar (image) juga merupakan elemen inline. Kamu dapat menambahkan satu gambar dengan menggunakan <img> tanpa harus membubuhkan tag penutup. Hanya saja, kamu disarankan menggunakan attribute src untuk menentukan path gambar, misalnya:
HTML4 (belakangan ini sering disebut sebagai “HTML”) dirilis pada tahun 1999 dan versi terbarunya diperkenalkan pada publik pada tahun 2014. Dikenal sebagai HTML5, versi terbaru ini menambahkan lebih banyak fitur baru ke bahasa mark up ini.
Salah satu fitur canggih di HTML5 adalah support untuk embed audio dan video. Jadi, alih-alih menggunakan Flash player, kita bisa melakukan file video dan audio yang di-embed ke halaman website dengan memanfaatkan tag <audio></audio> dan <video></video>. Fitur tersebut juga memiliki support bawaan untuk grafis vektor (SVG) yang dapat diskalakan dan MathML untuk formula matematika dan ilmiah.
HTML5 juga memperkenalkan beberapa perbaikan pada semantic. Tag semantic baru mengirimkan informasi pada browser tentang arti konten, yang bermanfaat tak hanya bagi pembaca, tapi juga mesin pencari.
Tag semantic yang paling banyak digunakan adalah <article></article>, <section></section>, <aside></aside>, <header></header>, dan <footer></footer>.
Bahasa yang digunakan secara luas dan memiliki banyak sumber serta komunitas yang besar.
Dijalankan secara alami di setiap web browser.
Memiliki learning curve yang mudah.
Open-source dan sepenuhnya gratis.
Bahasa markup yang rapi dan konsisten.
Standard web yang resmi di-maintain oleh World Wide Web Consortium (W3C).
Mudah diintegrasikan dengan bahasa backend, seperti PHP dan Node.js.
Paling sering digunakan untuk halaman web statis. Untuk fitur dinamis, kamu bisa menggunakan JavaScript atau bahasa backend, seperti PHP.
HTML tidak memungkinkan user untuk menjalankan logic. Alhasil, semua halaman web harus dibuat terpisah meskipun menggunakan elemen yang sama, seperti header dan footer.
Fitur-fitur baru tidak bisa digunakan secara cepat di sebagian browser.
Terkadang perilaku browser susah untuk diprediksi (misalnya, browser lama tidak selalu bisa render tag yang lebih baru).
Namun di satu sisi, HTML bisa bekerja secara maksimal dengan dua bahasa frontend: CSS (Cascading Style Sheets) dan JavaScript. Jika digabungkan, kedua bahasa frontend ini bisa meningkatkan pengalaman user dan mengaktifkan fungsi yang lebih canggih.
CSS erat kaitannya dengan styling, seperti background, warna, layout, spacing, dan animiasi.
JavaScript memungkinkan kamu menambahkan fungsionalitas yang dinamis, seperti slider, pop-up, dan galeri foto.
Misalkan HTML adalah orang yang tidak memakai satu helai benang pun, CSS adalah bajunya, dan JavaScript adalah aktivitas dan sikapnya.
Berdasarkan cara kerja HTML, kamu bisa menggunakannya untuk membuat struktur konten pada website dan aplikasi web. HTML merupakan level terbawah dari teknologi frontend dan berfungsi sebagai dasar styling yang bisa kamu tambahkan dengan CSS dan fungsionalitas yang dapat dijalakan menggunakan JavaScript!
Nah, gimana gaes! Sudah cukup jelas bukan ? Jika masih kurang jelas & belum paham, kalian search aja di google, banyak blogger yang membahas secara detail, aku mah apa atuh Noob 😅 dan sepertinya cukup sampai disini aja dulu gaes!
Soal pengalaman aku dulu, sebaiknya gk usah di share aja ya, atau nanti saja dilain waktu, kasian entar bacanya capek 😅 yang intinya semoga pertanya orang tersebut dapat terbantu dengan postingan ini, mengenai Cara Memasang Notifications Cookies di Blogspot! dan untuk soal CSS / HTML, hanya itu yang dapat aku bagikan! Dengan harapan bisa memberikan gambaran atas pertanyaannya tersebut & mungkin bisa sedikit bermanfaat buat pembaca semuanya 😊
Tapi karena kebetulan ada yang bertanya "Kak gimana sih, caranya buat tulisan yang ada di Zone Mod Apk, apa sih namanya? Saya kurang paham, tapi intinya notifikasi cooki gitu deh, tolong dong jelasin, saya lagi belajar ngeblog hehehe emoticon
Oleh karena itu aku jawab di postingan ini, Dengan harapan dan tujuan mungkin akan sedikit lebih berguna lagi buat kalian semuanya yang belum tau caranya dan ingin memasangnya juga di blogspot kalian. Dan di bawah ini contoh nya yang mau di bahas kali ini
Oke kita lanjut aja gaes! Sesuai dengan peraturan dari Uni Eropa, semua situs atau blog harus memasang notifikasi cookies (EU Cookie Law) di situs atau di blog. Aturan ini disebut sebagai General Data Protection Regulation (GDPR) atau Regulasi Perlindungan Data yang digunakan untuk mengatur perlindungan data pribadi di dalam maupun di luar Uni Eropa.
Dengan peraturan tersebut blogger selaku miliknya Google, sudah memasang notifikasi cookies secara otomatis disemua blog yang dibuat dari platform blogger yang akan tayang jika pengunjung blog kita dari negara-negara Eropa.
Untuk informasi lebih lengkap mengenai GDPR ini, silahkan kamu kunjungi link ini https://id.wikipedia.org/wiki/Regulasi_Umum_Perlindungan_Data, Lalu bagaimana cara memasang notifikasi cookie di blog?
Jika kamu ingin memasang notifikasi cookies di blog yang dimana nofitikasi cookies yang aku bagikan ini akan selalu tampil dari semua negara-negara para pengunjung blog kita ( jadi tidak hanya akan tampil jika pengunjung dari eropa saja! Tapi dari semua negara ) yuk langsung aja simak langkah-langkahnya dibawah ini.
Cara Memasang Notifikasi Cookies di Blog
1. Loginlah ke akun blogger2. Klik menu tema / thema disebelah kiri
3. Klik edit html
4. Letakkan kode notifikasi cookies dibawah ini tepat diatas </head> atau <!--</head>--></head>
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js">
</script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "green"
},
"button": {
"background": "black",
"text": "white",
"border": "white"
}
},
"content": {
"href": "https://cara-ocha.blogspot.com/p/privacy.html"
}
})});
</script>
Keterangan :
Perhatikanlah kode notifikasi cookies diatas yang aku kasih tag mark.
( silahkan ganti dengan warna background sesuai selera masing-masing agar sesuai dengan warna blog kalian, di sini dengan warna background Green / Hijau
"background": "black"
Ini dengan tampilan button / tombol dengan warna background nya Black / Hitam, jadi bisa kalian ubah bagian nama warna ini dengan nama warna sesuai keinginan kalian!
Ini tampilan text dan juga text yang berada di dalam tombol / button, dengan warna White / Putih bisa kalian ubah juga dengan nama warna sesuka kalian, misal jadi warna hitam dsb!.
Kalau yang ini border button, bisa kalian ubah juga jika tidak suka dengan tampilan tombol ber'border White / Putih dengan background Black / Hitam, misal di samakan saja antara background dan border jadi warna hitam!
Gimana, sangat mudah kan gaes? Tinggal copas langsung jadi 😅 ( mudah bagi yang sudah tau, gk mudah bagi yang belum tau, makanya aku kasih tau & semoga dapat membantu buat kalian yang belum tau! )..
Btw terasa simple cuma gitu doang ya! Terasa masih pengen ngetik 😅 boleh ya sedikit aku berbagi pengalaman ( di baca alhamdulillah, enggk juga gk apa-apa kok ) 😊 intinya sih yang mau aku share pengalaman ini, masih ada kaitannya dengan pertanyaan orang tersebut! Yaitu soal CSS & HTML
Oke deh langsung aja ya gaes! pengalaman aku saat dulu di awal-awal baru mengenal dunia internet ( Khusus nya dunia Blogging ) melihat blog orang lain kesannya terasa wow banget gitu 😅
Dari rasa wow tersebut, timbul banyak pertanyaan "Gimana ya caranya bikin seperti ini / itu" ( karena masih malu bertanya di tambah lagi belum tau harus nanya kesiapa & di mananya!
Jadi akhirnya aku memutuskan untuk berpikir dan berusaha membuatnya sendiri padahal jujur saja belum tau cara buatnya seperti apa dan bagaimananya 😅
Tapi yang pasti saat itu aku masih belajar tahap dasar mengenai CSS & HTML gaes! Karena memang tahapan awal harus tau dulu dasar-dasar / pehamanan arti dari kode HTML / CSS tersebut
Sedikit aku kasih gambaran dulu, apa sih HTML & CSS itu ? ( Sekedar sharing saja yang mungkin masih berguna buat kalian yang baru pertama kalinya ingin membuat blog / web dan belum paham soal kedua jenis tersebut )
Jadi CSS itu singkatan dari Cascading Style Sheet yang digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.
CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. hanya perlu menulis markup untuk situs.
Tags, seperti <font> diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini.
HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.
Tak hanya penting di sisi teknis, CSS juga berpengaruh pada tampilan sebuah website. Tentunya kalian tidak ingin website terlihat seperti situs yang ‘telanjang’ tanpa modifikasi apa pun, bukan?
Lalu bagaimana cara melihat situs web / blog tanpa CSS ? 🤔 Mudah saja bagi kalian untuk mengetahui mana website yang menggunakan CSS dan mana yang tidak.
Kalian pasti pernah membuka website, tapi sesaat kemudian gagal loading dan malah menampilkan background putih yang didominasi teks hitam dan biru. Situasi ini menggambarkan bahwa CSS pada situs tersebut tidak dapat di-load dengan benar atau situs sama sekali tidak memiliki CSS. Umumnya, situs seperti ini hanya menerapkan HTML.
Sebelum menggunakan CSS, semua stylizing harus disertakan ke dalam markup HTML. Itu berati kalian harus mendeskripsikan semua background, warna font, alignment, dan lain-lain secara terpisah.
Dengan CSS, kalian dapat mengatur tampilan semua aspek pada file yang berbeda, lalu menentukan style, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah di-maintain.
Singkatnya, dengan CSS, kalian tidak perlu mendeskripsikan tampilan dari masing-masing elemen secara berulang-ulang. Kalian tidak membuang-buang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir.
Karena opsi kustomisasi yang ada hampir tak terbatas, CSS memungkinkan kamu untuk menerapkan berbagai macam style pada satu halaman HTML
Cara kerjanya CSS menggunakan bahasa Inggris sederhana berbasis syntax yang dilengkapi dengan sekumpulan rule yang mengaturnya. Seperti yang telah di sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan elemen style, hanya markup halaman saja. HTML dirancang semata-mata untuk mendeskripsikan konten. Sebagai contoh: <p>This is a paragraph.</p>
Satu yang menjadi pertanyaannya sekarang, bagaimana caranya style paragraf? Struktur syntax CSS cukup sederhana. Struktur ini memiliki selector dan declaration block. Pilih elemen yang diinginkan, kemudian deklarasi (declare) yang harus kalian lakukan terhadap elemen tersebut. Sangat mudah, kan?
Ada berbagai rule yang harus diingat. Meskipun demikian, rule struktur cukup simpel dan sederhana.Selector mengarah ke elemen HTML yang ingin kamu ubah tampilannya. Declaration block memuat satu atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma.
Setiap deklarasi menyertakan nama dan value dari properti CSS, yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi oleh tanda kurung kurawal.
Mari kita lihat contoh di bawah ini :
Semua elemen <p> ditandai dengan warna biru dan hurufnya ditebalkan (bold).
p {Contoh lain, semua elemen <p> diposisikan di tengah (center-aligned), dengan lebar 16px, dan berwarna pink
color: blue;
text-weight: bold;
}
p {Gimana gaes! Sampe sejauh ini sudah cukup puas / paham atau belum cukup puas / belum paham ? Baiklah jika masih belum cukup, mari kita lanjutkan membacanya 😅
text-align: center;
font-size: 16px;
color: pink;
}
Kita bahas beberapa style CSS, yakni Inline, External, dan Internal.
Jika ingin membuat website, pilihlah website builder yang tepat ( Bisa kalian search saja di google 😅 ), terdapat tool builder yang menawarkan drag & drop yang mudah. Gunakan template gratis yang tersedia di builder tersebut dan buat website dengan tampilan yang menarik. Dan Onlinekan situs kalian dengan segera!
CSS Style Internal, External, dan Inline
Akan sedikit aku bahas masing-masing CSS Style secara singkat. Untuk informasi atau pembahasan yang lebih mendalam, silahkan kalian ikhtiar sendiri 😅 dengan cara terus menggali informasi 😊 tentunya sudah banyak yang share kok! Tinggal siapkan kopi ☕ aja sama rokok sebatang juga gak apa-apa 😅 ( biar gak ngantuk saat bacanya! )..Ok lanjut gaes! CSS Style Internal diload setiap kali website di-refresh, dan kekurangannya adalah waktu loading semakin lama. CSS style yang sama pun tidak dapat digunakan di halaman lain karena sudah aktif terlebih dulu di suatu halaman. Namun di balik kekurangannya, CSS Style Internal memiliki beberapa kelebihan. Salah satunya adalah kemudahan dalam sharing template untuk pratinjau (preview) karena CSS hanya ada di satu halaman.
External merupakan CSS style yang paling mudah dan tidak menyulitkan. Semuanya dilakukan secara eksternal pada file .css. Styling dilakukan di file terpisah, lalu terapkan CSS ke halaman mana pun yang kamu inginkan. Sayangnya, CSS Style External juga memperlama waktu loading.
CSS Style Inline menggunakan elemen spesifik yang memuat tag <style>. Karena setiap komponen harus di-stylize, maka Inline bukan metode yang tepat jika kamu ingin menggunakan CSS dengan cepat. Namun di sisi lain, hal tersebut mendatangkan keuntungan. Misalnya, jika kamu ingin mengubah satu elemen, atau menampilkan pratinjau dengan cepat, atau kamu tidak punya akses ke file CSS.
Kesimpulan
Berikut beberapa poin yang dapat disimpulkan dari pembahasan mengenai CSS tersebut!..Semoga pembahasan mengenai CSS ini dapat berguna bagi kalian semuanya yang masih dalam tahap belajar ( sama seperti aku masih terus belajar karena dari 2005 s/d sekarang 2020 aku belum bisa apa-apa 😂 Newbie berkarat wkwkwkwk ) Noob kok bangga ya 🙄 bangga nya tulisan noob di baca sama kalian hehe!
Btw sudah cukup kan ? Dengan penjelasan soal CSS juga ? Sudah menyinggung soal HTML jadi aku rasa tanpa harus di jelasin lagi ? 🤔 Tapi oke deh biar gk nanggung, sedikit aku ulas juga mengenai HTML nya ( itu pun jika kalian masih mau melanjutkan membacanya 😌 )
Singat nya saja HTML atau kepanjangan dari Hypertext Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegrasi.
Lebih lanjutnya HTML memungkinkan seorang user untuk membuat dan menyusun bagian paragraf, heading, link atau tautan, dan blockquote untuk halaman web dan aplikasi.
HTML bukanlah bahasa pemrograman, dan itu berarti HTML tidak punya kemampuan untuk membuat fungsionalitas yang dinamis. Sebagai gantinya, HTML memungkinkan user untuk mengorganisir dan memformat dokumen, sama seperti Microsoft Word.
Ketika bekerja dengan HTML, kita ( sebut saja
<p>This is how you add a paragraph in HTML.</p>
<p>You can have more than one!</p>
Kesimpulannya, pengertian HTML sebagai bahasa mark up sangatlah mudah untuk dipahami bahkan bagi webmaster pemula di bidang web development sekalipun.
Sejarah HTML
HTML dibuat oleh Tim Berners-Lee, seorang ahli fisika di lembaga penelitian CERN yang berlokasi di Swiss. Dia memiliki ide tentang sistem hypertext yang berbasis internet.Hypertext merujuk pada teks yang memuat referensi (link) ke teks lain yang bisa diakses langsung oleh viewer. Tim merilis versi pertama HTML pada tahun 1991, dan di dalamnya terdiri atas 18 HTML tag. Sejak saat itu, setiap kali bahasa HTML merilis versi teranyarnya, selalu ada tag dan attribute (tag modifier) terbaru.
Berdasarkan HTML Element Reference milik Mozilla Developer Network untuk saat ini, ada 140 HTL tag meskipun sebagiannya sudah usang (tidak lagi didukung oleh versi terbaru browser).
Berkat popularitasnya yang terus meningkat, HTML kini dianggap sebagai web standard yang resmi. Spesifikasi HTML di-maintain dan dikembangkan oleh World Wide Web Consortiumm (W3C). Cek versi terbaru dari bahasa ini di website W3C
Upgrade HTML besar-besaran terjadi pada tahun 2014, dan hasilnya adalah pengenalan HTML5. Pada upgrade tersebut, terdapat semantic baru yang memberitahukan arti dari kontennya sendiri, seperti <article>, <header>, dan <footer>
Bagaimana Cara Kerja HTML?
Dokumen HTML adalah file yang diakhiri dengan ekstensi .html atau .htm Ekstensi file ini bisa dilihat dengan mengunakan web browser apa pun (seperti Google Chrome, Safari, atau Mozila Firefox). Browser tersebut membaca file HTML dan me-render kontennya sehingga user internet bisa melihat dan membacanya.Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang berbeda-beda. Contohnya, beranda utama, halaman ‘tentang kami’, halaman kontak yang semuanya memiliki dokumen HTML terpisah.
Masing-masing halaman HTML terdiri atas seperangkat tags (bisa disebut juga elements), yang mengacu pada building block halaman website. Tag tersebut membuat hirarki yang menyusun konten hingga menjadi bagian, paragraf, heading, dan block konten lainnya.
Sebagian besar element HTML memiliki tag pembuka dan penutup yang menggunakan syntax <tag></tag>.
Berikut contoh kode dari susunan atau struktur HTML :
<div>
<h1>The Main Heading</h1>
<h2>A catchy subheading</h2>
<p>Paragraph one</p>
<img src="/" alt="Image">
<p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>
</div>
Gambaran Umum Tentang Tag HTML yang Paling Sering Digunakan
Tag HTML memiliki dua tipe utama : block-level dan inline tagsContoh dari tag block adalah heading dan paragraf.
Contoh dari tag inline adalah link dan emphasized strings.
Tag Block-Level
Tiga tag block-level yang harus dimiliki oleh setiap dokumen HTML adalah <html>, <head>, dan <body>.1. Sebagai Contoh
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>
2. Penjelasan
3. Sebagai contoh, di bawah ini adalah tampilan dasar dari list tidak berurutan dalam HTML
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
Tag Inline
Sebagian besar tag inline digunakan untuk memformat teks. Sebagai contoh, tag <strong></strong> akan render elemen ke format bold, sedangkan tag <em></em> akan ditampilkan dalam format italicHyperlink adalah elemen inline yang mewajibkan adanya tag <a></a> dan attribute href untuk mengindikasi tujuan link :
<a href="https://example.com/">Click me!</a>
Maka kata / tulisan Click me tersebut dapat membuka sebuah link
Gambar (image) juga merupakan elemen inline. Kamu dapat menambahkan satu gambar dengan menggunakan <img> tanpa harus membubuhkan tag penutup. Hanya saja, kamu disarankan menggunakan attribute src untuk menentukan path gambar, misalnya:
<img src="/images/example.jpg" alt="Example image">
Perkembangan HTML! Bagaimana Perbedaan HTML dan HTML5?
Sejak hari pertama diperkenalkan, HTML telah melewati perkembangan yang cukup signifikan. W3C terus merilis versi dan update terbaru sembari mencetak sejarah dan mengukuhkan keberadaannya.HTML4 (belakangan ini sering disebut sebagai “HTML”) dirilis pada tahun 1999 dan versi terbarunya diperkenalkan pada publik pada tahun 2014. Dikenal sebagai HTML5, versi terbaru ini menambahkan lebih banyak fitur baru ke bahasa mark up ini.
Salah satu fitur canggih di HTML5 adalah support untuk embed audio dan video. Jadi, alih-alih menggunakan Flash player, kita bisa melakukan file video dan audio yang di-embed ke halaman website dengan memanfaatkan tag <audio></audio> dan <video></video>. Fitur tersebut juga memiliki support bawaan untuk grafis vektor (SVG) yang dapat diskalakan dan MathML untuk formula matematika dan ilmiah.
HTML5 juga memperkenalkan beberapa perbaikan pada semantic. Tag semantic baru mengirimkan informasi pada browser tentang arti konten, yang bermanfaat tak hanya bagi pembaca, tapi juga mesin pencari.
Tag semantic yang paling banyak digunakan adalah <article></article>, <section></section>, <aside></aside>, <header></header>, dan <footer></footer>.
Kelebihan dan Kekurangan HTML
Sama seperti hal teknis lainnya dalam dunia web, HTML juga punya kelebihan dan kekurangannya.Kelebihan :
Kekurangan :
Bagaimana Hubungan Antara HTML, CSS, dan JavaScript?
Meskipun dinyatakan sebagai bahasa mark up yang powerful, HTML tidak sepenuhnya bisa membuat website yang profesional dan responsif. HTML hanya bisa digunakan untuk menambah elemen dan membuat struktur konten.Namun di satu sisi, HTML bisa bekerja secara maksimal dengan dua bahasa frontend: CSS (Cascading Style Sheets) dan JavaScript. Jika digabungkan, kedua bahasa frontend ini bisa meningkatkan pengalaman user dan mengaktifkan fungsi yang lebih canggih.
Misalkan HTML adalah orang yang tidak memakai satu helai benang pun, CSS adalah bajunya, dan JavaScript adalah aktivitas dan sikapnya.
Jadi… Apa Itu HTML?
HTML adalah bahasa mark up web yang utama dan dijalankan secara alami di setiap browser serta di-maintain oleh World Wide Web Consortium.Berdasarkan cara kerja HTML, kamu bisa menggunakannya untuk membuat struktur konten pada website dan aplikasi web. HTML merupakan level terbawah dari teknologi frontend dan berfungsi sebagai dasar styling yang bisa kamu tambahkan dengan CSS dan fungsionalitas yang dapat dijalakan menggunakan JavaScript!
Nah, gimana gaes! Sudah cukup jelas bukan ? Jika masih kurang jelas & belum paham, kalian search aja di google, banyak blogger yang membahas secara detail, aku mah apa atuh Noob 😅 dan sepertinya cukup sampai disini aja dulu gaes!
Soal pengalaman aku dulu, sebaiknya gk usah di share aja ya, atau nanti saja dilain waktu, kasian entar bacanya capek 😅 yang intinya semoga pertanya orang tersebut dapat terbantu dengan postingan ini, mengenai Cara Memasang Notifications Cookies di Blogspot! dan untuk soal CSS / HTML, hanya itu yang dapat aku bagikan! Dengan harapan bisa memberikan gambaran atas pertanyaannya tersebut & mungkin bisa sedikit bermanfaat buat pembaca semuanya 😊