Cara Menggunakan Breakpoint dan Kueri Media dengan Klip Latar Belakang di Tailwind

Cara Menggunakan Breakpoint Dan Kueri Media Dengan Klip Latar Belakang Di Tailwind

Saat membuat bagian berbeda di halaman web, mungkin ada skenario di mana pemrogram perlu memotong latar belakang atau memodifikasinya untuk mengumpulkan konten. Metodologi ini membantu dalam mengelola konten yang ditambahkan secara efektif serta menata bagian halaman yang berbeda.

Blog ini menguraikan konsep inti berikut:

Bagaimana Cara Menggunakan/Memanfaatkan Breakpoint dan Kueri Media dengan Klip Latar Belakang di Tailwind?
Menerapkan Breakpoint dengan Klip Latar Belakang di Tailwind.
Menerapkan Kueri Media dengan Klip Latar Belakang di Tailwind.

Bagaimana Cara Menggunakan/Memanfaatkan Breakpoint dan Kueri Media dengan Klip Latar Belakang di Tailwind?

“ bg-klip-{kata kunci} ” Utilitas digunakan untuk mengatur kotak pembatas latar belakang elemen. Utilitas ini dapat digunakan dengan beberapa properti, seperti “ kotak bantalan ', ' kotak perbatasan ', ' kotak konten ', Dan ' kolom tulisan ”.

Contoh 1: Menerapkan Breakpoint dengan Klip Latar Belakang di Tailwind

Contoh ini menerapkan breakpoint dengan Klip Latar Belakang melalui penerapan “ bg-klip-{kata kunci} ” utilitas dengan “ md ” yaitu, layar berukuran sedang dan “ lg ” yaitu, kelas layar berukuran besar:

< html >
< kepala >
< meta rangkaian karakter = 'utf-8' >
< meta nama = 'area pandang' isi = 'lebar=lebar perangkat, skala awal=1' >
< naskah src = 'https://cdn.tailwindcss.com' < / naskah >
< / kepala >
< tubuh >
< area teks kelas = 'bg-clip-border p-6 bg-kuning-500 border-4 border-red-500 border-dash md:bg-clip-text lg:bg-clip-padding' > Ini adalah CSS Tailwind < / area teks >
< / tubuh >
< / html >

Menurut baris kode ini:

Pertama, tentukan jalur CDN untuk menggunakan fungsi Tailwind.
Kemudian, buat elemen “” yang terdiri dari “ <strong> bg-klip-{kata kunci}</strong> ” utilitas sedemikian rupa sehingga disetel ke “berbatasan” pada layar berukuran kecil dan disetel ke “ <strong> bg-klip-teks</strong> ' Dan ' <strong> bg-klip-padding</strong> ” utilitas pada layar berukuran sedang dan besar melalui “ <strong> md</strong> ' Dan ' <strong> lg</strong> ” masing-masing kelas.</li> </ul> <p> <strong> Catatan:</strong> Menentukan utilitas sama saja dengan menentukannya di “ <strong> sm</strong> ' kelas.</p><hr> <br /> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4062866992167421" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4062866992167421" data-ad-slot="9858463164" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><br /> <hr> <p> <strong> Keluaran</strong> </p> <p> <img class="alignnone wp-image-392117 size-full" alt="" src="https://softoban.com/img/other/ED/how-to-use-breakpoints-and-media-queries-with-background-clip-in-tailwind-1.gif"></p> <br /> <ins class="staticpubads89354" data-sizes-desktop="728x90,750x100,750x200,750x300" data-sizes-mobile="300x250,336x280,360x300" data-slot="5"></ins><br /> <p> Hasil ini menandakan bahwa saat ukuran layar diperbesar, latar belakang akan terpotong sesuai dengan itu.</p> <h2 id="c"> <strong> Contoh 2: Menerapkan Kueri Media dengan Klip Latar Belakang di Tailwind</strong> </h2> <p> Demonstrasi kode berikut menerapkan Kueri Media dengan “Klip Latar Belakang” melalui “ <strong> @media</strong> ” aturan dan parameter yang ditentukan:</p> <!DOCTYPEhtml> <br> < <a href="http://december.com/html/4/element/html.html"><span class="kw2"> html</span></a> > <br> < <a href="http://december.com/html/4/element/head.html"><span class="kw2"> kepala</span></a> > <br> < <a href="http://december.com/html/4/element/meta.html"><span class="kw2"> meta</span></a> <span class="kw3"> rangkaian karakter</span><span class="sy0"> =</span><span class="st0"> 'utf-8'</span> > <br> < <a href="http://december.com/html/4/element/meta.html"><span class="kw2"> meta</span></a> <span class="kw3"> nama</span><span class="sy0"> =</span><span class="st0"> 'area pandang'</span> <span class="kw3"> isi</span><span class="sy0"> =</span><span class="st0"> 'lebar=lebar perangkat, skala awal=1'</span> > <br> < <a href="http://december.com/html/4/element/script.html"><span class="kw2"> naskah</span></a> <span class="kw3"> src</span><span class="sy0"> =</span><span class="st0"> 'https://cdn.tailwindcss.com'</span> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/script.html"><span class="kw2"> naskah</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/head.html"><span class="kw2"> kepala</span></a> > <br> < <a href="http://december.com/html/4/element/body.html"><span class="kw2"> tubuh</span></a> > <br> < <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> area teks</span></a> <span class="kw3"> kelas</span><span class="sy0"> =</span><span class="st0"> 'p-6 bg-kuning-500 perbatasan-4 perbatasan-merah-500 perbatasan-putus-putus'</span> <span class="kw3"> pengenal</span><span class="sy0"> =</span><span class="st0"> 'suhu'</span> >Ini adalah CSS Tailwind<<span class="sy0"> /</span> <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> area teks</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/body.html"><span class="kw2"> tubuh</span></a> > <br> < <a href="http://december.com/html/4/element/style.html"><span class="kw2"> gaya</span></a> <span class="kw3"> jenis</span><span class="sy0"> =</span><span class="st0"> 'teks/css'</span> > <br> #temp<span class="br0"> {</span> <br> klip latar belakang: kotak perbatasan; <br> <span class="br0"> }</span> <br> @<span class="kw3"> media</span> <span class="br0"> (</span> maksimal-<span class="kw3"> lebar</span> :500 piksel<span class="br0"> )</span><span class="br0"> {</span> <br> #temp<span class="br0"> {</span> <br> klip latar belakang: kotak bantalan; <br> <span class="br0"> }</span><span class="br0"> }</span> <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/style.html"><span class="kw2"> gaya</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/html.html"><span class="kw2"> html</span></a> ><p> Dalam cuplikan kode ini:</p> <ul> <li> Ulangi metodologi untuk menggabungkan jalur CDN Tailwind dan membuat elemen “<textarea>”.</li> <li> Sekarang, dalam kode CSS, tentukan default “ <strong> klip latar belakang</strong> ” properti sebagai “ <strong> kotak perbatasan</strong> ”.</li> <li> Setelah itu, terapkan “ <strong> @media</strong> ” aturan dengan parameter tertentu sehingga selama lebar layar sama dengan “500” piksel, “ <strong> klip latar belakang</strong> ” properti disetel ke “ <strong> kotak bantalan</strong> ”.</li> </ul> <p> <strong> Keluaran</strong> </p> <p> <img class="alignnone wp-image-392118 size-full" alt="" src="https://softoban.com/img/other/ED/how-to-use-breakpoints-and-media-queries-with-background-clip-in-tailwind-2.gif"></p> <p> Dari hasil ini, dapat diverifikasi bahwa Klip Latar Belakang ditransisikan sesuai dengan perubahan lebar layar.</p> <h2> <strong> Kesimpulan</strong> </h2> <p> Klip Latar Belakang dapat digunakan dengan Tailwind Breakpoints dan Media Queries melalui aplikasi “ <strong> bg-klip-{kata kunci}</strong> ” utilitas dengan “ <strong> md</strong> ' atau ' <strong> lg</strong> ” kelas, atau melalui “ <strong> @media</strong> ' aturan. Kata kunci dapat diatur menjadi “padding-box”, “border-box”, “content-box”, “text-box” dan banyak lagi. Dalam panduan ini, kami telah mendemonstrasikan penggunaan Breakpoint dan Kueri Media dengan Klip Latar Belakang di Tailwind.</p> </article> <div class="d-flex justify-content-center"> <script type="text/javascript">(function() { if (window.pluso)if (typeof window.pluso.start == "function") return; if (window.ifpluso==undefined) { window.ifpluso = 1; var d = document, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true; s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js'; var h=d[g]('body')[0]; h.appendChild(s); }})();</script> <div class="pluso" data-background="transparent" data-options="big,round,line,horizontal,nocounter,theme=06" data-services="facebook,twitter,email,print"></div> </div> <div class="tag-widget post-tag-container mb-5 mt-5"> <div class="tagcloud"> <a href="/lainnya/" class="tag-cloud-link">Lainnya</a> </div> </div> </div> </div> <div class="col-lg-4 sidebar ftco-animate bg-light pt-5"> <div class="sidebar-box ftco-animate"> <h3 class="sidebar-heading">Kategori</h3> <ul class="categories"> <li> <a href="/raspberry-pi/">Raspberry Pi</a> </li><li> <a href="/ethernet/">Ethernet</a> </li><li> <a href="/other/">Lainnya</a> </li><li> <a href="/nano/">Nano</a> </li><li> <a href="/zoom/">Perbesar</a> </li><li> <a href="/cinnamon/">Kayu Manis</a> </li><li> <a href="/reviews/">Ulasan</a> </li><li> <a href="/zorinos/">Zorinos</a> </li><li> <a href="/radio/">Radio</a> </li><li> <a href="/minecraft/">Minecraft</a> </li><li> <a href="/ssh/">Ssh</a> </li><li> <a href="/openvas/">Openvas</a> </li><li> <a href="/compression/">Kompresi</a> </li><li> <a href="/laravel/">Laravel</a> </li><li> <a href="/aircrack/">Retakan Udara</a> </li><li> <a href="/office-productivity-software/">Perangkat Lunak Produktivitas Kantor</a> </li><li> <a href="/boot/">Sepatu Bot</a> </li><li> <a href="/system-calls/">Panggilan Sistem</a> </li><li> <a href="/sysctl/">Sysctl</a> </li><li> <a href="/networking/">Jaringan</a> </li><li> <a href="/gpu/">Gpu</a> </li><li> <a href="/gimp/">Gimp</a> </li><li> <a href="/plex/">Kompleks</a> </li><li> <a href="/uefi/">Uefi</a> </li><li> <a href="/docker/">Buruh Pelabuhan</a> </li><li> <a href="/firewall/">Firewall</a> </li><li> <a href="/wireshark/">Wireshark</a> </li><li> <a href="/synology/">Sinologi</a> </li><li> <a href="/pdf/">Pdf</a> </li><li> <a href="/ethereum/">Ethereum</a> </li><li> <a href="/parrot-os/">Os Burung Beo</a> </li><li> <a href="/sublime/">Sublim</a> </li><li> <a href="/selinux/">Selinux</a> </li><li> <a href="/hyper-v/">Hiper-V</a> </li><li> <a href="/phone/">Telepon</a> </li><li> <a href="/kodi/">Kode</a> </li><li> <a href="/gnome/">Gnome</a> </li><li> <a href="/manjaro/">Kelezatan</a> </li><li> <a href="/mouse/">Mouse</a> </li><li> <a href="/nmap/">Nmap</a> </li><li> <a href="/metasploit/">Metasploit</a> </li><li> <a href="/torrent/">Torrent</a> </li><li> <a href="/tablet/">Tablet</a> </li><li> <a href="/pycharm/">Pycharm</a> </li><li> <a href="/curl/">Keriting</a> </li><li> <a href="/kde/">Di Mana</a> </li><li> <a href="/gcc/">Gcc</a> </li><li> <a href="/fonts/">Font</a> </li><li> <a href="/ssl/">Ssl</a> </li><li> <a href="/nvidia/">Nvidia</a> </li><li> <a href="/images/">Gambar-Gambar</a> </li><li> <a href="/usb/">Usb</a> </li><li> <a href="/squid/">Cumi-Cumi</a> </li><li> <a href="/mate/">Pasangan</a> </li><li> <a href="/vlc-media-player/">Pemutar Media Vlc</a> </li><li> <a href="/dns/">Dns</a> </li><li> <a href="/bitcoin/">Bitcoin</a> </li><li> <a href="/keyboard/">Papan Ketik</a> </li><li> <a href="/inkscape/">Pemandangan Tinta</a> </li><li> <a href="/encryption/">Enkripsi</a> </li><li> <a href="/fedora/">Fedora</a> </li><li> <a href="/owncloud/">Awan Sendiri</a> </li><li> <a href="/scanner/">Pemindai</a> </li><li> <a href="/atom/">Atom</a> </li><li> <a href="/red-hat/">Topi Merah</a> </li><li> <a href="/teamviewer/">Teamviewer</a> </li><li> <a href="/skype/">Skype</a> </li><li> <a href="/vpn/">Vpn</a> </li><li> <a href="/xfce/">Xfce</a> </li><li> <a href="/jupyter-notebook/">Buku Catatan Jupyter</a> </li><li> <a href="/nfs/">Nfs</a> </li><li> <a href="/blog/">Blog</a> </li><li> <a href="/lvm/">Lvm</a> </li><li> <a href="/suse/">Suse</a> </li><li> <a href="/media-players/">Pemutar Media</a> </li><li> <a href="/posix/">Posix</a> </li><li> <a href="/steam/">Uap</a> </li><li> <a href="/jenkins/">Jenkins</a> </li><li> <a href="/power/">Kekuasaan</a> </li><li> <a href="/oracle-linux/">Oracle Linux</a> </li><li> <a href="/netstat/">Status Bersih</a> </li><li> <a href="/kvm/">Meter Persegi</a> </li><li> <a href="/bluetooth/">Bluetooth</a> </li><li> <a href="/ssd/">Ssd</a> </li><li> <a href="/grep/">Pegangan</a> </li><li> <a href="/gentoo/">Gentoo</a> </li><li> <a href="/odyssey/">Pengembaraan</a> </li><li> <a href="/audio/">Audio</a> </li><li> <a href="/cpu/">Cpu</a> </li><li> <a href="/tensorflow/">Aliran Tensor</a> </li><li> <a href="/autodesk/">Meja Otomatis</a> </li><li> <a href="/lubuntu/">Lubuntu</a> </li><li> <a href="/llvm/">Llvm</a> </li><li> <a href="/windows/">Windows</a> </li><li> <a href="/microsoft-edge/">Microsoft Edge (Warisan)</a> </li><li> <a href="/internet-explorer/">Internet Explorer</a> </li><li> <a href="/office/">Kantor</a> </li><li> <a href="/lainnya/">Lainnya</a> </li><li> <a href="/kamera-web/">kamera web</a> </li><li> <a href="/pemutar-media/">pemutar media</a> </li><li> <a href="/cpanel/">cPanel</a> </li><li> <a href="/haproxy/">haproxy</a> </li><li> <a href="/sublim/">sublim</a> </li><li> <a href="/ubuntu-24-04-cat/">Ubuntu 24.04</a> </li><li> <a href="/cloud-berikutnya/">cloud berikutnya</a> </li><li> <a href="/kebajikan/">kebajikan</a> </li><li> <a href="/usb-passthrough/">usb-passthrough</a> </li><li> <a href="/boot-aman/">#boot-aman</a> </li> </ul> </div> <div class="sidebar-box ftco-animate"> <h3 class="sidebar-heading">Pesan Populer</h3> <div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/B0/list-of-remotes-for-a-git-repository-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/daftar-remote-untuk-repositori-git">Daftar Remote untuk Repositori Git?</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/F1/terraform-state-management-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/manajemen-negara-terraform">Manajemen Negara Terraform</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/5C/how-to-use-cat-command-in-linux-1.jpg);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-menggunakan-perintah-cat-di-linux">Cara Menggunakan Perintah Cat di Linux</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/FE/how-to-temporarily-deactivate-facebook-on-android-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/bagaimana-cara-menonaktifkan-sementara-facebook-di-android">Bagaimana Cara Menonaktifkan Sementara Facebook di Android?</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/AE/how-to-delete-dataset-on-hugging-face-step-by-step-method-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-menghapus-dataset-di-wajah-pelukan-metode-langkah-demi-langkah">Cara Menghapus Dataset di Wajah Pelukan – Metode Langkah-demi-Langkah</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/blog/85/regfileexport-helps-you-export-data-from-offline-registry-hives-winhelponline.png);"></a> <div class="text"> <h3 class="heading"> <a href="/regfileexport-helps-you-export-data-from-offline-registry-hives-winhelponline">RegFileExport Membantu Anda Mengekspor Data dari Kumpulan Registri Offline - Winhelponline</a> </h3> <div class="meta"> <div> <a href="/blog/"><span class="icon-chat"></span> Blog</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/87/how-do-i-list-processes-running-in-a-docker-container-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/bagaimana-cara-membuat-daftar-proses-yang-berjalan-di-wadah-docker">Bagaimana cara membuat daftar proses yang berjalan di wadah Docker?</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/24/what-are-roblox-general-chat-and-keyboard-issues-on-computer-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/apa-masalah-obrolan-umum-dan-papan-ketik-roblox-di-komputer">Apa Masalah Obrolan Umum dan Papan Ketik Roblox di Komputer</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/9E/wien-bridge-oscillator-tutorial-theory-1.jpg);"></a> <div class="text"> <h3 class="heading"> <a href="/tutorial-teori-osilator-jembatan-wien">Tutorial & Teori Osilator Jembatan Wien</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/90/can-i-run-arduino-24/7-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/bisakah-saya-menjalankan-arduino-24/7">Bisakah Saya Menjalankan Arduino 24/7</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/8D/how-to-install-an-oracle-instant-client-for-toad-for-oracle-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/bagaimana-cara-memasang-klien-instan-oracle-untuk-toad-untuk-oracle">Bagaimana Cara Memasang Klien Instan Oracle untuk Toad untuk Oracle?</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/90/how-to-install-fonts-on-raspberry-pi-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-menginstal-font-di-raspberry-pi">Cara Menginstal Font di Raspberry Pi</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/12/how-to-create-file-in-bash-1.jpg);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-membuat-file-di-bash">Cara Membuat File di Bash</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/F6/how-to-update-and-commit-only-a-file-8217-s-permissions-using-git-version-control-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-memperbarui-dan-melakukan-hanya-izin-file-menggunakan-git-version-control">Cara Memperbarui dan Melakukan Hanya Izin File Menggunakan Git Version Control</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/windows/70/unspecified-error-when-adding-link-favorites-windows-vista.gif);"></a> <div class="text"> <h3 class="heading"> <a href="/unspecified-error-when-adding-link-favorites-windows-vista">Kesalahan tidak ditentukan saat menambahkan tautan ke Favorit di Windows Vista dan Windows 7 - Winhelponline</a> </h3> <div class="meta"> <div> <a href="/windows/"><span class="icon-chat"></span> Windows</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/A3/how-to-use-a-negative-space-value-in-tailwind-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/bagaimana-cara-menggunakan-nilai-ruang-negatif-di-tailwind">Bagaimana Cara Menggunakan Nilai Ruang Negatif di Tailwind?</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/C3/how-to-get-hands-on-experience-with-aws-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-mendapatkan-pengalaman-langsung-dengan-aws">Cara Mendapatkan Pengalaman Langsung dengan AWS</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/53/how-to-close-and-permanently-delete-your-microsoft-account-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/bagaimana-cara-menutup-dan-menghapus-akun-microsoft-anda-secara-permanen">Bagaimana Cara Menutup dan Menghapus Akun Microsoft Anda Secara Permanen?</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/17/es6-map-an-array-of-objects-to-return-an-array-of-objects-with-new-keys-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/es6-memetakan-array-objek-untuk-mengembalikan-array-objek-dengan-kunci-baru">ES6 Memetakan Array Objek untuk Mengembalikan Array Objek Dengan Kunci Baru</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div><div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/A9/how-to-use-the-abs-method-in-javascript-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-menggunakan-metode-abs-dalam-javascript">Cara Menggunakan Metode abs() dalam JavaScript</a> </h3> <div class="meta"> <div> <a href="/lainnya/"><span class="icon-chat"></span> Lainnya</a> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div>  <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div> <script src="https://softoban.com/template/js/jquery.min.js"></script> <script src="https://softoban.com/template/js/jquery-migrate-3.0.1.min.js"></script> <script src="https://softoban.com/template/js/popper.min.js"></script> <script src="https://softoban.com/template/js/bootstrap.min.js"></script> <script src="https://softoban.com/template/js/jquery.easing.1.3.js"></script> <script src="https://softoban.com/template/js/jquery.waypoints.min.js"></script> <script src="https://softoban.com/template/js/jquery.stellar.min.js"></script> <script src="https://softoban.com/template/js/owl.carousel.min.js"></script> <script src="https://softoban.com/template/js/jquery.magnific-popup.min.js"></script> <script src="https://softoban.com/template/js/aos.js"></script> <script src="https://softoban.com/template/js/jquery.animateNumber.min.js"></script> <script src="https://softoban.com/template/js/scrollax.min.js"></script> <script src="https://softoban.com/template/js/main.js"></script> <script async="" defer="" src="//www.instagram.com/embed.js"></script> <script async="" src="https://platform.twitter.com/widgets.js"></script> <script> window.onload = function(){ for(i in document.images) { if(document.images[i].naturalWidth==0){ if(window.location.pathname.length > 1){ document.images[i].style="display:none" } else { document.images[i].src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" } } } } $(document).ready(() => { $('nav').find('a').each(function(){ if($(this).attr('href') == window.location.pathname){ $(this).parent('li').addClass('active') } }) var wrapper = '<div class="embeded-video"></div>'; if($('iframe[width="560"]').length > 1){ $('.m_v').remove(); }else{ } $('iframe[src^="https://www.youtube.com/embed/"]').wrap(wrapper); let loc = window.location.pathname; if(loc == '/privacy-policy'){ $('div.embeded-video').remove(); $('blockquote').remove(); } }) </script> <script type="text/javascript" src="https://s.skimresources.com/js/192355X1670518.skimlinks.js"></script></body> </html>