Cara Menggunakan Titik Putus dan Pertanyaan Media dengan Klip Latar Belakang dalam Tailwind

Cara Menggunakan Titik Putus Dan Pertanyaan Media Dengan Klip Latar Belakang Dalam Tailwind

Semasa mencipta bahagian yang berbeza dalam halaman web, mungkin terdapat senario di mana pengaturcara perlu memotong latar belakang atau mengubah suainya untuk mengumpul kandungan. Metodologi ini membantu dalam mengurus kandungan yang dilampirkan dengan berkesan serta menggayakan bahagian halaman yang berbeza.

Blog ini menghuraikan konsep teras berikut:

Bagaimana untuk Menggunakan/Menggunakan Titik Putus dan Pertanyaan Media dengan Klip Latar Belakang dalam Tailwind?
Menggunakan Titik Putus dengan Klip Latar Belakang dalam Tailwind.
Menggunakan Pertanyaan Media dengan Klip Latar Belakang dalam Tailwind.

Bagaimana untuk Menggunakan/Menggunakan Titik Putus dan Pertanyaan Media dengan Klip Latar Belakang dalam Tailwind?

' bg-klip-{kata kunci} ” utiliti digunakan untuk menetapkan kotak sempadan latar belakang elemen. Utiliti ini boleh digunakan dengan berbilang sifat, seperti “ kotak padding ',' kotak sempadan ',' kotak kandungan ”, dan “ kotak teks ”.

Contoh 1: Menggunakan Titik Putus dengan Klip Latar Belakang dalam Tailwind

Contoh ini menggunakan titik putus dengan Klip Latar Belakang melalui “ bg-klip-{kata kunci} ' utiliti dengan ' md 'iaitu, skrin bersaiz sederhana dan ' lg ” iaitu, kelas skrin bersaiz besar:

< html >
< kepala >
< meta charset = 'utf-8' >
< meta nama = 'port view' kandungan = 'lebar=lebar peranti, skala awal=1' >
< skrip src = 'https://cdn.tailwindcss.com' >< / skrip >
< / kepala >
< badan >
< textarea kelas = 'bg-klip-sempadan p-6 bg-kuning-500 sempadan-4 sempadan-merah-500 sempadan-putus-putus md:bg-klip-teks lg:bg-klip-padding' > Ini ialah Tailwind CSS < / textarea >
< / badan >
< / html >

Mengikut baris kod ini:

Mula-mula, nyatakan laluan CDN untuk menggunakan fungsi Tailwind.
Kemudian, buat elemen '' yang terdiri daripada ' <strong> bg-klip-{kata kunci}</strong> ' utiliti supaya ia ditetapkan kepada 'sempadan' pada skrin bersaiz kecil dan ditetapkan kepada ' <strong> bg-klip-teks</strong> ” dan “ <strong> bg-klip-padding</strong> ' utiliti pada skrin bersaiz sederhana dan besar melalui ' <strong> md</strong> ” dan “ <strong> lg</strong> ” kelas masing-masing.</li> </ul> <p> <strong> Catatan:</strong> Menentukan utiliti adalah sama seperti menyatakannya dalam ' <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> Pengeluaran</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 bahawa apabila mengembangkan saiz skrin, latar belakang dipotong dengan sewajarnya.</p> <h2 id="c"> <strong> Contoh 2: Menggunakan Pertanyaan Media dengan Klip Latar Belakang dalam Tailwind</strong> </h2> <p> Demonstrasi kod berikut menggunakan Pertanyaan Media dengan 'Klip Latar Belakang' melalui ' <strong> @media</strong> ” peraturan dan parameter yang ditentukan:</p> <!DOCTYPE html> <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"> charset</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"> 'port view'</span> <span class="kw3"> kandungan</span><span class="sy0"> =</span><span class="st0"> 'lebar=lebar peranti, skala awal=1'</span> > <br> < <a href="http://december.com/html/4/element/script.html"><span class="kw2"> skrip</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"> skrip</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"> badan</span></a> > <br> < <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> textarea</span></a> <span class="kw3"> kelas</span><span class="sy0"> =</span><span class="st0"> 'p-6 bg-kuning-500 sempadan-4 sempadan-merah-500 sempadan-putus'</span> <span class="kw3"> ID</span><span class="sy0"> =</span><span class="st0"> 'temp'</span> >Ini ialah Tailwind CSS<<span class="sy0"> /</span> <a href="http://december.com/html/4/element/textarea.html"><span class="kw2"> textarea</span></a> > <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/body.html"><span class="kw2"> badan</span></a> > <br> < <a href="http://december.com/html/4/element/style.html"><span class="kw2"> gaya</span></a> <span class="kw3"> menaip</span><span class="sy0"> =</span><span class="st0"> 'teks/css'</span> > <br> #temp<span class="br0"> {</span> <br> klip latar belakang: kotak sempadan; <br> <span class="br0"> }</span> <br> @<span class="kw3"> media</span> <span class="br0"> (</span> maksimum-<span class="kw3"> lebar</span> :500px<span class="br0"> )</span><span class="br0"> {</span> <br> #temp<span class="br0"> {</span> <br> klip latar belakang: kotak padding; <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 coretan kod ini:</p> <ul> <li> Ulangi metodologi untuk menggabungkan laluan CDN Tailwind dan mencipta elemen '<textarea>'.</li> <li> Sekarang, dalam kod CSS, tentukan lalai “ <strong> klip latar belakang</strong> ” harta sebagai “ <strong> kotak sempadan</strong> ”.</li> <li> Selepas itu, laksanakan “ <strong> @media</strong> peraturan ' dengan parameter yang diberikan supaya selagi lebar skrin sama dengan '500' piksel, ' <strong> klip latar belakang</strong> ” harta ditetapkan kepada “ <strong> kotak padding</strong> ”.</li> </ul> <p> <strong> Pengeluaran</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> Daripada hasil ini, ia boleh disahkan bahawa Klip Latar Belakang dialihkan mengikut lebar skrin yang berubah.</p> <h2> <strong> Kesimpulan</strong> </h2> <p> Klip Latar Belakang boleh digunakan dengan Tailwind Breakpoints dan Pertanyaan Media melalui aplikasi “ <strong> bg-klip-{kata kunci}</strong> ' utiliti dengan ' <strong> md</strong> ” atau “ <strong> lg</strong> ” kelas, atau melalui “ <strong> @media</strong> ” peraturan. Kata kunci boleh ditetapkan kepada 'kotak padding', 'kotak sempadan', 'kotak kandungan', 'kotak teks' dan banyak lagi. Dalam panduan ini, kami telah menunjukkan penggunaan Titik Putus dan Pertanyaan Media dengan Klip Latar Belakang dalam 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="/lain-lain/" class="tag-cloud-link">Lain-lain</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/">Pai Raspberi</a> </li><li> <a href="/ethernet/">Ethernet</a> </li><li> <a href="/other/">Yang Lain</a> </li><li> <a href="/nano/">Nano</a> </li><li> <a href="/zoom/">Zum</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/">Bukaan Terbuka</a> </li><li> <a href="/compression/">Pemampatan</a> </li><li> <a href="/laravel/">Laravel</a> </li><li> <a href="/aircrack/">Kapal Terbang</a> </li><li> <a href="/office-productivity-software/">Perisian Produktiviti Pejabat</a> </li><li> <a href="/boot/">But</a> </li><li> <a href="/system-calls/">Panggilan Sistem</a> </li><li> <a href="/sysctl/">Sysctl</a> </li><li> <a href="/networking/">Rangkaian</a> </li><li> <a href="/gpu/">Gpu</a> </li><li> <a href="/gimp/">Curang</a> </li><li> <a href="/plex/">Plex</a> </li><li> <a href="/uefi/">Uefi</a> </li><li> <a href="/docker/">Tukang Dok</a> </li><li> <a href="/firewall/">Tembok Api</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 Parrot</a> </li><li> <a href="/sublime/">Luhur</a> </li><li> <a href="/selinux/">Selinux</a> </li><li> <a href="/hyper-v/">Hiper-V</a> </li><li> <a href="/phone/">Telefon</a> </li><li> <a href="/kodi/">Kod</a> </li><li> <a href="/gnome/">Gnome</a> </li><li> <a href="/manjaro/">Makanan Istimewa</a> </li><li> <a href="/mouse/">Tetikus</a> </li><li> <a href="/nmap/">Nmap</a> </li><li> <a href="/metasploit/">Metasploit</a> </li><li> <a href="/torrent/">Arus Deras</a> </li><li> <a href="/tablet/">Tablet</a> </li><li> <a href="/pycharm/">Pycharm</a> </li><li> <a href="/curl/">Kerinting</a> </li><li> <a href="/kde/">Di Mana</a> </li><li> <a href="/gcc/">Gcc</a> </li><li> <a href="/fonts/">Fon</a> </li><li> <a href="/ssl/">Ssl</a> </li><li> <a href="/nvidia/">Nvidia</a> </li><li> <a href="/images/">Gambar</a> </li><li> <a href="/usb/">Usb</a> </li><li> <a href="/squid/">Sotong</a> </li><li> <a href="/mate/">Jodoh</a> </li><li> <a href="/vlc-media-player/">Pemain Media Vlc</a> </li><li> <a href="/dns/">Dns</a> </li><li> <a href="/bitcoin/">Bitcoin</a> </li><li> <a href="/keyboard/">Papan Kekunci</a> </li><li> <a href="/inkscape/">Pemandangan Dalam</a> </li><li> <a href="/encryption/">Penyulitan</a> </li><li> <a href="/fedora/">Fedora</a> </li><li> <a href="/owncloud/">Owncloud</a> </li><li> <a href="/scanner/">Pengimbas</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 Nota 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/">Kejayaan</a> </li><li> <a href="/media-players/">Pemain Media</a> </li><li> <a href="/posix/">Posix</a> </li><li> <a href="/steam/">Wap</a> </li><li> <a href="/jenkins/">Jenkins</a> </li><li> <a href="/power/">Kuasa</a> </li><li> <a href="/oracle-linux/">Oracle Linux</a> </li><li> <a href="/netstat/">Netstat</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/">Cengkaman</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/">Autodesk</a> </li><li> <a href="/lubuntu/">Pelincir</a> </li><li> <a href="/llvm/">Llvm</a> </li><li> <a href="/windows/">Tingkap</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/">Pejabat</a> </li><li> <a href="/lain-lain/">Lain-lain</a> </li><li> <a href="/pai-raspberi/">Pai raspberi</a> </li><li> <a href="/kamera-web/">kamera web</a> </li><li> <a href="/pemain-media/">pemain media</a> </li><li> <a href="/cpanel/">cPanel</a> </li><li> <a href="/haproxy/">haproxy</a> </li><li> <a href="/but/">but</a> </li><li> <a href="/agung/">agung</a> </li><li> <a href="/ubuntu-24-04-cat/">Ubuntu 24.04</a> </li><li> <a href="/nextcloud/">nextcloud</a> </li><li> <a href="/kebajikan/">kebajikan</a> </li><li> <a href="/usb-laluan/">usb-laluan</a> </li><li> <a href="/secure-boot/">#secure-boot</a> </li><li> <a href="/laluan-peranti/">laluan-peranti</a> </li><li> <a href="/sdn/">SDN</a> </li><li> <a href="/pemasangan-pemandu/">pemasangan pemandu</a> </li> </ul> </div> <div class="sidebar-box ftco-animate"> <h3 class="sidebar-heading">Jawatan Popular</h3> <div class="block-21 mb-4 d-flex"> <a class="blog-img mr-4" style="background-image: url(https://softoban.com/img/other/67/chapter-4-the-6502-microprocessor-assembly-language-tutorial-1.jpg);"></a> <div class="text"> <h3 class="heading"> <a href="/bab-4-tutorial-bahasa-himpunan-mikropemproses-6502">Bab 4: Tutorial Bahasa Himpunan Mikropemproses 6502</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/21/sql-server-lead-function-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/fungsi-lead-pelayan-sql">Fungsi LEAD() Pelayan SQL</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/CD/what-is-the-use-of-the-request-variable-in-php-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/apakah-kegunaan-pembolehubah-request-dalam-php">Apakah Kegunaan Pembolehubah $_REQUEST dalam PHP</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/4E/sql-percentile-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/persentil-sql">Persentil SQL</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/85/how-to-set-the-kubernetes-tolerations-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-menetapkan-toleransi-kubernetes">Cara Menetapkan Toleransi Kubernetes</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/A8/how-to-disable-ipv6-completely-on-fedora-linux-39-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-melumpuhkan-ipv6-sepenuhnya-pada-fedora-linux-39">Cara Melumpuhkan IPv6 Sepenuhnya pada Fedora Linux 39</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/F3/what-is-the-use-of-sqlitestudio-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/apakah-kegunaan-sqlitestudio">Apakah Kegunaan SQLiteStudio?</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/1F/how-to-utilize-break-after-with-breakpoints-and-media-queries-in-tailwind-1.gif);"></a> <div class="text"> <h3 class="heading"> <a href="/bagaimana-untuk-menggunakan-break-after-dengan-breakpoints-dan-pertanyaan-media-dalam-tailwind">Bagaimana untuk Menggunakan 'break-after' Dengan Breakpoints dan Pertanyaan Media dalam Tailwind?</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/54/how-to-disable-a-link-using-only-css-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-melumpuhkan-pautan-hanya-menggunakan-css">Cara Melumpuhkan Pautan Hanya Menggunakan CSS</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/47/5-fixes-windows-10-won-8217-t-install-or-download-updates-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/5-pembetulan-windows-10-tidak-akan-memasang-atau-memuat-turun-kemas-kini">5 Pembetulan: Windows 10 Tidak Akan Memasang atau Memuat Turun Kemas Kini</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/42/c-getchar-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/c-getchar">C++ Getchar</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/D0/how-to-show-the-running-mysql-processes-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-menunjukkan-proses-mysql-yang-berjalan">Cara Menunjukkan Proses MySQL yang Berjalan</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/5D/how-to-install-and-configure-astro-js-on-windows-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/bagaimana-untuk-memasang-dan-mengkonfigurasi-astro-js-pada-windows">Bagaimana untuk Memasang dan Mengkonfigurasi Astro.js pada Windows?</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/62/best-way-to-encode-degree-celsius-symbol-into-web-page-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-terbaik-untuk-mengekodkan-simbol-darjah-celsius-ke-halaman-web">Cara Terbaik untuk Mengekodkan Simbol Darjah Celsius ke Halaman Web</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/03/what-does-endl-mean-in-c-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/apakah-maksud-endl-dalam-c">Apakah Maksud endl dalam C++</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/E7/guide-to-sort-lines-in-vim-1.jpg);"></a> <div class="text"> <h3 class="heading"> <a href="/panduan-mengisih-garis-dalam-vim">Panduan Mengisih Garis dalam Vim</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/BA/how-to-run-docker-image-from-local-repository-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/bagaimana-untuk-menjalankan-imej-docker-dari-repositori-tempatan">Bagaimana untuk Menjalankan Imej Docker Dari Repositori Tempatan?</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/9A/how-to-mount-a-usb-thumb-drive-hdd-or-ssd-on-proxmox-ve-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-melekapkan-pemacu-ibu-jari-usb-hdd-atau-ssd-pada-proxmox-ve">Cara Melekapkan Pemacu Ibu Jari USB, HDD atau SSD pada Proxmox VE</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/AD/what-is-eof-in-the-c-programming-language-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/apakah-itu-eof-dalam-bahasa-pengaturcaraan-c">Apakah itu EOF dalam Bahasa Pengaturcaraan C</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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/61/explain-typescript-const-vs-readonly-utility-type-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/terangkan-typescript-const-vs-read-only-jenis-utiliti">Terangkan TypeScript const vs read only Jenis Utiliti</a> </h3> <div class="meta"> <div> <a href="/lain-lain/"><span class="icon-chat"></span> Lain-lain</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>