mirror of
https://github.com/yusufipk/teknolojirehberleri.xyz.git
synced 2026-09-11 10:56:08 +00:00
ekleme(rehber) bir-programın-sesini-yansıtma.md rehberi eklendi.
This commit is contained in:
Yusuf İpek
@@ -0,0 +1,31 @@
|
||||
# Bir Programın Sesini Yansıtma
|
||||
Linux'a yeni geçen arkdaşların sorduğu sorulardan birisi, arkadaşlarımla oyunumun, videomun sesini Discord üzerinden paylaşamıyorum! Nasıl yapabilirim?
|
||||
|
||||
Bugüne kadar bildiğim çözümler sesi yansıttığınızda sizin konuşanızı engelliyordu. Soundux adlı bir program keşfettim ve bu program sayesinde istediğiniz sesi istediğiniz uygulamaya yansıtabiliyor aynı zamanda mikrofonunuz ile konuşmaya devam edebiliyorsunuz!
|
||||
|
||||
1. Programı Nasıl Kurarım?
|
||||
2. Programın Kullanımı
|
||||
|
||||
## Programı Nasıl Kurarım?
|
||||
Soundux açık kaynak ve özgür bir yazılım. Windows için de paketleri var. Paket yöneticinizde yoksa [Websitesinden](https://soundux.rocks/) veya [Github sayfasından](https://github.com/Soundux/Soundux) indirebilirsiniz.
|
||||
|
||||
İndirdikten sonra karşınıza şöyle bir ekran çıkacak.
|
||||
|
||||
|
||||
|
||||
## Programın Kullanımı
|
||||
|
||||
Sağ üst tarafta yazan **output application** kısmından sesi aktarmak istediğimiz programı seçiyoruz. Discord'a ses aktaracaksanız Discord'u seçeceksiniz ama uygulamanın output application kısmında gözükmesi için sesliye katılmanız gerekiyor.
|
||||
|
||||
Daha sonrasında aşağıda yazan **passthrough** butonuna tıklayacaksınız. Tıkladığınız anda sol tarafta bir menü belirecek.
|
||||
|
||||
|
||||
|
||||
Sesini aktarmak istediğiniz programı buradan seçebilirsiniz. Örnek resimde Firefox'u görüyorsunuz.
|
||||
|
||||
Ve bu kadar! Artık seçtiğiniz uygulamanın sesi karşı tarafa gidiyor ve aynı zamanda mikrofonunuzdan konuşabiliyorsunuz. Artık karaoke yapabilir veya arkadaşlarınızla film izleyebilirsiniz. Soundux üzerinden ses düzeyini de ayarlayabiliyorsunuz.
|
||||
|
||||
## Katkıda Bulunanlar
|
||||
Yusuf İpek [website](https://yusufipek.me), [youtube](https://www.youtube.com/channel/UCVBX2n_5egE9XuJL8NUS0Xg)
|
||||
|
||||
;tags: linux ses discord
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
href="https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png"
|
||||
/>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
<title>Articles tagged css</title>
|
||||
<meta name"description" content="Teknoloji rehberleri. Reklam ve
|
||||
izleyici yok!" >
|
||||
</head>
|
||||
<body>
|
||||
<div class="banner">
|
||||
<h1> ⌨️ Articles tagged css 🖱️ </h1>
|
||||
<hr/>
|
||||
</div>
|
||||
<p><i>Etiketle rehber bulun:</i> <b>css</b></p>
|
||||
<h2>Rehberler</h2><ul id=artlist>
|
||||
<li><a href="websitenize-tema-ekleme.html">Websitenize Tema Ekleme</a></li>
|
||||
</ul>
|
||||
<h2>Site Hakkında</h1>
|
||||
Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber yazabilir.
|
||||
<h3>Nasıl Rehber Yazarım?</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/yusufipk/teknolojirehberleri.xyz">Github'ı</a> kullanarak yazınızı ekleyin.</li>
|
||||
<li>Aynı zamanda başkasının yazılarına katkı yapabilirsiniz.</li>
|
||||
<li>Yazıyı yazan kişileri keşfedebilir, bağış yapabilirsiniz!</li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
<hr/>
|
||||
<a href=".">ana sayfa</a>
|
||||
<a href="./rss.xml">RSS</a>
|
||||
<a href="./atom.xml">atom</a>
|
||||
<br>
|
||||
<p>Sitedeki bütün içerikler kamu malıdır.</p>
|
||||
<p><small>Kullanılan teknoloji: <a href="https://pedantic.software/git/blogit">blogit</a></small></p>
|
||||
<p><small>Esinlenilen website: <a href="https://based.cooking">based cooking</a></small></p>
|
||||
</footer>
|
||||
</body></html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
href="https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png"
|
||||
/>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
<title>Articles tagged discord</title>
|
||||
<meta name"description" content="Teknoloji rehberleri. Reklam ve
|
||||
izleyici yok!" >
|
||||
</head>
|
||||
<body>
|
||||
<div class="banner">
|
||||
<h1> ⌨️ Articles tagged discord 🖱️ </h1>
|
||||
<hr/>
|
||||
</div>
|
||||
<p><i>Etiketle rehber bulun:</i> <b>discord</b></p>
|
||||
<h2>Rehberler</h2><ul id=artlist>
|
||||
<li><a href="bir-programin-sesini-yansitma.html">Bir Programın Sesin Yansıtma</a></li>
|
||||
</ul>
|
||||
<h2>Site Hakkında</h1>
|
||||
Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber yazabilir.
|
||||
<h3>Nasıl Rehber Yazarım?</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/yusufipk/teknolojirehberleri.xyz">Github'ı</a> kullanarak yazınızı ekleyin.</li>
|
||||
<li>Aynı zamanda başkasının yazılarına katkı yapabilirsiniz.</li>
|
||||
<li>Yazıyı yazan kişileri keşfedebilir, bağış yapabilirsiniz!</li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
<hr/>
|
||||
<a href=".">ana sayfa</a>
|
||||
<a href="./rss.xml">RSS</a>
|
||||
<a href="./atom.xml">atom</a>
|
||||
<br>
|
||||
<p>Sitedeki bütün içerikler kamu malıdır.</p>
|
||||
<p><small>Kullanılan teknoloji: <a href="https://pedantic.software/git/blogit">blogit</a></small></p>
|
||||
<p><small>Esinlenilen website: <a href="https://based.cooking">based cooking</a></small></p>
|
||||
</footer>
|
||||
</body></html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
href="https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png"
|
||||
/>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
<title>Articles tagged html</title>
|
||||
<meta name"description" content="Teknoloji rehberleri. Reklam ve
|
||||
izleyici yok!" >
|
||||
</head>
|
||||
<body>
|
||||
<div class="banner">
|
||||
<h1> ⌨️ Articles tagged html 🖱️ </h1>
|
||||
<hr/>
|
||||
</div>
|
||||
<p><i>Etiketle rehber bulun:</i> <b>html</b></p>
|
||||
<h2>Rehberler</h2><ul id=artlist>
|
||||
<li><a href="websitenize-tema-ekleme.html">Websitenize Tema Ekleme</a></li>
|
||||
</ul>
|
||||
<h2>Site Hakkında</h1>
|
||||
Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber yazabilir.
|
||||
<h3>Nasıl Rehber Yazarım?</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/yusufipk/teknolojirehberleri.xyz">Github'ı</a> kullanarak yazınızı ekleyin.</li>
|
||||
<li>Aynı zamanda başkasının yazılarına katkı yapabilirsiniz.</li>
|
||||
<li>Yazıyı yazan kişileri keşfedebilir, bağış yapabilirsiniz!</li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
<hr/>
|
||||
<a href=".">ana sayfa</a>
|
||||
<a href="./rss.xml">RSS</a>
|
||||
<a href="./atom.xml">atom</a>
|
||||
<br>
|
||||
<p>Sitedeki bütün içerikler kamu malıdır.</p>
|
||||
<p><small>Kullanılan teknoloji: <a href="https://pedantic.software/git/blogit">blogit</a></small></p>
|
||||
<p><small>Esinlenilen website: <a href="https://based.cooking">based cooking</a></small></p>
|
||||
</footer>
|
||||
</body></html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
href="https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png"
|
||||
/>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
<title>Articles tagged linux</title>
|
||||
<meta name"description" content="Teknoloji rehberleri. Reklam ve
|
||||
izleyici yok!" >
|
||||
</head>
|
||||
<body>
|
||||
<div class="banner">
|
||||
<h1> ⌨️ Articles tagged linux 🖱️ </h1>
|
||||
<hr/>
|
||||
</div>
|
||||
<p><i>Etiketle rehber bulun:</i> <b>linux</b></p>
|
||||
<h2>Rehberler</h2><ul id=artlist>
|
||||
<li><a href="bir-programin-sesini-yansitma.html">Bir Programın Sesin Yansıtma</a></li>
|
||||
</ul>
|
||||
<h2>Site Hakkında</h1>
|
||||
Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber yazabilir.
|
||||
<h3>Nasıl Rehber Yazarım?</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/yusufipk/teknolojirehberleri.xyz">Github'ı</a> kullanarak yazınızı ekleyin.</li>
|
||||
<li>Aynı zamanda başkasının yazılarına katkı yapabilirsiniz.</li>
|
||||
<li>Yazıyı yazan kişileri keşfedebilir, bağış yapabilirsiniz!</li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
<hr/>
|
||||
<a href=".">ana sayfa</a>
|
||||
<a href="./rss.xml">RSS</a>
|
||||
<a href="./atom.xml">atom</a>
|
||||
<br>
|
||||
<p>Sitedeki bütün içerikler kamu malıdır.</p>
|
||||
<p><small>Kullanılan teknoloji: <a href="https://pedantic.software/git/blogit">blogit</a></small></p>
|
||||
<p><small>Esinlenilen website: <a href="https://based.cooking">based cooking</a></small></p>
|
||||
</footer>
|
||||
</body></html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
href="https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png"
|
||||
/>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
<title>Articles tagged ses</title>
|
||||
<meta name"description" content="Teknoloji rehberleri. Reklam ve
|
||||
izleyici yok!" >
|
||||
</head>
|
||||
<body>
|
||||
<div class="banner">
|
||||
<h1> ⌨️ Articles tagged ses 🖱️ </h1>
|
||||
<hr/>
|
||||
</div>
|
||||
<p><i>Etiketle rehber bulun:</i> <b>ses</b></p>
|
||||
<h2>Rehberler</h2><ul id=artlist>
|
||||
<li><a href="bir-programin-sesini-yansitma.html">Bir Programın Sesin Yansıtma</a></li>
|
||||
</ul>
|
||||
<h2>Site Hakkında</h1>
|
||||
Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber yazabilir.
|
||||
<h3>Nasıl Rehber Yazarım?</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/yusufipk/teknolojirehberleri.xyz">Github'ı</a> kullanarak yazınızı ekleyin.</li>
|
||||
<li>Aynı zamanda başkasının yazılarına katkı yapabilirsiniz.</li>
|
||||
<li>Yazıyı yazan kişileri keşfedebilir, bağış yapabilirsiniz!</li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
<hr/>
|
||||
<a href=".">ana sayfa</a>
|
||||
<a href="./rss.xml">RSS</a>
|
||||
<a href="./atom.xml">atom</a>
|
||||
<br>
|
||||
<p>Sitedeki bütün içerikler kamu malıdır.</p>
|
||||
<p><small>Kullanılan teknoloji: <a href="https://pedantic.software/git/blogit">blogit</a></small></p>
|
||||
<p><small>Esinlenilen website: <a href="https://based.cooking">based cooking</a></small></p>
|
||||
</footer>
|
||||
</body></html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
href="https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png"
|
||||
/>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
<title>Articles tagged web-development</title>
|
||||
<meta name"description" content="Teknoloji rehberleri. Reklam ve
|
||||
izleyici yok!" >
|
||||
</head>
|
||||
<body>
|
||||
<div class="banner">
|
||||
<h1> ⌨️ Articles tagged web-development 🖱️ </h1>
|
||||
<hr/>
|
||||
</div>
|
||||
<p><i>Etiketle rehber bulun:</i> <b>web-development</b></p>
|
||||
<h2>Rehberler</h2><ul id=artlist>
|
||||
<li><a href="websitenize-tema-ekleme.html">Websitenize Tema Ekleme</a></li>
|
||||
</ul>
|
||||
<h2>Site Hakkında</h1>
|
||||
Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber yazabilir.
|
||||
<h3>Nasıl Rehber Yazarım?</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/yusufipk/teknolojirehberleri.xyz">Github'ı</a> kullanarak yazınızı ekleyin.</li>
|
||||
<li>Aynı zamanda başkasının yazılarına katkı yapabilirsiniz.</li>
|
||||
<li>Yazıyı yazan kişileri keşfedebilir, bağış yapabilirsiniz!</li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
<hr/>
|
||||
<a href=".">ana sayfa</a>
|
||||
<a href="./rss.xml">RSS</a>
|
||||
<a href="./atom.xml">atom</a>
|
||||
<br>
|
||||
<p>Sitedeki bütün içerikler kamu malıdır.</p>
|
||||
<p><small>Kullanılan teknoloji: <a href="https://pedantic.software/git/blogit">blogit</a></small></p>
|
||||
<p><small>Esinlenilen website: <a href="https://based.cooking">based cooking</a></small></p>
|
||||
</footer>
|
||||
</body></html>
|
||||
@@ -0,0 +1,27 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
|
||||
<title type="text">Teknoloji Rehberleri</title>
|
||||
<subtitle type="text">blog</subtitle>
|
||||
<updated>2021-07-09T18:43:26Z</updated>
|
||||
<link rel="alternate" type="text/html" href="http://localhost/blog"/>
|
||||
<id>http://localhost/blog/atom.xml</id>
|
||||
<link rel="self" type="application/atom+xml" href="http://localhost/blog/atom.xml"/>
|
||||
<entry>
|
||||
<title type="text"># Bir Programın Sesin Yansıtma</title>
|
||||
<link rel="alternate" type="text/html" href="http://localhost/blog/bir-programin-sesini-yansitma.html"/>
|
||||
<id>http://localhost/blog/bir-programin-sesini-yansitma.html</id>
|
||||
<published>2021-07-09T18:43:21Z</published>
|
||||
<updated>2021-07-09T18:43:21Z</updated>
|
||||
<author><name>Yusuf İpek</name></author>
|
||||
<summary type="text">Linux'a yeni geçen arkdaşların sorduğu sorulardan birisi, arkadaşlarımla oyunumun, videomun sesini Discord üzerinden paylaşamıyorum! Nasıl yapabilirim?</summary>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="text"># Websitenize Tema Ekleme</title>
|
||||
<link rel="alternate" type="text/html" href="http://localhost/blog/websitenize-tema-ekleme.html"/>
|
||||
<id>http://localhost/blog/websitenize-tema-ekleme.html</id>
|
||||
<published>2021-07-01T01:24:40Z</published>
|
||||
<updated>2021-07-01T01:29:57Z</updated>
|
||||
<author><name>Yusuf İpek</name></author>
|
||||
<summary type="text"></summary>
|
||||
</entry>
|
||||
</feed>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
href="https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png"
|
||||
/>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
<title># Bir Programın Sesin Yansıtma</title>
|
||||
<meta name"description" content="Teknoloji rehberleri. Reklam ve
|
||||
izleyici yok!" >
|
||||
</head>
|
||||
<body>
|
||||
<h1># Bir Programın Sesin Yansıtma</h1><p>
|
||||
Linux'a yeni geçen arkdaşların sorduğu sorulardan birisi, arkadaşlarımla oyunumun, videomun sesini Discord üzerinden paylaşamıyorum! Nasıl yapabilirim?
|
||||
</p>
|
||||
<p>
|
||||
Bugüne kadar bildiğim çözümler sesi yansıttığınızda sizin konuşanızı engelliyordu. Soundux adlı bir program keşfettim ve bu program sayesinde istediğiniz sesi istediğiniz uygulamaya yansıtabiliyor aynı zamanda mikrofonunuz ile konuşmaya devam edebiliyorsunuz!
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li>Programı Nasıl Kurarım?</li>
|
||||
<li>Programın Kullanımı</li>
|
||||
</ol>
|
||||
|
||||
<h2> Programı Nasıl Kurarım?</h2>
|
||||
<p>
|
||||
Soundux açık kaynak ve özgür bir yazılım. Windows için de paketleri var. Paket yöneticinizde yoksa <a href="https://soundux.rocks/">Websitesinden</a> veya <a href="https://github.com/Soundux/Soundux">Github sayfasından</a> indirebilirsiniz.
|
||||
</p>
|
||||
<p>
|
||||
İndirdikten sonra karşınıza şöyle bir ekran çıkacak.
|
||||
</p>
|
||||
<p>
|
||||
<img src="pictures/bir-programın-sesini-yansıtma.webp" alt="bir-programın-sesini-yansıtma"/>
|
||||
</p>
|
||||
|
||||
<h2> Programın Kullanımı</h2>
|
||||
<p>
|
||||
Sağ üst tarafta yazan <b>output application</b> kısmından sesi aktarmak istediğimiz programı seçiyoruz. Discord'a ses aktaracaksanız Discord'u seçeceksiniz ama uygulamanın output application kısmında gözükmesi için sesliye katılmanız gerekiyor.
|
||||
</p>
|
||||
<p>
|
||||
Daha sonrasında aşağıda yazan <b>passthrough</b> butonuna tıklayacaksınız. Tıkladığınız anda sol tarafta bir menü belirecek.
|
||||
</p>
|
||||
<p>
|
||||
<img src="pictures/bir-programın-sesini-yansıtma-01.webp" alt="bir-programın-sesini-yansıtma-01"/>
|
||||
</p>
|
||||
<p>
|
||||
Sesini aktarmak istediğiniz programı buradan seçebilirsiniz. Örnek resimde Firefox'u görüyorsunuz.
|
||||
</p>
|
||||
<p>
|
||||
Ve bu kadar! Artık seçtiğiniz uygulamanın sesi karşı tarafa gidiyor ve aynı zamanda mikrofonunuzdan konuşabiliyorsunuz. Artık karaoke yapabilir veya arkadaşlarınızla film izleyebilirsiniz. Soundux üzerinden ses düzeyini de ayarlayabiliyorsunuz.
|
||||
</p>
|
||||
|
||||
<h2> Katkıda Bulunanlar</h2>
|
||||
<p>
|
||||
Yusuf İpek <a href="https://yusufipek.me">website</a>, <a href="https://www.youtube.com/channel/UCVBX2n_5egE9XuJL8NUS0Xg">youtube</a>
|
||||
</p>
|
||||
</main><p><i>Yazının paylaşıldığı tarih: 09-07-2021 18:43:21, son düzenleme tarihi: 09-07-2021 18:43:21, yazar: Yusuf İpek</i></p>
|
||||
<footer>
|
||||
<hr/>
|
||||
<a href=".">ana sayfa</a>
|
||||
<a href="./rss.xml">RSS</a>
|
||||
<a href="./atom.xml">atom</a>
|
||||
<br>
|
||||
<p>Sitedeki bütün içerikler kamu malıdır.</p>
|
||||
<p><small>Kullanılan teknoloji: <a href="https://pedantic.software/git/blogit">blogit</a></small></p>
|
||||
<p><small>Esinlenilen website: <a href="https://based.cooking">based cooking</a></small></p>
|
||||
</footer>
|
||||
</body></html>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
href="https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png"
|
||||
/>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
<title>Teknoloji Rehberleri</title>
|
||||
<meta name"description" content="Teknoloji rehberleri. Reklam ve
|
||||
izleyici yok!" >
|
||||
</head>
|
||||
<body>
|
||||
<div class="banner">
|
||||
<h1>⌨️ Teknoloji Rehberleri 🖱️</h1>
|
||||
<hr />
|
||||
</div>
|
||||
<p>Teknoloji rehberleri. Reklam ve izleyici yok!</p>
|
||||
<p>Etiketler:
|
||||
<a href="@css.html">css</a>, <a href="@discord.html">discord</a>, <a href="@html.html">html</a>, <a href="@linux.html">linux</a>, <a href="@ses.html">ses</a>, <a href="@web-development.html">web-development</a></p><h2>Rehberler</h2><ul id=artlist>
|
||||
<li><a href="bir-programin-sesini-yansitma.html">Bir Programın Sesin Yansıtma</a></li>
|
||||
<li><a href="websitenize-tema-ekleme.html">Websitenize Tema Ekleme</a></li>
|
||||
</ul>
|
||||
<h2>Site Hakkında</h1>
|
||||
Bu websitesinde reklam, izleyici veya çerez yoktur ve herkes rehber yazabilir.
|
||||
<h3>Nasıl Rehber Yazarım?</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/yusufipk/teknolojirehberleri.xyz">Github'ı</a> kullanarak yazınızı ekleyin.</li>
|
||||
<li>Aynı zamanda başkasının yazılarına katkı yapabilirsiniz.</li>
|
||||
<li>Yazıyı yazan kişileri keşfedebilir, bağış yapabilirsiniz!</li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
<hr/>
|
||||
<a href=".">ana sayfa</a>
|
||||
<a href="./rss.xml">RSS</a>
|
||||
<a href="./atom.xml">atom</a>
|
||||
<br>
|
||||
<p>Sitedeki bütün içerikler kamu malıdır.</p>
|
||||
<p><small>Kullanılan teknoloji: <a href="https://pedantic.software/git/blogit">blogit</a></small></p>
|
||||
<p><small>Esinlenilen website: <a href="https://based.cooking">based cooking</a></small></p>
|
||||
</footer>
|
||||
</body></html>
|
||||
@@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<rss version="2.0">
|
||||
<channel>
|
||||
<title>Teknoloji Rehberleri</title>
|
||||
<link>http://localhost/blog</link>
|
||||
<description>blog</description>
|
||||
<item>
|
||||
<title># Bir Programın Sesin Yansıtma</title>
|
||||
<link>http://localhost/blog/bir-programin-sesini-yansitma.html</link>
|
||||
<guid>http://localhost/blog/bir-programin-sesini-yansitma.html</guid>
|
||||
<pubDate>Cum, 09 Tem 2021 18:43:21 +0300</pubDate>
|
||||
<description>Linux'a yeni geçen arkdaşların sorduğu sorulardan birisi, arkadaşlarımla oyunumun, videomun sesini Discord üzerinden paylaşamıyorum! Nasıl yapabilirim?</description>
|
||||
</item>
|
||||
<item>
|
||||
<title># Websitenize Tema Ekleme</title>
|
||||
<link>http://localhost/blog/websitenize-tema-ekleme.html</link>
|
||||
<guid>http://localhost/blog/websitenize-tema-ekleme.html</guid>
|
||||
<pubDate>Prş, 01 Tem 2021 01:24:40 +0300</pubDate>
|
||||
<description></description>
|
||||
</item>
|
||||
</channel>
|
||||
</rss>
|
||||
@@ -0,0 +1,276 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
href="https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png"
|
||||
/>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
<title># Websitenize Tema Ekleme</title>
|
||||
<meta name"description" content="Teknoloji rehberleri. Reklam ve
|
||||
izleyici yok!" >
|
||||
</head>
|
||||
<body>
|
||||
<h1># Websitenize Tema Ekleme</h1><p>
|
||||
<img src="pictures/websitenize-tema-ekleme.webp" alt="websitenize-tema-ekleme"/>
|
||||
</p>
|
||||
<p>
|
||||
Karanlık temalara bayılıyorum. Kullandığım her websitesinde ve uygulamada karanlık tema tercih ediyorum. Peki tema seçeneklerini sitemize nasıl koyarız? Birden fazla temayı sitemizde nasıl yapabiliriz bu rehberde bunu anlatacağım.
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li>Ne yapacağız?</li>
|
||||
<li>Düğmeyi oluşturma</li>
|
||||
<li>Renk düzenlerini oluşturma</li>
|
||||
<li>İşlevsellik</li>
|
||||
<li>Kullanıcının tercihine göre temayı kaydetme</li>
|
||||
<li>Kapanış</li>
|
||||
<li>Katkıda bulunanlar</li>
|
||||
</ol>
|
||||
|
||||
<h2> Ne Yapacağız?</h2>
|
||||
<p>
|
||||
Örnek olarak projelerimden birisini kullanacağım. Geçtiğimiz haftalarda 3 tane teması olan bir hesap makinesi yaptım.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://github.com/yusufipk/another-calculator">kod</a> | <a href="https://yusufipk.github.io/another-calculator/">canlı demo</a>
|
||||
</p>
|
||||
<p>
|
||||
<img src="pictures/websitenize-tema-ekleme-01.webp" alt="websitenize-tema-ekleme-01"/>
|
||||
</p>
|
||||
<p>
|
||||
Gördüğünüz gibi düğmemiz var ve bu düğmeyle 3 tema arasında seçim yapabiliyoruz.
|
||||
</p>
|
||||
|
||||
<h2> Düğmeyi Oluşturma</h2>
|
||||
<p>
|
||||
Düğmeyi oluşturmak için checkbox, radio veya button elementlerini kullanabiliriz. Burada ben radio elementini kullanacağım.
|
||||
</p>
|
||||
|
||||
<pre><code>
|
||||
<div class="radio">
|
||||
<input type="radio" id="theme1" name="theme1" />
|
||||
<input type="radio" id="theme2" name="theme2" />
|
||||
<input type="radio" id="theme3" name="theme3" />
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<h2> Renk Düzenlerini Oluşturma</h2>
|
||||
<p>
|
||||
Renk düzenlerini CSS değişkenlerini kullanarak oluşturacağız. SASS değişkenlerinin derlenmesi gerektiğinden SASS değişkenleri kullanamazsınız! Bu uygulamada ben üç tane tema yapıyorum dolayısıyla üç tane renk düzeni oluşturacağım. İlki;
|
||||
</p>
|
||||
<pre><code>
|
||||
:root {
|
||||
--color-main: #3b4664;
|
||||
--color-white: #ffffff;
|
||||
--bg-main: #181f32;
|
||||
--bg-buttons: rgba(37, 45, 68, 0.6);
|
||||
--num: #eae3db;
|
||||
--number-color: #484b5a;
|
||||
--number-border: #b3a599;
|
||||
--button-secondary: #647299;
|
||||
--border-secondary: #404d70;
|
||||
--button-tertiary: #d13f30;
|
||||
--border-tertiary: #922417;
|
||||
--radio-color: #cf3f34;
|
||||
}
|
||||
</code></pre>
|
||||
<p>
|
||||
Bu varsayılan temam olacak dolayısıyla herhangi bir attribute eklememe gerek yok. İkinci temam;
|
||||
</p>
|
||||
<pre><code>
|
||||
body[data-theme="light"] {
|
||||
--color-main: #e6e6e6;
|
||||
--color-white: #3a3a32;
|
||||
--bg-main: #eeeeee;
|
||||
--bg-buttons: #d3cdcd;
|
||||
--num: #e5e4e0;
|
||||
--number-color: #3a3a32;
|
||||
--number-border: #a69c93;
|
||||
--button-secondary: #388187;
|
||||
--border-secondary: #1a5d66;
|
||||
--button-tertiary: #c85401;
|
||||
--border-tertiary: #873a02;
|
||||
}
|
||||
</code></pre>
|
||||
<p>
|
||||
Bu aydınlık temamız olacak. data-theme yazarak bunu belirtmemiz gerekli. Data özel bir attribute. Data hakkında daha fazla bilgi almak istiyorsanız <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*">buraya bakın.</a>
|
||||
</p>
|
||||
<p>
|
||||
Son temamızsa;
|
||||
</p>
|
||||
<pre><code>
|
||||
body[data-theme="purple"] {
|
||||
--color-main: #17062a;
|
||||
--color-white: #ffe43b;
|
||||
--bg-main: #1e0836;
|
||||
--bg-buttons: #1e0836;
|
||||
--num: #331b4d;
|
||||
--number-color: #ffe537;
|
||||
--number-border: #85219b;
|
||||
--button-secondary: #56077c;
|
||||
--border-secondary: #bf15f4;
|
||||
--button-tertiary: #00decf;
|
||||
--border-tertiary: #6dfaf1;
|
||||
--radio-color: #00e8d8;
|
||||
}
|
||||
</code></pre>
|
||||
<p>
|
||||
Bu kurulumla birlikte değişkenlerimizi kodumuzda kullanıp istediğimiz temayı dinamik olarak sayfamızda değiştirebileceğiz.
|
||||
</p>
|
||||
|
||||
<h2> İşlevselliği Ekliyoruz</h2>
|
||||
<p>
|
||||
İlk olarak radio elementlerimizi Javascript ile seçmemiz gerekli.
|
||||
</p>
|
||||
<pre><code>
|
||||
const theme1 = document.getElementById("theme1");
|
||||
const theme2 = document.getElementById("theme2");
|
||||
const theme3 = document.getElementById("theme3");
|
||||
</code></pre>
|
||||
<p>
|
||||
Şimdi <code></code>changeTheme()<code></code> fonksiyonunu oluşturacağız. Bu fonksiyon body attribute değerini değiştirmemizi sağlayacak ve böylece istediğimiz temayı sitede kullanabileceğiz.
|
||||
</p>
|
||||
|
||||
<pre><code>
|
||||
function changeTheme() {
|
||||
if (theme1.checked) {
|
||||
document.body.setAttribute("data-theme", "");
|
||||
} else if (theme2.checked) {
|
||||
document.body.setAttribute("data-theme", "light");
|
||||
} else if (theme3.checked) {
|
||||
document.body.setAttribute("data-theme", "purple");
|
||||
} else return;
|
||||
}
|
||||
</code></pre>
|
||||
<p>
|
||||
Şimdi de eventListener eklememiz lazım, yapmasını istediğimiz iki şey var;
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li>Radio elementine tıkladığımızda diğer bütün radio elementlerini <code></code>uncheck<code></code> haline getirmemiz lazım.</li>
|
||||
<li>Her radio elementine tıkladığımızda changeTheme() fonksiyonunu çalıştırmamız lazım.</li>
|
||||
</ol>
|
||||
<pre><code>
|
||||
theme1.addEventListener("click", () => {
|
||||
theme2.checked = false;
|
||||
theme3.checked = false;
|
||||
changeTheme();
|
||||
});
|
||||
theme2.addEventListener("click", () => {
|
||||
theme1.checked = false;
|
||||
theme3.checked = false;
|
||||
changeTheme();
|
||||
});
|
||||
theme3.addEventListener("click", () => {
|
||||
theme1.checked =false;
|
||||
theme2.checked = false;
|
||||
changeTheme();
|
||||
});
|
||||
</code></pre>
|
||||
<p>
|
||||
Bununla birlikte bütün temalarımız işlevesel bir şekilde çalışıyor! Kullanıcı hangi temaya tıklarsa site ona göre değişecek.
|
||||
</p>
|
||||
|
||||
<h2> Kullanıcının Tercihine Göre Temayı Kaydetme</h2>
|
||||
<p>
|
||||
İki sorunumuz var:
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li>Kodumuzda varsayılan tema yok.</li>
|
||||
<li>Kullanıcının tercih ettiği temayı kaydetmiyoruz. Sayfa her yenilendiğinde tema eski haline dönüyor.</li>
|
||||
</ol>
|
||||
<p>
|
||||
Bu sorunu localStorage kullanarak aşacağız.
|
||||
</p>
|
||||
<p>
|
||||
İlk olarak varsayılan tema oluştralım.
|
||||
</p>
|
||||
|
||||
<pre><code>
|
||||
// Varsayılan temam "theme1" olacak
|
||||
if (localStorage.getItem("theme") === null) {
|
||||
localStorage.setItem("theme", "theme1");
|
||||
}
|
||||
</code></pre>
|
||||
<p>
|
||||
Switch kullanarak her sayfayı yenilediğimizde seçilen temayı tekrar seçeceğiz.
|
||||
</p>
|
||||
|
||||
<pre><code>
|
||||
switch (localStorage.getItem("theme")) {
|
||||
case "theme1":
|
||||
theme1.checked = true;
|
||||
break;
|
||||
case "theme2":
|
||||
theme2.checked = true;
|
||||
break;
|
||||
case "theme3":
|
||||
theme3.checked = true;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
</code></pre>
|
||||
<p>
|
||||
Daha sonrasında localStorage.setItem() kullanarak eventListener'larının kullanıcının seçtiği temayı localStorage'a kaydetmesini sağlayacağız.
|
||||
</p>
|
||||
|
||||
<pre><code>
|
||||
theme1.addEventListener("click", () => {
|
||||
theme2.checked = false;
|
||||
theme3.checked = false;
|
||||
// New Code
|
||||
localStorage.setItem("theme", "theme1");
|
||||
changeTheme();
|
||||
});
|
||||
theme2.addEventListener("click", () => {
|
||||
theme1.checked = false;
|
||||
theme3.checked = false;
|
||||
// New Code
|
||||
localStorage.setItem("theme", "theme2");
|
||||
changeTheme();
|
||||
});
|
||||
theme3.addEventListener("click", () => {
|
||||
theme1.checked = false;
|
||||
theme2.checked = false;
|
||||
// New Code
|
||||
localStorage.setItem("theme", "theme3");
|
||||
changeTheme();
|
||||
});
|
||||
</code></pre>
|
||||
<p>
|
||||
Son olarak kodun sonunda <code></code>changeTheme()<code></code> fonksiyonunu çağırmamız gerekli ki her sayfayı yenilediğimizde rengimiz değişebilsin.
|
||||
</p>
|
||||
<p>
|
||||
Bu kadar! Websitemizde kullanıcının seçebileceği 3 tane temamız var ve localStrage kullanarak temayı kaydediyoruz. Sitenize bu yöntemle istediğiniz kadar tema ekleyebilirsiniz.
|
||||
</p>
|
||||
|
||||
<h2> Kapanış</h2>
|
||||
<p>
|
||||
Kullanıcının tema tercihini de göz önünde bulundurmak istiyorsanız CSS'te olan <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a> media query'sini kullanarak varsayılan temayı karanlık/aydınlık olarak ayarlayabilirsiniz. Kolay bir işlem olduğundan bu rehberi daha fazla uzatmak istemiyorum.
|
||||
</p>
|
||||
<p>
|
||||
Benim ilk kodlama rehberimdi ve herhangi bir geri bildiriminiz varsa lütfen bana ulaşın! Okuduğunuz için teşekkürler ve umarım bu rehber size faydalı olmuştur.
|
||||
</p>
|
||||
|
||||
<h2> Katkıda Bulunanlar</h2>
|
||||
<p>
|
||||
Yusuf İpek <a href="https://yusufipek.me">website</a>, <a href="https://www.youtube.com/channel/UCVBX2n_5egE9XuJL8NUS0Xg">youtube</a>
|
||||
</p>
|
||||
</main><p><i>Yazının paylaşıldığı tarih: 01-07-2021 01:24:40, son düzenleme tarihi: 01-07-2021 01:29:57, yazar: Yusuf İpek</i></p>
|
||||
<footer>
|
||||
<hr/>
|
||||
<a href=".">ana sayfa</a>
|
||||
<a href="./rss.xml">RSS</a>
|
||||
<a href="./atom.xml">atom</a>
|
||||
<br>
|
||||
<p>Sitedeki bütün içerikler kamu malıdır.</p>
|
||||
<p><small>Kullanılan teknoloji: <a href="https://pedantic.software/git/blogit">blogit</a></small></p>
|
||||
<p><small>Esinlenilen website: <a href="https://based.cooking">based cooking</a></small></p>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
@@ -0,0 +1,3 @@
|
||||
discord
|
||||
linux
|
||||
ses
|
||||
@@ -0,0 +1,3 @@
|
||||
css
|
||||
html
|
||||
web-development
|
||||
Reference in New Issue
Block a user