Cara Memohon Hiasan Teks dengan Tailwind Hover, Fokus dan Keadaan Aktif

Semasa menggabungkan pelbagai fungsi pada halaman web atau tapak, terdapat keadaan di mana pengaturcara perlu menambahkan pautan interaktif yang menjadi ketara apabila tindakan pengguna iaitu, tuding tetikus. Dalam senario sedemikian, menghias teks mengikut keadaan yang berbeza melakukan keajaiban dalam menjadikan tapak itu menonjol.

Blog ini merangkumi bidang kandungan di bawah:

Bagaimana untuk Memohon Hiasan Teks dengan Tailwind Hover, Fokus dan Keadaan Aktif?
Mengaplikasikan Hiasan Teks dengan Keadaan 'legar'.
Mengaplikasikan Hiasan Teks dengan Keadaan 'fokus'.
Mengaplikasikan Hiasan Teks dengan Keadaan 'aktif'.

Bagaimana untuk Memohon Hiasan Teks dengan Tailwind Hover, Fokus dan Keadaan Aktif?

Teks boleh dihiasi melalui ' hiasan teks ” harta benda. Sifat ini boleh digunakan dengan pelbagai keadaan pengubahsuai seperti “ berlegar ',' fokus ” dan “ aktif ” untuk menghiasi teks atas tindakan pengguna dengan sewajarnya.

Contoh 1: Mengaplikasikan Hiasan Teks dengan Keadaan 'legar'.

Contoh ini menggunakan ' hiasan teks ” harta sedemikian sehingga ia tidak digariskan secara lalai tetapi menjadi digariskan pada tuding tetikus:

< 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 = 'legar tanpa garis bawah: garis bawah' > Ini ialah Tailwind CSS < / textarea >

< / badan >

< / html >

Mengikut baris kod ini, nyatakan laluan CDN dalam ' teg ” untuk menggunakan fungsi Tailwind. Sekarang, gunakan gabungan ' hiasan teks ” harta bersama dengan “ berlegar ” nyatakan supaya apabila melayang elemen, ia menjadi bergaris.

Pengeluaran

Seperti yang dilihat, ' </strong> elemen ” digariskan pada tuding tetikus dengan jayanya.</p> <br /> <ins class="staticpubads89354" data-sizes-desktop="728x90,750x100,750x200,750x300" data-sizes-mobile="300x250,336x280,360x300" data-slot="5"></ins><br /> <h2> <strong> Contoh 2:</strong> <a id="post-390687-yqkwqwlwf1ui"></a> <strong> Mengaplikasikan Hiasan Teks dengan Keadaan 'fokus'.</strong> </h2> <p> Blok kod berikut menghiasi teks dengan memasukkan “ <strong> fokus</strong> ” negeri. Ini menggariskan teks (tidak digariskan secara lalai) apabila elemen mendapat fokus melalui ' <strong> Tab</strong> kunci ”:</p> <!DOCTYPE html> <br> <br> < <a href="http://december.com/html/4/element/html.html"><span class="kw2"> html</span></a> > <br> <br> < <a href="http://december.com/html/4/element/head.html"><span class="kw2"> kepala</span></a> > <br> <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> <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> <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> ><<span class="sy0"> /</span> <a href="http://december.com/html/4/element/head.html"><span class="kw2"> kepala</span></a> > <br> <br> < <a href="http://december.com/html/4/element/body.html"><span class="kw2"> badan</span></a> > <br> <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"> 'fokus tanpa garis bawah: garis bawah'</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> <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/body.html"><span class="kw2"> badan</span></a> > <br> <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/html.html"><span class="kw2"> html</span></a> ><p> Mengikut kod ini:</p> <ul> <li> Begitu juga, masukkan laluan CDN dan masukkan ' <strong> <textarea></strong> ” unsur.</li> <li> Selepas itu, gunakan ' <strong> hiasan teks</strong> ” sifat yang menjadikan teks tidak digariskan secara lalai.</li> <li> Yang berkaitan ' <strong> fokus</strong> ” nyatakan kemudian menggariskan teks apabila elemen mendapat tumpuan.</li> </ul> <p> <strong> Pengeluaran</strong> </p> <p> <img class="wp-image-390707" src="https://softoban.com/img/other/AC/how-to-apply-text-decoration-with-tailwind-hover-focus-and-active-states-2.gif"></p> <p> Hasil ini menandakan bahawa teks yang terkandung dalam elemen menggariskan apabila menekan butang “ <strong> Tab</strong> kunci ” iaitu, memfokuskan elemen.</p> <h2> <strong> Contoh 3:</strong> <a id="post-390687-mzdhsis01qe1"></a> <strong> Mengaplikasikan Hiasan Teks dengan Keadaan 'aktif'.</strong> </h2> <p> Dalam contoh ini, teks boleh dihias sedemikian rupa sehingga “ <strong> talian melalui</strong> sifat ” digunakan padanya apabila elemen sedang aktif:</p> <!DOCTYPE html> <br> <br> < <a href="http://december.com/html/4/element/html.html"><span class="kw2"> html</span></a> > <br> <br> < <a href="http://december.com/html/4/element/head.html"><span class="kw2"> kepala</span></a> > <br> <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> <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> <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> ><<span class="sy0"> /</span> <a href="http://december.com/html/4/element/head.html"><span class="kw2"> kepala</span></a> > <br> <br> < <a href="http://december.com/html/4/element/body.html"><span class="kw2"> badan</span></a> > <br> <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"> 'no-underline active:line-through'</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> <br> <<span class="sy0"> /</span> <a href="http://december.com/html/4/element/body.html"><span class="kw2"> badan</span></a> > <br> <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, gunakan langkah yang disediakan di bawah:</p> <ul> <li> Ingat metodologi yang dibincangkan untuk memasukkan laluan CDN dan ' <strong> <textarea></strong> ” unsur.</li> <li> Sekarang, gunakan hiasan teks ' <strong> tiada garis bawah</strong> ” harta secara lalai dan peruntukkan “ <strong> aktif</strong> ” nyatakan dengan “ <strong> talian melalui</strong> ”.</li> <li> Ini mengakibatkan baris melalui teks yang terkandung pada elemen yang sedang aktif.</li> </ul> <p> <strong> Pengeluaran</strong> </p> <p> <img class="wp-image-390709" src="https://softoban.com/img/other/AC/how-to-apply-text-decoration-with-tailwind-hover-focus-and-active-states-3.gif"></p> <p> Daripada output ini, dapat disahkan bahawa teks dihiasi mengikut keadaan yang digunakan dengan sewajarnya.</p> <h2> <strong> Kesimpulan</strong> </h2> <p> Teks boleh dihiasi melalui ' <strong> hiasan teks</strong> ” harta benda. Harta ini boleh digunakan dengan ' <strong> berlegar</strong> ',' <strong> fokus</strong> ” dan “ <strong> aktif</strong> ” pengubah suai menyatakan untuk menghiasi teks pada tuding tetikus, elemen yang difokuskan atau elemen yang aktif, masing-masing.</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/6F/how-to-set-different-kubernetes-restart-policies-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-menetapkan-dasar-mulakan-semula-kubernetes-yang-berbeza">Cara Menetapkan Dasar Mulakan Semula Kubernetes yang berbeza</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/C4/what-does-do-in-c-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/apa-yang-lakukan-dalam-c">Apa yang :: Lakukan 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/89/how-to-shut-down-or-restart-windows-system-using-powershell-or-command-prompt-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-mematikan-atau-mulakan-semula-sistem-windows-menggunakan-powershell-atau-command-prompt">Cara Mematikan atau Mulakan Semula Sistem Windows Menggunakan PowerShell atau Command Prompt</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/E9/how-to-use-htop-command-in-linux-1.jpg);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-menggunakan-perintah-htop-dalam-linux">Cara Menggunakan Perintah htop dalam Linux</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/AE/is-there-a-way-to-access-the-default-discord-user-avatar-icon-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/adakah-terdapat-cara-untuk-mengakses-ikon-avatar-pengguna-discord-lalai">Adakah Terdapat Cara untuk Mengakses Ikon Avatar Pengguna Discord Lalai?</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/86/how-to-use-android-s-digital-wellbeing-feature-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-menggunakan-ciri-kesejahteraan-digital-android">Cara Menggunakan Ciri Kesejahteraan Digital Android</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/6A/what-is-the-window-name-property-1.gif);"></a> <div class="text"> <h3 class="heading"> <a href="/apakah-nama-window-property">Apakah nama Window Property</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/80/how-to-repair-windows-10-using-dism-and-sfc-utility-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-membaiki-windows-10-menggunakan-utiliti-dism-dan-sfc">Cara Membaiki Windows 10 Menggunakan Utiliti DISM dan SFC</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/B1/how-to-rearrange-photos-in-albums-on-android-phone-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-menyusun-semula-foto-dalam-album-pada-telefon-android">Cara Menyusun Semula Foto dalam Album pada Telefon Android</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/92/linux-help-command-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/perintah-bantuan-linux">Perintah Bantuan Linux</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/A7/how-to-start-docker-using-systemctl-command-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/bagaimana-untuk-memulakan-docker-menggunakan-perintah-systemctl">Bagaimana untuk Memulakan Docker Menggunakan Perintah systemctl</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/C1/how-to-set-up-varnish-cache-on-ubuntu-18-04-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/bagaimana-untuk-menyediakan-cache-varnish-pada-ubuntu-18-04">Bagaimana untuk menyediakan cache Varnish pada Ubuntu 18.04</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/9B/how-to-use-boolean-value-in-c-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-menggunakan-nilai-boolean-dalam-c">Cara Menggunakan Nilai Boolean 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/00/how-to-stream-crunchyroll-on-discord-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-menstrim-crunchyroll-pada-discord">Cara Menstrim Crunchyroll pada Discord</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/33/how-to-create-a-basic-calculator-program-using-java-1.gif);"></a> <div class="text"> <h3 class="heading"> <a href="/bagaimana-untuk-mencipta-program-kalkulator-asas-menggunakan-java">Bagaimana untuk Mencipta Program Kalkulator Asas Menggunakan Java?</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/0C/how-to-add-comment-in-command-prompt-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-menambah-komen-dalam-prompt-perintah">Cara Menambah Komen dalam Prompt Perintah</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/32/how-to-print-a-word-document-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-mencetak-dokumen-word">Cara Mencetak Dokumen Word</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/8B/how-to-find-the-end-portal-in-the-stronghold-in-minecraft-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-mencari-portal-akhir-di-kubu-kuat-di-minecraft">Cara Mencari Portal Akhir di Kubu kuat di Minecraft</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/89/how-to-get-and-set-input-text-value-in-javascript-1.gif);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-mendapat-dan-menetapkan-nilai-teks-input-dalam-javascript">Cara Mendapat dan Menetapkan Nilai Teks Input dalam JavaScript</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/25/how-to-create-multiple-networkmanager-connection-profiles-for-the-same-network-interface-on-linux-and-switch-between-them-1.png);"></a> <div class="text"> <h3 class="heading"> <a href="/cara-membuat-berbilang-profil-sambungan-networkmanager-untuk-antara-muka-rangkaian-yang-sama-di-linux-dan-beralih-antaranya">Cara Membuat Berbilang Profil Sambungan NetworkManager untuk Antara Muka Rangkaian yang Sama di Linux dan Beralih Antaranya</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>