Kako dodati povezavo na gumb HTML?
Dodajanje povezav na gumbe HTML je nujno za ustvarjanje interaktivnih spletnih vmesnikov. V tem članku bomo raziskali različne metode, vključno z dogodki v vrstici, atributi obrazca in slogom CSS, skupaj s praktičnimi primeri in delčki kode.
Najprej ustvarimo vzorčni gumb HTML z osnovnim slogom:
HTML Ustvarite gumb HTML, ki deluje kot naslov povezave> <style>.GFG { širina:100px; višina:50px; ozadje:zeleno; obroba:brez; barva: bela; } slog> glava> <body> <h1>techcodeview.comh1> <button>Kliknite tukaj gumb> telo> html> </pre> </code> <p dir='ltr'> <span>Zdaj pa raziščimo vsako metodo skupaj s potrebnimi </span> <b> <strong>sintaksa </strong> </b> <span>in </span> <b> <strong>primer </strong> </b> <span>kode. </span> </p> <h2> <span>Metode za dodajanje povezave na gumb HTML </span> </h2> <h3> <b> <strong>1. V vrstici </strong> </b> <b> <code> onclick> </code> </b> <b> <strong>dogodek: </strong> </b> </h3> <p dir='ltr'> <span>Uporaba vgrajenega dogodka onclick. Povezuje funkcijo JavaScript z atributom onclick elementa gumba. Ob kliku funkcija preusmeri uporabnika na določen URL z uporabo window.location.href. </span> </p> <p dir='ltr'> <b> <strong>Sintaksa: </strong> </b> </p> <pre>Click Here </pre> <p dir='ltr'> <b> <strong>Primer </strong> </b> <span>: V tem primeru ustvarimo gumb HTML, oblikovan s CSS. Ob kliku se preusmeri na techcodeview.com IDE z vgrajenim dogodkom onclick. </span> </p>HTML <code> <pre> <html> <head> <title>Uporaba Inline onclick Naslov dogodka> <style>.GFG { barva ozadja: bela; obroba: 2px polna črna; barva: zelena; oblazinjenje: 5px 10px; kazalec: kazalec; } slog> glava> <body> <button>Kliknite tukaj gumb> telo> html> </pre> </code> <p dir='ltr'> <b> <strong>Izhod: </strong> </b> </p> <img src='//techcodeview.com/img/picked/45/how-add-link-html-button.webp' alt='ButtonLink'> <p>Izhod primera dogodka v vrstici onclick </p> <h3> <b> <strong>2. Uporaba oznake gumba v notranjosti <a>oznaka: </a> </strong> <a> </a> </b> <a> </a> </h3> <p dir='ltr'> <a> <span>Ta metoda ustvari gumb znotraj sidrne oznake. Sidrna oznaka preusmeri spletno stran na dano lokacijo. </span> <b> <strong>Zamenjajte spodnji delček z elementom gumba, podanim v zgornji vzorčni kodi gumba. </strong> </b> </a> </p> <a> <p dir='ltr'> <b> <strong>Sintaksa: </strong> </b> </p> </a> <pre> Syntax: Example : HTML <html> <head> <title>Ustvarite gumb HTML, ki deluje kot naslov povezave> <style>.GFG { širina:100px; višina:50px; ozadje:zeleno; obroba:brez; barva: bela; } slog> glava> <body> <h1>techcodeview.comh1> <a href='https://ide.techcodeview.com>Kliknite mea> body> html> Output : Uporaba oznake Anchor kot povezave gumba 4. Uporaba oznak obrazca Drug pristop je uporaba atributa action ali formaction znotraj elementa. Ta metoda je bolj pomensko pravilna in dobro deluje tudi znotraj obrazcev. Zamenjajte spodnji delček v oznaki body z elementom gumba, podanim v zgornji vzorčni kodi gumba. Kliknite me Primer: HTML <html> <head> <title>Ustvarite gumb HTML, ki deluje kot naslov povezave> <style>.GFG { širina:100px; višina:50px; ozadje:zeleno; obroba:brez; barva: bela; } slog> glava> <body> <h1>techcodeview.comh1> <form action='https://ide.techcodeview.com> <button type='submit'>Kliknite mebutton> form> body> html> Output : Uporaba oznak obrazca Opomba: rezultat bo enak za vse metode. Izhod: </pre>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Deli </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Kako dodati povezavo na gumb HTML?&url=https://www.techcodeview.com/sl/how-add-link-html-button"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/sl/how-add-link-html-button"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/sl/how-add-link-html-button&title=Kako dodati povezavo na gumb HTML?"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Morda Vam Bo Všeč </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/sl/t-flip-flop" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/it-problems-solutions/72/t-flip-flop.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="T japonka" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/sl/t-flip-flop">T japonka </a>
</h4>
</div> <div class="group">
<a href="/sl/linux-tree-command" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/linux-tutorial/72/linux-tree-command.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ukaz drevesa Linux" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/sl/linux-tree-command">Ukaz drevesa Linux </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Top Članki </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sl/difference-between-cc">
<img src="https://techcodeview.com/img/computer-gk/71/difference-between-cc.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Razlika med CC in BCC" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sl/difference-between-cc" class="hover:text-tech-500 transition-colors line-clamp-3">Razlika med CC in BCC </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sl/hierarchical-clustering-data-mining">
<img src="https://techcodeview.com/img/data-mining/68/hierarchical-clustering-data-mining.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hierarhično združevanje v podatkovno rudarjenje" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sl/hierarchical-clustering-data-mining" class="hover:text-tech-500 transition-colors line-clamp-3">Hierarhično združevanje v podatkovno rudarjenje </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sl/split-command-linux-with-examples">
<img src="https://techcodeview.com/img/linux-command/49/split-command-linux-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ukaz Split v Linuxu s primeri" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sl/split-command-linux-with-examples" class="hover:text-tech-500 transition-colors line-clamp-3">Ukaz Split v Linuxu s primeri </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sl/hotspot-apps-android">
<img src="https://techcodeview.com/img/android-tutorial/11/hotspot-apps-android.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Aplikacije Hotspot za Android" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sl/hotspot-apps-android" class="hover:text-tech-500 transition-colors line-clamp-3">Aplikacije Hotspot za Android </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sl/27-best-liberal-arts-colleges-country-1311610">
<img src="https://techcodeview.com/img/blog/10/27-best-liberal-arts-colleges-country.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="27 najboljših univerz za liberalno umetnost v državi" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sl/27-best-liberal-arts-colleges-country-1311610" class="hover:text-tech-500 transition-colors line-clamp-3">27 najboljših univerz za liberalno umetnost v državi </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sl/types-cyber-attackers">
<img src="https://techcodeview.com/img/cyber-security-tutorial/75/types-cyber-attackers.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Vrste kibernetskih napadalcev" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sl/types-cyber-attackers" class="hover:text-tech-500 transition-colors line-clamp-3">Vrste kibernetskih napadalcev </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sl/java-linkedlist-class">
<img src="https://techcodeview.com/img/java-collections/61/java-linkedlist-class.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Razred Java LinkedList" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sl/java-linkedlist-class" class="hover:text-tech-500 transition-colors line-clamp-3">Razred Java LinkedList </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sl/minimum-distance-to-travel-to-cover-all-intervals">
<img src="https://techcodeview.com/img/mathematical/26/minimum-distance-to-travel-to-cover-all-intervals.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Najmanjša potovalna razdalja za pokrivanje vseh intervalov" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sl/minimum-distance-to-travel-to-cover-all-intervals" class="hover:text-tech-500 transition-colors line-clamp-3">Najmanjša potovalna razdalja za pokrivanje vseh intervalov </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sl/java-constant">
<img src="https://techcodeview.com/img/java-tutorial/86/java-constant.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Javna konstanta" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sl/java-constant" class="hover:text-tech-500 transition-colors line-clamp-3">Javna konstanta </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sl/cobol-tutorial">
<img src="https://techcodeview.com/img/cobol-tutorial/88/cobol-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Vadnica COBOL" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sl/cobol-tutorial" class="hover:text-tech-500 transition-colors line-clamp-3">Vadnica COBOL </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Kategorija </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/sl/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Blog
</a> <a href="/sl/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Java Conversion
</a> <a href="/sl/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Matematika
</a> <a href="/sl/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Zbirke Java
</a> <a href="/sl/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Razlike
</a> <a href="/sl/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Java String
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Zanimivi Članki </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/linux-tutorial/85/restart-apache-ubuntu.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Znova zaženite Apache Ubuntu" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sl/linux-tutorial/">Vadnica Za Linux </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/restart-apache-ubuntu">Znova zaženite Apache Ubuntu </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/dsa/61/hierholzer-s-algorithm-for-directed-graph.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hierholzerjev algoritem za usmerjeni graf" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sl/dsa/">DSA </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/hierholzer-s-algorithm-for-directed-graph">Hierholzerjev algoritem za usmerjeni graf </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/mathematical/72/find-the-largest-number-with-given-number-of-digits-and-sum-of-digits.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Poiščite največje število z določenim številom številk in vsoto številk" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sl/mathematical/">Matematično </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/find-the-largest-number-with-given-number-of-digits-and-sum-of-digits">Poiščite največje število z določenim številom številk in vsoto številk </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/picked/63/ip-command-linux-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ukaz ip v Linuxu s primeri" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sl/picked/">Izbrano </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/ip-command-linux-with-examples">Ukaz ip v Linuxu s primeri </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/ms-excel-tutorial/43/how-change-data-range-pivot-table.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako spremeniti obseg podatkov v vrtilni tabeli" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sl/ms-excel-tutorial/">Vadnica Za Ms Excel </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/how-change-data-range-pivot-table">Kako spremeniti obseg podatkov v vrtilni tabeli </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/c-tutorial/65/how-run-c-program-visual-studio-code.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako zagnati program C v Visual Studio Code?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sl/c-tutorial/">C Vadnica </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/how-run-c-program-visual-studio-code">Kako zagnati program C v Visual Studio Code? </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Vse Pravice Pridržane |
<a href="//www.techcodeview.com/hu/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zavrnitev Odgovornosti </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Podjetju </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politika Zasebnosti </a>
</span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>