Modern web uygulamaları geliştirirken, kullanıcı arayüzünün estetiği ve performansı büyük önem taşır. İkonlar, bu iki unsurun birleştiği kritik bileşenlerdir. Geleneksel olarak ikonlar için resim dosyaları (PNG, JPG) veya ikon fontları (Font Awesome, Material Icons) kullanılsa da, SVG (Scalable Vector Graphics) ikonları günümüzde giderek daha popüler hale gelmektedir. Bu rehberde, Vue.js projelerinizde SVG ikonlarını nasıl etkin bir şekilde kullanabileceğinizi, farklı yöntemleri, en iyi uygulamaları ve optimizasyon stratejilerini ele alacağız.
SVG İkonları Neden Tercih Edilmeli?
SVG, vektörel tabanlı bir grafik formatıdır ve web için özel olarak tasarlanmıştır. Piksel tabanlı resim formatlarına göre birçok avantaj sunar.
Vektörel Olmanın Avantajları
- Ölçeklenebilirlik: SVG ikonları, çözünürlükten bağımsızdır. Yani, ister küçük bir düğme üzerinde ister büyük bir ekranda kullanılsın, kalitelerini kaybetmeden sorunsuz bir şekilde ölçeklenebilirler. Pikselleşme veya bulanıklaşma sorunu yaşanmaz. Bu, farklı cihaz boyutlarına ve ekran yoğunluklarına sahip modern web ortamları için hayati öneme sahiptir.
- Netlik ve Keskinlik: Herhangi bir yakınlaştırma seviyesinde veya farklı ekran DPI’larında (Dots Per Inch) her zaman keskin ve net görünürler.
Erişilebilirlik ve Stil Esnekliği
- CSS ile Stil Verme: SVG ikonları, doğrudan HTML içine gömüldüğünde CSS ile kolayca stil verilebilir.
fill,stroke,color,opacity,transformgibi CSS özellikleri kullanılarak renkleri, boyutları ve diğer görsel özellikleri dinamik olarak değiştirilebilir. Bu, tema yönetimi ve interaktif efektler için büyük esneklik sağlar. - Erişilebilirlik (Accessibility): SVG içeriği, HTML gibi metin tabanlı olduğu için ekran okuyucular tarafından okunabilir.
</code> ve <code><desc></code> etiketleri ile ikonlara anlamlı açıklamalar eklenerek erişilebilirlik artırılabilir.</li> </ul> <h3>Performans ve Dosya Boyutu</h3> <ul> <li><strong>Küçük Dosya Boyutları:</strong> Özellikle basit ikonlar için SVG dosyaları genellikle PNG veya JPG muadillerinden daha küçüktür. Vektörel yapısı sayesinde karmaşık olmayan şekiller metin olarak ifade edildiği için dosya boyutu minimal kalır.</li> <li><strong>HTTP İsteklerini Azaltma:</strong> SVG ikonları doğrudan HTML içine gömüldüğünde, tarayıcının ek bir HTTP isteği yapmasına gerek kalmaz. Bu da sayfa yükleme sürelerini hızlandırır ve genel performansı artırır.</li> </ul> <h2>Vue.js’de SVG İkonlarını Temel Kullanım Yöntemleri</h2> <p>Vue.js projelerinizde SVG ikonlarını kullanmanın birkaç temel yolu vardır. Her birinin kendine göre avantajları ve dezavantajları bulunur.</p> <h3>Inline SVG Kullanımı</h3> <p>Bu yöntem, SVG kodunu doğrudan Vue bileşeninizin şablonuna yapıştırmayı içerir. En basit yaklaşımdır ve herhangi bir ek yapılandırma gerektirmez.</p> <pre><code class="language-html"><template> <div class="icon-wrapper"> <!-- Basit bir inline SVG örneği --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" > <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2h1v1.93h-1zm7.93-1.07c-.49 3.95-3.85 7-7.93 7v-1h1c1.1 0 2-.9 2-2v-1l6.79-6.79c.12.58.21 1.17.21 1.79 0 4.08-3.05 7.44-7 7.93z" /> </svg> <span>Ayarlar</span> </div> </template> <style scoped> .icon-wrapper { display: flex; align-items: center; gap: 8px; color: #3498db; /<em> SVG'nin fill="currentColor" özelliği sayesinde ikonun rengi değişir </em>/ } .icon-wrapper svg { transition: transform 0.3s ease; } .icon-wrapper:hover svg { transform: rotate(15deg); } </style> </code></pre> <p><strong>Pratik Bilgiler:</strong></p> <ul> <li><strong>Avantajları:</strong> Ek HTTP isteği yok, CSS ile tam kontrol (renk, boyut, animasyon vb.), basit kurulum.</li> <li><strong>Dezavantajları:</strong> İkon kodu tekrarı, bileşen dosyalarını şişirebilir, ikon kütüphanesi büyüdükçe yönetimi zorlaşır. Küçük, tek kullanımlık ikonlar için idealdir.</li> <li><code>fill="currentColor"</code> kullanımı, SVG’nin rengini üst öğenin <code>color</code> CSS özelliğine göre almasını sağlar, bu da tema yönetimini kolaylaştırır.</li> </ul> <h3><code><img></code> Etiketi ile Harici SVG Dosyaları</h3> <p>SVG dosyalarını bir resim dosyası gibi <code><img></code> etiketi aracılığıyla kullanabilirsiniz. Bu, bir resim dosyasıyla çalışmaya benzer.</p> <pre><code class="language-html"><template> <div> <img loading="lazy" decoding="async" src="@/assets/icons/settings.svg" alt="Ayarlar İkonu" width="24" height="24" /> <span>Ayarlar</span> </div> </template> <style scoped> img { filter: invert(30%) sepia(90%) saturate(1000%) hue-rotate(200deg) brightness(90%) contrast(90%); /<em> İkonun rengini değiştirmek için filter özelliği kullanılabilir, ancak sınırlıdır. </em>/ } </style> </code></pre> <p><strong>Pratik Bilgiler:</strong></p> <ul> <li><strong>Avantajları:</strong> Tarayıcı önbellekleme, kolay kullanım (resim kullanır gibi).</li> <li><strong>Dezavantajları:</strong> SVG’nin içeriğine doğrudan CSS ile stil verilemez (renk, stroke vb. için <code>filter</code> gibi sınırlı yöntemler kullanılabilir), ek bir HTTP isteği gerektirir, erişilebilirlik sınırlıdır.</li> <li><code>@/assets/icons/settings.svg</code> yolu, projenizin <code>assets</code> klasöründeki bir SVG dosyasına işaret eder. Build aracı (Vite, Webpack) bu yolu otomatik olarak işleyecektir.</li> </ul> <h3>Vue Bileşeni Olarak SVG İçeri Aktarma</h3> <p>Bu, Vue.js’de SVG ikonlarını kullanmanın en yaygın ve esnek yollarından biridir. SVG dosyalarını doğrudan Vue bileşenleri olarak içe aktarmanıza olanak tanır. Bunun için genellikle bir build aracı eklentisine ihtiyacınız olacaktır (örn. Vite için <code>vite-plugin-svg-loader</code>, Vue CLI için <code>@vue/cli-plugin-svg-sprite</code> veya benzeri).</p> <p>Örnek olarak, Vite tabanlı bir projede <code>vite-plugin-svg-loader</code> kullanarak SVG’leri nasıl bileşen olarak içeri aktaracağınızı gösterelim:</p> <p><strong>1. Kurulum:</strong></p> <pre><code class="language-bash">npm install -D vite-plugin-svg-loader <h2>veya</h2> yarn add -D vite-plugin-svg-loader </code></pre> <p><strong>2. <code>vite.config.js</code> dosyanızı güncelleyin:</strong></p> <pre><code class="language-javascript">import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import svgLoader from 'vite-plugin-svg-loader'; // Eklentiyi içeri aktar export default defineConfig({ plugins: [ vue(), svgLoader({ // Opsiyonel: Varsayılan ayarları özelleştirebilirsiniz svgoConfig: { multipass: true, }, }), ], }); </code></pre> <p><strong>3. Vue Bileşeninizde Kullanım:</strong></p> <pre><code class="language-html"><template> <div class="icon-container"> <!-- SVG dosyasını bir Vue bileşeni gibi içeri aktarın ve kullanın --> <SettingsIcon class="icon-style" /> <span>Ayarlar</span> </div> </template> <script setup> import SettingsIcon from '@/assets/icons/settings.svg?component'; // Önemli: ?component ile içeri aktarma // Bileşene prop geçirmek isterseniz: // <SettingsIcon :width="32" :height="32" /> şeklinde kullanabilirsiniz. // SVG dosyanızda width/height tanımlı değilse veya geçersizse bu prop'lar işe yarar. </script> <style scoped> .icon-container { display: flex; align-items: center; gap: 8px; color: #27ae60; } .icon-style { /<em> SVG bileşeninin rengini değiştirmek için fill veya color kullanın </em>/ fill: currentColor; /<em> Üst öğenin color değerini alır </em>/ width: 28px; height: 28px; } </style> </code></pre> <p><strong>Pratik Bilgiler:</strong></p> <ul> <li><strong>Avantajları:</strong> Yeniden kullanılabilirlik, modülerlik, kod tekrarını azaltır, CSS ile tam kontrol, build zamanında optimizasyon imkanı.</li> <li><strong>Dezavantajları:</strong> Ek bir build aracı yapılandırması gerektirir.</li> <li><code>?component</code> sorgu parametresi, Vite’a SVG dosyasını Vue bileşeni olarak işlemeyi söyler.</li> <li>Bu yöntem, SVG ikonlarını merkezi bir yerden yönetmek ve projeniz genelinde tutarlı bir şekilde kullanmak için en iyi yaklaşımdır.</li> </ul> <h2>Yeniden Kullanılabilir SVG İkon Bileşenleri Oluşturma</h2> <p>Projeniz büyüdükçe, her ikonu ayrı ayrı içe aktarmak veya inline olarak kullanmak sürdürülemez hale gelebilir. Bu noktada, tüm ikonları yöneten merkezi bir <code>SvgIcon</code> bileşeni oluşturmak en iyi çözümdür.</p> <h3>Temel Bir <code>SvgIcon</code> Bileşeni</h3> <p>Bu bileşen, ikonun adını bir prop olarak alır ve ilgili SVG içeriğini dinamik olarak render eder.</p> <p><strong>1. <code>components/SvgIcon.vue</code> dosyasını oluşturun:</strong></p> <pre><code class="language-html"><template> <svg v-if="iconComponent" :class="['svg-icon', iconClass]" :style="iconStyle" v-bind="$attrs" > <component :is="iconComponent" /> </svg> <!-- İkon bulunamazsa bir placeholder veya hata mesajı gösterebiliriz --> <span v-else class="svg-icon-placeholder">?</span> </template> <script setup> import { defineAsyncComponent, computed } from 'vue'; const props = defineProps({ name: { type: String, required: true, }, size: { type: [String, Number], default: 24, }, color: { type: String, default: 'currentColor', }, iconClass: { type: String, default: '', }, }); // Tüm SVG ikonlarını dinamik olarak içeri aktarmak için // Vite'ın glob import özelliğini kullanıyoruz. // Bu, <code>@/assets/icons</code> altındaki tüm .svg dosyalarını bir nesne olarak döndürür. const icons = import.meta.glob('@/assets/icons/*.svg', { as: 'component' }); const iconComponent = computed(() => { const iconPath = <code>/src/assets/icons/${props.name}.svg</code>; const iconModule = icons[iconPath]; if (!iconModule) { console.warn(<code>SVG ikonu bulunamadı: ${props.name}</code>); return null; } return defineAsyncComponent(() => iconModule()); }); const iconStyle = computed(() => ({ width: typeof props.size === 'number' ? <code>${props.size}px</code> : props.size, height: typeof props.size === 'number' ? <code>${props.size}px</code> : props.size, fill: props.color, stroke: props.color === 'currentColor' ? 'none' : props.color, // Varsayılan olarak stroke'u kapat })); </script> <style scoped> .svg-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; /<em> İçerik küçülse bile ikonun boyutunu koru </em>/ } .svg-icon-placeholder { display: inline-flex; align-items: center; justify-content: center; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 4px; width: 24px; height: 24px; font-size: 14px; color: #888; } </style> </code></pre> <p><strong>2. Uygulamanızda Kullanım:</strong></p> <pre><code class="language-html"><template> <div class="app-container"> <h3>Uygulama Ayarları</h3> <button> <SvgIcon name="settings" :size="20" color="#fff" /> <span>Ayarları Aç</span> </button> <div class="notifications"> <SvgIcon name="bell" size="28" color="#e74c3c" /> <span>Yeni Bildirimler</span> </div> <div class="profile"> <SvgIcon name="user" size="32" icon-class="profile-icon" /> <span>Profilim</span> </div> <div> <SvgIcon name="non-existent-icon" /> <!-- Bulunamayan ikon örneği --> <span>Bilinmeyen İkon</span> </div> </div> </template> <script setup> import SvgIcon from '@/components/SvgIcon.vue'; </script> <style scoped> .app-container > div, .app-container > button { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; } button { background-color: #3498db; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 16px; } button:hover { background-color: #2980b9; } .notifications { color: #e74c3c; /<em> bell ikonunun rengini override eder </em>/ } .profile-icon { /<em> SvgIcon'a özel stil sınıfı </em>/ border: 1px solid #9b59b6; border-radius: 50%; padding: 2px; box-shadow: 0 0 5px rgba(155, 89, 182, 0.5); } </style> </code></pre> <p><strong>Pratik Bilgiler:</strong></p> <ul> <li><code>import.meta.glob</code> (Vite) veya <code>require.context</code> (Webpack) gibi özellikler, belirtilen klasördeki tüm SVG dosyalarını dinamik olarak içe aktarmanıza olanak tanır. Bu sayede her ikonu tek tek import etmek zorunda kalmazsınız.</li> <li><code>defineAsyncComponent</code> ile ikonlar sadece ihtiyaç duyulduğunda yüklenir, bu da başlangıç performansını artırır.</li> <li>Props aracılığıyla <code>name</code>, <code>size</code>, <code>color</code> gibi özellikleri kontrol etmek, ikonlarınızı çok daha esnek hale getirir. <code>v-bind="$attrs"</code> ile de SVG elementine doğrudan ek HTML nitelikleri (örneğin <code>role</code>, <code>aria-hidden</code>) geçirebilirsiniz.</li> <li>İkon bulunamadığında bir uyarı mesajı veya placeholder göstermek, geliştirme sürecinde hataları fark etmenizi kolaylaştırır.</li> </ul> <h3>SVG Sprite Haritaları ile Kullanım</h3> <p>Büyük projelerde çok sayıda ikon kullanılıyorsa, tüm ikonları tek bir SVG dosyası (sprite haritası) içinde birleştirmek performansı daha da artırabilir. Tarayıcı tek bir HTTP isteği yapar ve tüm ikonları indirir. Daha sonra <code><use></code> etiketi ile sprite haritasındaki belirli bir ikona referans verilir.</p> <p>Bu yöntem genellikle özel build araçları (örn. <code>svg-sprite-loader</code> veya <code>vite-plugin-svg-sprite</code>) ile entegre edilir. Oluşturulan sprite dosyası genellikle uygulamanın başlangıcında bir kez yüklenir.</p> <pre><code class="language-html"><template> <div> <!-- Sprite haritasından bir ikon kullanma örneği --> <svg class="icon" width="24" height="24"> <use xlink:href="/path/to/sprite.svg#icon-home"></use> </svg> <span>Anasayfa</span> </div> </template> <style scoped> .icon { fill: #34495e; /<em> İkonun rengini ayarlar </em>/ stroke: none; } </style> </code></pre> <p><strong>Pratik Bilgiler:</strong></p> <ul> <li><strong>Avantajları:</strong> Tek HTTP isteği, daha iyi önbellekleme, ikonları tek bir dosyada merkezi olarak yönetme.</li> <li><strong>Dezavantajları:</strong> Build aracı yapılandırması daha karmaşık olabilir, <code><use></code> etiketi bazı eski tarayıcılarda sorun çıkarabilir (polifill gerekebilir), CSS ile stil verme Inline SVG kadar esnek değildir (genellikle <code>fill</code> ve <code>stroke</code> ile sınırlıdır).</li> </ul> <h2>Gelişmiş Kullanım ve Optimizasyon Stratejileri</h2> <p>SVG ikonlarınızı Vue.js projenizde daha etkin ve performanslı hale getirmek için bazı gelişmiş teknikler ve optimizasyon stratejileri uygulayabilirsiniz.</p> <h3>CSS ile Stil Verme ve Tema Yönetimi</h3> <p>SVG ikonlarının en büyük avantajlarından biri, CSS ile kolayca stil verilebilmesidir. Özellikle <code>currentColor</code> anahtar kelimesi, ikonların metin rengiyle uyumlu olmasını sağlayarak tema yönetimini basitleştirir.</p> <pre><code class="language-css">/<em> SvgIcon bileşeninizdeki veya doğrudan SVG elementinizdeki stiller </em>/ .svg-icon { width: 24px; height: 24px; fill: currentColor; /<em> İkonun rengi, üst öğenin 'color' özelliğinden gelir </em>/ stroke: none; /<em> Varsayılan stroke'u kapat </em>/ transition: fill 0.3s ease; } /<em> Bir düğme üzerindeki ikon </em>/ button .svg-icon { color: white; /<em> İkon beyaz olur </em>/ } /<em> Hover durumunda ikonun rengini değiştirme </em>/ .menu-item:hover .svg-icon { fill: #f39c12; /<em> Hover'da turuncu olur </em>/ } </code></pre> <p><strong>Pratik Bilgiler:</strong></p> <ul> <li><code>currentColor</code> kullanarak ikonlarınızın uygulamanızın renk paletine otomatik olarak uyum sağlamasını sağlayabilirsiniz.</li> <li><code>transition</code> özellikleri ile ikonlara hoş animasyonlar ekleyebilirsiniz (renk değişimi, dönüşüm vb.).</li> <li>CSS değişkenleri (<code>--primary-color</code>) kullanarak da ikon renklerini merkezi olarak yönetebilirsiniz.</li> </ul> <h3>Erişilebilirlik (Accessibility)</h3> <p>Tüm kullanıcılar için kapsayıcı bir deneyim sağlamak amacıyla SVG ikonlarının erişilebilirliğini göz ardı etmemek önemlidir.</p> <pre><code class="language-html"><!-- Dekoratif ikonlar için (sadece görsel) --> <svg aria-hidden="true" focusable="false"> <path d="..." /> </svg> <!-- Anlamlı ikonlar için (içerik taşıyan) --> <svg role="img" aria-labelledby="settings-title settings-desc"> <title id="settings-title">Ayarlar Uygulama ayarlarını değiştirmek için düğme Pratik Bilgiler:
- Dekoratif ikonlar: Yalnızca görsel amaçlı kullanılan ikonlar için
aria-hidden="true"vefocusable="false"(veyatabindex="-1") kullanarak ekran okuyucuların bu ikonları atlamasını sağlayın. - Anlamlı ikonlar: Bir eylemi veya bilgiyi temsil eden ikonlar için
role="img"kullanın ve</code> ile <code><desc></code> etiketleri aracılığıyla anlamlı metin açıklamaları sağlayın. <code><title></code> etiketi, ikonun kısa bir adını, <code><desc></code> ise daha detaylı bir açıklamasını vermelidir.</li> <li>İkon bir düğme veya bağlantı içindeyse, düğme/bağlantı etiketinin erişilebilir olduğundan emin olun (örn. <code><button aria-label="Ayarlar"></code>).</li> </ul> <h3>Otomatik Optimizasyon Araçları</h3> <p>SVG dosyaları genellikle tasarım yazılımlarından dışa aktarıldığında gereksiz meta veriler, yorumlar, boşluklar ve hassasiyet bilgileri içerebilir.</p> </div> <div class="cs-entry__footer"> <div class="cs-entry__footer-left"> <div class="cs-entry__post-meta" ><div class="cs-meta-author"><a class="cs-meta-author-link url fn n" href="https://fatihsoysal.com/blog/author/fatihsoysal/"><span class="cs-meta-author-by">by</span><span class="cs-meta-author-name">Fatih Soysal</span></a></div><div class="cs-meta-comments"><a href="https://fatihsoysal.com/blog/svg-ikonlari-neden-tercih-edilmeli/#respond" class="comments-link" >0</a></div></div> </div> <div class="cs-entry__footer-right"> <div class="cs-share"> <a class="cs-share__link" target="_blank" href="https://www.facebook.com/sharer.php?text=SVG%20%C4%B0konlar%C4%B1%20Neden%20Tercih%20Edilmeli%3F&u=https://fatihsoysal.com/blog/svg-ikonlari-neden-tercih-edilmeli/"> <i class="cs-icon cs-icon-facebook"></i> </a> <a class="cs-share__link" target="_blank" href="https://twitter.com/share?t=SVG%20%C4%B0konlar%C4%B1%20Neden%20Tercih%20Edilmeli%3F&url=https://fatihsoysal.com/blog/svg-ikonlari-neden-tercih-edilmeli/"> <i class="cs-icon cs-icon-twitter-x"></i> </a> <a class="cs-share__link" target="_blank" href="https://t.me/share/url?url=%5BURL%5D&text=https://fatihsoysal.com/blog/svg-ikonlari-neden-tercih-edilmeli/"> <i class="cs-icon cs-icon-telegram"></i> </a> <a class="cs-share__link cs-share__copy-link" target="_blank" href="https://fatihsoysal.com/blog/svg-ikonlari-neden-tercih-edilmeli/"> <i class="cs-icon cs-icon-link"></i> </a> </div> </div> </div> <div class="cs-entry__comments" id="comments"> <div class="cs-entry__comments-header"> <div class="cs-entry__comments-left"> <div class="cs-entry__comments-heading">Yorumlar</div> <div class="cs-entry__comments-description h2">İçeriği beğendiniz mi? Bir tartışma başlatın veya görüşlerinizi paylaşın.</div> </div> <div class="cs-entry__comments-right"> <div class="cs-entry__comments-toggle"> <span class="cs-button" role="button" aria-label="Yorumlar"> <span>Yorum Yaz</span> </span> </div> </div> </div> <div class="cs-entry__comments-inner"> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title">Bir yanıt yazın <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/svg-ikonlari-neden-tercih-edilmeli/#respond" style="display:none;">Yanıtı iptal et</a></small></h2><form action="https://fatihsoysal.com/blog/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">E-posta adresiniz yayınlanmayacak.</span> <span class="required-field-message">Gerekli alanlar <span class="required">*</span> ile işaretlenmişlerdir</span></p><p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required" aria-required="true" placeholder="Your Comment *"></textarea></p><p class="comment-form-author"><input id="author" name="author" type="text" value="" size="30" aria-required='true' placeholder="Your Name *" /></p> <p class="comment-form-email"><input id="email" name="email" type="email" value="" size="30" aria-required='true' placeholder="Your E-mail *" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"><label for="wp-comment-cookies-consent">Save my name and email in this browser for the next time I comment.</label></p> <p class="form-submit"><button name="submit" type="submit" id="submit" class="submit" value="Yorum gönder" />Gönder </button> <input type='hidden' name='comment_post_ID' value='38001' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="1cc10ae03b" /></p><p style="display: none !important;" class="akismet-fields-container" data-prefix="ak_"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="199"/><script> document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() ); </script> </p></form> </div><!-- #respond --> </div> </div> </div> </div> </div> </div> </div> <section class="cs-read-next"> <h2 class="cs-read-next__heading"> Aşağıdaki içerikler de ilgilinizi çekebilir: </h2> <div class="cs-read-next__list cs-posts-area__archive"> <article class="cs-read-next__item post-38003 post type-post status-publish format-standard category-dusunsel-ve-kisisel category-genel cs-entry cs-video-wrap"> <div class="cs-entry__outer"> <div class="cs-entry__inner cs-entry__content"> <div class="cs-entry__info"> <h2 class="cs-entry__title"><a href="https://fatihsoysal.com/blog/etkili-mentorluk-iliskisi-kurma-kapsamli-rehber/">Etkili Mentorluk İlişkisi Kurma: Kapsamlı Rehber<div class="cs-entry__post-meta" ><div class="cs-meta-date">21 Ocak 2026</div></div></a></h2> </div> </div> </div> </article> <article class="cs-read-next__item post-38004 post type-post status-publish format-standard category-genel cs-entry cs-video-wrap"> <div class="cs-entry__outer"> <div class="cs-entry__inner cs-entry__content"> <div class="cs-entry__info"> <h2 class="cs-entry__title"><a href="https://fatihsoysal.com/blog/programlamayi-dogru-sekilde-ogrenmek-kopyala-yapistir-tuzagindan-kurtulma-rehberi/">Programlamayı Doğru Şekilde Öğrenmek: Kopyala-Yapıştır Tuzağından Kurtulma Rehberi<div class="cs-entry__post-meta" ><div class="cs-meta-date">21 Ocak 2026</div></div></a></h2> </div> </div> </div> </article> <article class="cs-read-next__item post-38009 post type-post status-publish format-standard category-genel cs-entry cs-video-wrap"> <div class="cs-entry__outer"> <div class="cs-entry__inner cs-entry__content"> <div class="cs-entry__info"> <h2 class="cs-entry__title"><a href="https://fatihsoysal.com/blog/en-hizli-dagitilan-kendi-barindirilan-waf-urunleri-kapsamli-bir-inceleme/">En Hızlı Dağıtılan Kendi Barındırılan WAF Ürünleri: Kapsamlı Bir İnceleme<div class="cs-entry__post-meta" ><div class="cs-meta-date">21 Ocak 2026</div></div></a></h2> </div> </div> </div> </article> <article class="cs-read-next__item post-38011 post type-post status-publish format-standard category-genel cs-entry cs-video-wrap"> <div class="cs-entry__outer"> <div class="cs-entry__inner cs-entry__content"> <div class="cs-entry__info"> <h2 class="cs-entry__title"><a href="https://fatihsoysal.com/blog/bodysnatcher-sabit-kodlanmis-bir-sirrin-servicenowda-tam-kontrole-nasil-yol-actigi-cve-2025-12420/">BodySnatcher: Sabit Kodlanmış Bir Sırrın ServiceNow’da Tam Kontrole Nasıl Yol Açtığı (CVE-2025-12420)<div class="cs-entry__post-meta" ><div class="cs-meta-date">21 Ocak 2026</div></div></a></h2> </div> </div> </div> </article> </div> </section> <div class="cs-subscribe"> <div class="cs-subscribe__content"> <div class="cs-subscribe__header"> <div class="cs-subscribe__heading h2"> E-posta Bülteni </div> <div class="cs-subscribe__subheading h2"> Yazılım Topluluğuna Katılın </div> <div class="cs-subscribe__description"> En son güncellemeleri, yaratıcı ipuçlarını ve özel kaynakları doğrudan e-posta kutunuza alın. Tasarım ve inovasyonun geleceğini birlikte keşfedelim. </div> </div> <form class="cs-subscribe__form" action="https://codesupply.us13.list-manage.com/subscribe/post?u=41845cb8908fb4302a4df512f&id=b5a5e9c757" method="post" target="_blank" novalidate> <div class="cs-form-group cs-subscribe__form-group"> <input type="email" placeholder="Your E-mail" name="EMAIL" required> <button type="submit" value="Abone Ol" aria-label="Abone Ol" name="subscribe"> <span>Abone Ol</span> </button> </div> </form> </div> </div> </div> </div> </main> </div> </div> <footer class="cs-footer" data-scheme="auto" data-l="light" data-d="dark"> <div class="cs-footer__item cs-footer__item-top-bar"> <div class="cs-container"> <div class="cs-footer__item-inner"> <div class="cs-footer__col cs-col-left"> <div class="cs-footer-columns__nav-menu"> <ul id="menu-menu-5" class="cs-footer-columns__nav "><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19194 csco-menu-item-style-none"><a href="https://fatihsoysal.com/"><span>Anasayfa</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11 csco-menu-item-style-none"><a href="https://fatihsoysal.com/blog/hakkimda/"><span>Hakkımda</span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25363 csco-menu-item-style-none"><a href="#"><span>Eğitimler</span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30019 csco-menu-item-style-none"><a href="#"><span>Makaleler</span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-69 csco-menu-item-style-none"><a href="https://fatihsoysal.com/blog"><span>Blog</span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-35075 csco-menu-item-style-none"><a href="#"><span>Kategoriler</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-257 csco-menu-item-style-none"><a href="https://fatihsoysal.com/blog/iletisim/"><span>Bana Ulaşın</span></a></li> </ul> </div> </div> <div class="cs-footer__col cs-col-right"> <div class="cs-social"> <a class="cs-social__link" href="https://www.linkedin.com/in/fatihsoysal/" target="_blank" title="Linkedin"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M16.8169 2.00011H3.1831C3.02984 1.998 2.87767 2.02591 2.73526 2.08226C2.59286 2.13861 2.46302 2.22229 2.35316 2.32852C2.24329 2.43475 2.15556 2.56145 2.09496 2.70139C2.03437 2.84133 2.0021 2.99176 2 3.1441V16.8559C2.0021 17.0082 2.03437 17.1587 2.09496 17.2986C2.15556 17.4385 2.24329 17.5653 2.35316 17.6715C2.46302 17.7777 2.59286 17.8614 2.73526 17.9177C2.87767 17.9741 3.02984 18.002 3.1831 17.9999H16.8169C16.9702 18.002 17.1223 17.9741 17.2647 17.9177C17.4071 17.8614 17.537 17.7777 17.6468 17.6715C17.7567 17.5653 17.8444 17.4385 17.905 17.2986C17.9656 17.1587 17.9979 17.0082 18 16.8559V3.1441C17.9979 2.99176 17.9656 2.84133 17.905 2.70139C17.8444 2.56145 17.7567 2.43475 17.6468 2.32852C17.537 2.22229 17.4071 2.13861 17.2647 2.08226C17.1223 2.02591 16.9702 1.998 16.8169 2.00011ZM6.85312 15.3919H4.43863V8.19203H6.85312V15.3919ZM5.64588 7.18404C5.31289 7.18404 4.99354 7.05256 4.75808 6.81851C4.52262 6.58447 4.39034 6.26704 4.39034 5.93606C4.39034 5.60507 4.52262 5.28764 4.75808 5.0536C4.99354 4.81956 5.31289 4.68807 5.64588 4.68807C5.82269 4.66814 6.00175 4.68556 6.17133 4.73918C6.3409 4.7928 6.49717 4.88142 6.6299 4.99924C6.76264 5.11706 6.86883 5.26141 6.94155 5.42285C7.01426 5.58429 7.05185 5.75918 7.05185 5.93606C7.05185 6.11294 7.01426 6.28782 6.94155 6.44926C6.86883 6.6107 6.76264 6.75506 6.6299 6.87287C6.49717 6.99069 6.3409 7.07931 6.17133 7.13293C6.00175 7.18656 5.82269 7.20397 5.64588 7.18404ZM15.5614 15.3919H13.1469V11.528C13.1469 10.56 12.8008 9.928 11.9235 9.928C11.652 9.92998 11.3877 10.0146 11.1661 10.1705C10.9445 10.3264 10.7762 10.5461 10.6841 10.8C10.6211 10.988 10.5938 11.186 10.6036 11.384V15.3839H8.18913V8.18402H10.6036V9.20001C10.823 8.8217 11.142 8.51004 11.5263 8.29859C11.9106 8.08713 12.3457 7.98391 12.7847 8.00003C14.3944 8.00003 15.5614 9.03201 15.5614 11.248V15.3919Z"/></svg> </a> </div> </div> </div> </div> </div> <div class="cs-footer__item cs-footer__item-bottom-bar"> <div class="cs-container"> <div class="cs-footer__item-inner"> <div class="cs-footer__col cs-col-left"> <div class="cs-footer__nav-menu"> <ul id="menu-footer" class="cs-footer__nav "><li id="menu-item-39737" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39737"><a href="https://fatihsoysal.com/blog/category/ai/"><span>AI</span></a></li> <li id="menu-item-39739" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39739"><a href="https://fatihsoysal.com/blog/category/akademik-ve-bilimsel/"><span>Akademik ve Bilimsel</span></a></li> <li id="menu-item-39740" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39740"><a href="https://fatihsoysal.com/blog/category/angular/"><span>Angular</span></a></li> <li id="menu-item-39741" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39741"><a href="https://fatihsoysal.com/blog/category/aws/"><span>AWS</span></a></li> <li id="menu-item-39742" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39742"><a href="https://fatihsoysal.com/blog/category/azure/"><span>Azure</span></a></li> <li id="menu-item-39743" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39743"><a href="https://fatihsoysal.com/blog/category/bash/"><span>Bash</span></a></li> <li id="menu-item-39745" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39745"><a href="https://fatihsoysal.com/blog/category/c-2/"><span>C++</span></a></li> <li id="menu-item-39746" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39746"><a href="https://fatihsoysal.com/blog/category/cloud/"><span>Cloud</span></a></li> <li id="menu-item-39748" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39748"><a href="https://fatihsoysal.com/blog/category/devops/"><span>Devops</span></a></li> <li id="menu-item-39749" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39749"><a href="https://fatihsoysal.com/blog/category/docker/"><span>Docker</span></a></li> <li id="menu-item-39750" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39750"><a href="https://fatihsoysal.com/blog/category/dusunsel-ve-kisisel/"><span>Düşünsel ve Kişisel</span></a></li> <li id="menu-item-39751" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39751"><a href="https://fatihsoysal.com/blog/category/egitim/"><span>Eğitim</span></a></li> <li id="menu-item-39752" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39752"><a href="https://fatihsoysal.com/blog/category/flutter/"><span>Flutter</span></a></li> <li id="menu-item-39754" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-39754"><a href="https://fatihsoysal.com/blog/category/genel/"><span>Genel</span></a></li> <li id="menu-item-39755" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39755"><a href="https://fatihsoysal.com/blog/category/git/"><span>Git</span></a></li> <li id="menu-item-39758" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39758"><a href="https://fatihsoysal.com/blog/category/is-dunyasi/"><span>İş Dünyası</span></a></li> <li id="menu-item-39759" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39759"><a href="https://fatihsoysal.com/blog/category/java/"><span>Java</span></a></li> <li id="menu-item-39760" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39760"><a href="https://fatihsoysal.com/blog/category/kubernetes/"><span>Kubernetes</span></a></li> <li id="menu-item-39761" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39761"><a href="https://fatihsoysal.com/blog/category/mobile/"><span>Mobile</span></a></li> <li id="menu-item-39762" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39762"><a href="https://fatihsoysal.com/blog/category/mongodb/"><span>MongoDB</span></a></li> <li id="menu-item-39763" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39763"><a href="https://fatihsoysal.com/blog/category/mvc/"><span>MVC</span></a></li> <li id="menu-item-39764" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39764"><a href="https://fatihsoysal.com/blog/category/nextjs/"><span>NextJS</span></a></li> <li id="menu-item-39765" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39765"><a href="https://fatihsoysal.com/blog/category/nginx/"><span>Nginx</span></a></li> <li id="menu-item-39766" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39766"><a href="https://fatihsoysal.com/blog/category/powershell/"><span>PowerShell</span></a></li> <li id="menu-item-39767" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39767"><a href="https://fatihsoysal.com/blog/category/programming-patterns/"><span>Programming Patterns</span></a></li> <li id="menu-item-39768" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39768"><a href="https://fatihsoysal.com/blog/category/python/"><span>Python</span></a></li> <li id="menu-item-39769" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39769"><a href="https://fatihsoysal.com/blog/category/redis/"><span>Redis</span></a></li> <li id="menu-item-39770" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39770"><a href="https://fatihsoysal.com/blog/category/sed/"><span>Sed</span></a></li> <li id="menu-item-39771" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39771"><a href="https://fatihsoysal.com/blog/category/server/"><span>Server</span></a></li> <li id="menu-item-39772" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39772"><a href="https://fatihsoysal.com/blog/category/yazilim/net/"><span>.NET</span></a></li> <li id="menu-item-39773" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39773"><a href="https://fatihsoysal.com/blog/category/yazilim/ajax/"><span>AJAX</span></a></li> <li id="menu-item-39774" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39774"><a href="https://fatihsoysal.com/blog/category/yazilim/asp-net/"><span>ASP.NET</span></a></li> <li id="menu-item-39775" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39775"><a href="https://fatihsoysal.com/blog/category/yazilim/c/"><span>C#</span></a></li> <li id="menu-item-39776" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39776"><a href="https://fatihsoysal.com/blog/category/yazilim/css3-html5/"><span>CSS3 – HTML5</span></a></li> <li id="menu-item-39777" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39777"><a href="https://fatihsoysal.com/blog/category/yazilim/java-android-development/"><span>JAVA – Android</span></a></li> <li id="menu-item-39778" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39778"><a href="https://fatihsoysal.com/blog/category/yazilim/javascript/"><span>Javascript</span></a></li> <li id="menu-item-39779" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39779"><a href="https://fatihsoysal.com/blog/category/yazilim/linux/"><span>Linux</span></a></li> <li id="menu-item-39780" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39780"><a href="https://fatihsoysal.com/blog/category/yazilim/php/"><span>PHP</span></a></li> <li id="menu-item-39781" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39781"><a href="https://fatihsoysal.com/blog/category/yazilim/javascript/jquery/"><span>jQuery</span></a></li> <li id="menu-item-39782" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39782"><a href="https://fatihsoysal.com/blog/category/yazilim/javascript/node-js/"><span>Node.js</span></a></li> <li id="menu-item-39783" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39783"><a href="https://fatihsoysal.com/blog/category/yazilim/javascript/react/"><span>React</span></a></li> <li id="menu-item-39784" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39784"><a href="https://fatihsoysal.com/blog/category/yazilim/sql/ms-sql-server/"><span>MS SQL Server</span></a></li> <li id="menu-item-39785" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39785"><a href="https://fatihsoysal.com/blog/category/yazilim/sql/mysql/"><span>MySQL</span></a></li> <li id="menu-item-39786" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-39786"><a href="https://fatihsoysal.com/blog/category/yazilim/sql/postgresql/"><span>PostgreSQL</span></a></li> </ul> </div> </div> <div class="cs-footer__col cs-col-right"> <div class="cs-footer__copyright"> © 2026 Fatih Soysal 💻🚀 All rights reserved. Built with passion & caffeine ☕ </div> </div> </div> </div> </div> </footer> <button class="cs-scroll-top" role="button" aria-label="Scroll to top button"> <i class="cs-icon cs-icon-chevron-up"></i> <div class="cs-scroll-top-border"> <svg width="52" height="52" viewBox="0 0 52 52"> <path d="M26,2 a24,24 0 0,1 0,48 a24,24 0 0,1 0,-48" style="stroke-width: 2; fill: none;"></path> </svg> </div> <div class="cs-scroll-top-progress"> <svg width="52" height="52" viewBox="0 0 52 52"> <path d="M26,2 a24,24 0 0,1 0,48 a24,24 0 0,1 0,-48" style="stroke-width: 2; fill: none;"></path> </svg> </div> </button> <script type="text/javascript"> var CF7AppsLoadhCaptcha = function() { var hcaptcha = document.querySelectorAll( '.h-captcha' ); for (var i = 0; i < hcaptcha.length; i++) { hcaptcha[i].setAttribute( 'data-sitekey', '' ); hcaptcha[i].setAttribute( 'data-callback', 'cf7apps_hcaptcha_callback' ); } }; </script> <script src="https://js.hcaptcha.com/1/api.js?onload=CF7AppsLoadhCaptcha" async defer ></script> <script> const lazyloadRunObserver = () => { const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` ); const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => { entries.forEach( ( entry ) => { if ( entry.isIntersecting ) { let lazyloadBackground = entry.target; if( lazyloadBackground ) { lazyloadBackground.classList.add( 'e-lazyloaded' ); } lazyloadBackgroundObserver.unobserve( entry.target ); } }); }, { rootMargin: '200px 0px 200px 0px' } ); lazyloadBackgrounds.forEach( ( lazyloadBackground ) => { lazyloadBackgroundObserver.observe( lazyloadBackground ); } ); }; const events = [ 'DOMContentLoaded', 'elementor/lazyload/observe', ]; events.forEach( ( event ) => { document.addEventListener( event, lazyloadRunObserver ); } ); </script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/embed-any-document/js/pdfobject.min.js?ver=2.7.12" id="awsm-ead-pdf-object-js"></script> <script id="awsm-ead-public-js-extra"> var eadPublic = []; </script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/embed-any-document/js/embed-public.min.js?ver=2.7.12" id="awsm-ead-public-js"></script> <script src="https://fatihsoysal.com/blog/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script> <script src="https://fatihsoysal.com/blog/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script id="wp-i18n-js-after"> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); </script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.5" id="swv-js"></script> <script id="contact-form-7-js-translations"> ( function( domain, translations ) { var localeData = translations.locale_data[ domain ] || translations.locale_data.messages; localeData[""].domain = domain; wp.i18n.setLocaleData( localeData, domain ); } )( "contact-form-7", {"translation-revision-date":"2026-01-19 21:19:08+0000","generator":"GlotPress\/4.0.3","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=2; plural=n > 1;","lang":"tr"},"This contact form is placed in the wrong place.":["Bu ileti\u015fim formu yanl\u0131\u015f yere yerle\u015ftirilmi\u015f."],"Error:":["Hata:"]}},"comment":{"reference":"includes\/js\/index.js"}} ); </script> <script id="contact-form-7-js-before"> var wpcf7 = { "api": { "root": "https:\/\/fatihsoysal.com\/blog\/wp-json\/", "namespace": "contact-form-7\/v1" } }; </script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.5" id="contact-form-7-js"></script> <script src="https://fatihsoysal.com/blog/wp-includes/js/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/sight/render/js/jquery.magnific-popup.min.js?ver=1777452259" id="magnific-popup-js"></script> <script id="sight-block-script-js-extra"> var sight_lightbox_localize = {"text_previous":"Previous","text_next":"Next","text_close":"Close","text_loading":"Loading","text_counter":"of"}; </script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/sight/render/js/sight.js?ver=1777452259" id="sight-block-script-js"></script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/easy-syntax-highlighter/assets/js/highlight.min.js?ver=11.9.0" id="esh-highlight-js-js"></script> <script id="esh-highlight-js-js-after"> document.addEventListener("DOMContentLoaded", () => { hljs.highlightAll(); }); </script> <script id="esh-frontend-js-extra"> var esh_i18n = {"copied":"\u5df2\u590d\u5236\uff01","copy_failed":"\u590d\u5236\u5931\u8d25"}; </script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/easy-syntax-highlighter/assets/js/frontend.js?ver=2.0.0" id="esh-frontend-js"></script> <script src="https://www.google.com/recaptcha/api.js?render=6Lfq6JMsAAAAAFwFocaWCzv-A3znzOaIyo9ACOYg&ver=3.0" id="google-recaptcha-js"></script> <script src="https://fatihsoysal.com/blog/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0" id="wp-polyfill-js"></script> <script id="wpcf7-recaptcha-js-before"> var wpcf7_recaptcha = { "sitekey": "6Lfq6JMsAAAAAFwFocaWCzv-A3znzOaIyo9ACOYg", "actions": { "homepage": "homepage", "contactform": "contactform" } }; </script> <script src="https://fatihsoysal.com/blog/wp-content/plugins/contact-form-7/modules/recaptcha/index.js?ver=6.1.5" id="wpcf7-recaptcha-js"></script> <script id="csco-scripts-js-extra"> var csLocalize = {"siteSchemeMode":"system","siteSchemeToogle":"1","shareCopiedText":"URL copied","subscribeProcess":"Processing your subscription...","subscribeSuccess":"Thank you for subscribing!","subscribeError":"Form submission error"}; </script> <script src="https://fatihsoysal.com/blog/wp-content/themes/intro/assets/js/scripts.js?ver=6.7.11" id="csco-scripts-js"></script> <script src="https://fatihsoysal.com/blog/wp-content/themes/intro/assets/static/js/comment-reply.js?ver=6.7.11" id="csco-comment-reply-js"></script> <script defer src="https://fatihsoysal.com/blog/wp-content/plugins/akismet/_inc/akismet-frontend.js?ver=1777452205" id="akismet-frontend-js"></script> </div> </body> </html>
- Dekoratif ikonlar: Yalnızca görsel amaçlı kullanılan ikonlar için