Google Ads(Adwords) Kampanya Anahtar Kelime Düzenleyicisi

Google Ads Kampanyası için gereken sıralı ve tam eşlemeli anahtar kelimeleri kolayca oluşturur.

Anahtar Kelimeleri Satır Satır Girin

Google Ads Sıralı Eşlemeli Anahtar Kelimeleri

Google Ads Tam Eşlemeli Anahtar Kelimeleri

Javascript İle URL Yönlendirme Nasıl Yapılır?

Javascript ile bir web sayfasını başka bir sayfaya yönlendirmek son derecede kolaydır. Aşağıdaki basit kodu kullanarak istediğiniz yönlendirmeyi yapabilirsiniz

<script>
window.location.replace("https://arslanturgut.blogspot.com");
</script>

builtin@search_engine_record.com Nedir? Kimdir?

nopCommerce sistemi kullanan herkes Activity Log(Aktivite Günlüğü) kısmında tüm siteyi büyük bir hızla dolaşan, builtin@search_engine_record.com mail adresiyle kayıtlı bir müşteriye rastlamıştır. Normal bir müşteri bu kadar hızlı bir şekilde site içinde dolaşamaz. Tahmin ettiğiniz gibi builtin@search_engine_record.com gerçek bir müşteri değil, bir bilgisayar programı. nopEcommerce'nin dahili kayıt yazılımı. Bu program siteyi ziyarete gelen arama motoru botlarının tek bir guest müşteri hesabında kayıt altına alınmasını sağlıyor. Böylelikle arama motorları tarafından siteniz her tarandığında ayrı bir konuk oturumu açmak zorunda kalmıyorsunuz.

Mozilla Firefox Çoklu Pencere Kapatma Uyarısı

Mozilla Firefox Çoklu Pencere Kapatma Uyarısı Nasıl Açılır?

Firefox web gezginlerinin en çok tercih ettikleri, internet dünyasının popüler tarayıcılarından biridir. Kolay kullanımı, pek çok fonksiyonu desteklemesi ve sayısız eğlenceli eklentisi ile kullanıcılarına son derecede kaliteli ve hızlı bir hizmet sunmaktadır.

Firefox'un kullanıcılarına sunduğu güzel özelliklerden biri girdiğiniz siteleri ayrı birer sekmede(Tab) görüntülemesi. Bu sayede her site için ayrı bir pencere açıp, pencereler arasında kaybolmaktan kurtuluyorsunuz.

Ancak bu sekmeli gösterimin bir dezavantajı var. Sağ üstteki çarpı şeklindeki kapatma tuşuna bastığınızda tüm sekmelerin birden kapanması. Firefox bunu önlemek için, kapatma butonuna bastığınızda bir uyarı kutucuğu görüntülemektedir. Bu sayede tüm pencereleri birden kapatmadan önce son bir kez düşünme şansınız olur. şansınız oluyor.

Mozilla Firefox Çoklu Pencere Kapatma Uyarısı Yönetimi

Eğer kullandığınız tarayıcıda "Kapatma Onayı" kutucuğu görüntülenemiyorsa, birden fazla sekme kapatma uyarısını şu yolu takip ederek aktive edebilirsiniz. Üst menüde Araçlar butonuna basın açılan menüden Seçeneklere girin bunu klavyeden ALT+A+S tuşlarına basarak da yapabilirsiniz. Resimdeki Seçenekler menüsü açılacaktır. sol menüden Genele tıklayın ve sağda açılan menüden Sekmeler bölümüne gelin. Burada "Birden fazla sekmeyi kapatırken beni uyar" seçeneğinin solundaki kutucuğa tıklayarak işaretleyin. Artık uyarı butonunuz aktif hale gelecektir. Eğer tekrar kapatmak isterseniz "Kapatma Onayı" kutucuğu belirdiği zaman "Çok sayıda sekmeyi kapatmaya çalıştığımda beni uyar" tikini kaldırmanız yeterli.

Mozilla Firefox Çoklu Pencere Kapatma Uyarısını İptal Etmek

Saygılarımla...
Turgut Arslan

Basit JQuery Slider (Responsive)

JQuery ile basit bir slider çalışması yaptım. Bu çalışmamda birbiri üstüne absolute konumlu dizilen a ve img elemanları sırayla kullanıcılara gösteriliyor. Geçiş efekti olarak JQuery'nin fadeIn ve fadeOut fonksiyonlarını kullandım.

Sayfanın yüklenme anında resimKut id'li div elemanının içindeki a elemanlarını saydırıyor ve sırasıyla fadeIn-fadeOut efektlerini elemanlara uygulatarak slaytlar arasında geçişi sağlıyorum. a ve img elemanlarına sahip oldukları CSS'ler yine sayfanın yüklenme anında JQuery'nin css() fonksiyonuyla veriliyor. Böylece sliderı düzenlerken stil kodlarıyla uğraşmak zorunda kalmıyorsunuz.

Slider'ı responsive olacak şekilde kodladım. Slider görselleri içinde bulundukları elemanın genişliğine göre otomatik olarak boyutlandırılıyor. Yine çalışma anında slider'da bulunan a'ların yükseklik değerini alıyor ve bunu resimKut id'li elemana atıyorum. Bunu yapma sebebim resimKut elamanını position değerinin relative, içindeki a ve img elemanlarının absolute olmasıdır. Bu durumda içteki elemanları resimKutid'li elemanlardan boyutça bağımsız olacağından sayfa içine doğru yerleşemez, sayfada içeriğinin üstünde çıkar ve sayfa içeriğinin bir kısmının görünmesine engel olur. resimKut id'li dive yüksekli değeri vererek içerikteki diğer elemanları yükseklik kadar kaydırmış oluyorum.

Yükseklik hesaplaması sayfa boyutundaki değişmelere duyarlıdır ve sayfa genişliği değiştikçe otomatik olarak yeniden ayarlanır. Bu özellikle kullanıcılar tablet, telefon gibi cihazları dikey - yatay döndürdükçe sliderın konumlandırma ve boyutlandırma işlemlerinin doğru bir şekilde yapılması için gereklidir.

Son olarak bu kadar zahmete neden katlandım diye sorarsanız sırf standart ul-li yapısını kullanmamak için. Bu yapıyı tinyMCE editör gibi kodlama kısıtlaması olan editörler kullanırken site içeriğine rahatça slider eklenebilmesi için tasarladım

<div id="resimKut" style="position: relative; display: block; width: 100%; height: 400px;">
<a href="#1"><img src="tugla-duvar.jpg"/></a>
<a href="#2"><img src="bugday-tarlasi.jpg" /></a>
<a href="#3"><img src="flamanli-ampul.jpg" /></a>
<a href="#4"><img src="soru-isaretleri.jpg" /></a>
<a href="#5"><img src="baykus-resmi.jpg" /></a>
</div>
<script>
// <![CDATA[
var i = 1;
var baslatici;
var ici = $('#resimKut a');
var k = 0;
window.onload = function() {
$('#resimKut').height(ici.height());
baslat();
}

function baslat() {
for (j = ici.length; j >= 0; j--) {
$('#resimKut a:nth-child(' + j + ')').css({
'z-index': k,
'display': 'block',
'width': '100%',
'height': 'auto',
'position': 'absolute',
'top': '0px'
});
$('#resimKut img:nth-child(' + j + ')').css({
'z-index': k,
'display': 'block',
'width': '100%',
'height': 'auto',
'position': 'absolute',
'top': '0px'
});
k++;
}
setInterval(cevir, 3000);
}
$(window).on('resize', function() {
$('#resimKut').height(ici.height());
});

function cevir() {
$('#resimKut a:nth-child(' + i + ')').fadeOut(1500);
i < ici.length ? i++ : i = 1;
$('#resimKut a:nth-child(' + i + ')').fadeIn(1500);
}
// ]]>
</script>
// <![CDATA[
var i = 1;
var baslatici;
var ici = $('#resimKut a');
var k = 0;
window.onload = function() {
$('#resimKut').height(ici.height());
baslat();
}

function baslat() {
for (j = ici.length; j >= 0; j--) {
$('#resimKut a:nth-child(' + j + ')').css({
'z-index': k,
'display': 'block',
'width': '100%',
'height': 'auto',
'position': 'absolute',
'top': '0px'
});
$('#resimKut img:nth-child(' + j + ')').css({
'z-index': k,
'display': 'block',
'width': '100%',
'height': 'auto',
'position': 'absolute',
'top': '0px'
});
k++;
}
setInterval(cevir, 3000);
}
$(window).on('resize', function() {
$('#resimKut').height(ici.height());
});

function cevir() {
$('#resimKut a:nth-child(' + i + ')').fadeOut(1500);
i < ici.length ? i++ : i = 1;
$('#resimKut a:nth-child(' + i + ')').fadeIn(1500);
}
// ]]>
</script>

Responsive JQuery Sliderımızın kodlarının canlı hali,

See the Pen Basit Responsive JQuery Slider Örneği by Turgut Arslan (@draguth) on CodePen.

Turgut Arslan

Javascript JSON Parsing Örnek 1

Javascript ile JSON formatında gelen verileri kolaylıkla parse edip bir tabloda okunaklı veriler haline getirebilirsiniz..

Örnek Kod

<!DOCTYPE html>
<html>
<body>
<style>
.musteriTablo th, .musteriTablo tr, .musteriTablo td
{
padding: 5px;
border: solid 1px #f00;
color: #717171;
text-align: center;
}
</style>
<table id="tabloIcerik" class="musteriTablo" style="max-width: 800px; height: auto;
border: solid 1px #f00;" cellspacing="0" cellpadding="0">
<tr>
<th>
Sipariş No
</th>
<th>
Müşteri Adı Soyadı
</th>
<th>
Sipariş Toplamı
</th>
</tr>
</table>
<script>
var musteriler = '[{"no":"125212", "musteriAd":"Selami Parmak", "toplam":"1700 TL"},{"no":"125234", "musteriAd":"Fatih Sila", "toplam":"1800 TL"},{"no":"125365", "musteriAd":"Fethi Arsen", "toplam":"1700 TL"},{"no":"125324", "musteriAd":"Turgut Arslan", "toplam":"1900 TL"}]';
var obj = JSON.parse(musteriler);
var icerik = "";
for (i = 0; i < obj.length; i++) {
icerik += "<tr><td> " + obj[i].no + " </td><td> " + obj[i].musteriAd + " </td><td> " + obj[i].toplam + " </td></tr>";
}
document.getElementById("tabloIcerik").innerHTML += icerik;

</script>
</body>
</html>

Kodları Çalıştırdığınız Zaman;

See the Pen Basit Bir JSON Parsing Örneği by Turgut Arslan (@draguth) on CodePen.

Saygılarımla... Turgut Arslan

Javascript Büyüteç Uygulaması

Saf Javascript ve CSS kullanarak basit bir büyüteç programı yazdım.

Javascript Büyüteç Kodları:

HTML Kodu;

<div id="resimKabi">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg" />
<div id="buyutec"></div>
</div>

CSS Kodu;

#resimKabi {
width: 100%;
height: auto;
display: block;
position: relative;
overflow: hidden;
}
#resimKabi img {
display: block;
width: 100%;
height: auto;
}
#buyutec {
width: 100px;
height: 100px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg);
background-repeat: no-repeat;
border-radius: 50%;
border: solid 2px #fff;
position: absolute;
}

Javascript Kodu

window.onload = function () {

boyutla();

takipEt();

var eni, boyu, kutuEn, kutuBoy, hesEn, hesBoy;

var buyutec = document.getElementById('buyutec');

var rsmKap = document.getElementById('resimKabi');

window.addEventListener("resize", boyutla);

buyutec.style.backgroundSize = '3000% 3000%';

function boyutla() {

var kutum = document.getElementById('resimKabi');

var urlAdr = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg';

var resm = new Image();

resm.src = urlAdr;

eni = resm.width;

boyu = resm.height;

kutuEn = kutum.offsetWidth;

kutuBoy = kutum.offsetHeight;

hesEn = (eni / kutuEn) * 2.2;

hesBoy = (boyu / kutuBoy) * 3.5;

}

function takipEt() {

var x = null;

var y = null;

document.getElementById('resimKabi').addEventListener('mousemove', onMouseUpdate, false);

document.getElementById('resimKabi').addEventListener('mouseenter', onMouseUpdate, false);

function onMouseUpdate(e) {

var konumu = rsmKap.getBoundingClientRect();

x = e.clientX - konumu.left;

y = e.clientY - konumu.top;

buyutec.style.left = (x - 55) + 'px';

buyutec.style.top = (y - 55) + 'px';

buyutec.style.backgroundPosition = (-x * hesEn) + 'px ' + (-y * hesBoy) + 'px';

}

Bu kodların sonucu;

Kodlar Üzerinde Oynama Yapmak İsterseniz Buraya Bakabilirsiniz

See the Pen Javascript Büyüteç Uygulaması (JS Magnifier) by Turgut Arslan (@draguth) on CodePen.

Saygılarımla...
Turgut Arslan

Google 20 Yaşında

Google 20 Yaşında

Bu gün Google'ın 20. Yaş Günü. Firma yirminci yaşına özel bir video hazırladı. Videoda kurulduğu zamandan bu yana dünyada olan önemli gelişmeleri kendine özgü güzel anlatımıyla özetlemiş. İyi seyirler.

Saygılarımla... Turgut Arslan

Javascript Kopyalama Kodu

Javascript HTML İçerik Kopyalama Kodu

Bu aşağıdaki becerikli kod id'si kopya olan HTML elemanının tüm içeriğini panoya kopyalar. Yani copy to clipboard denilen işlemi yapar. .

function CopyToClipboard(kopya) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById("kopya"));
range.select().createTextRange();
document.execCommand("copy");

} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById("kopya"));
window.getSelection().addRange(range);
document.execCommand("copy");
alert("Panoya Kopyalandı")
}
}

Javascript ile web sayfasındaki bir metni tıklandığı zaman clipboarda kopyalamak mümkün. aşağıdaki butona tıkladığınızda, bu metin panoya kopyalanır. İstediğiniz yere yapıştırabilirsiniz. İnanmıyorsanız butona tıklayon ve aşağıdaki metin kutusuna yapıştırın, nasıl çalıştığını kendi gözlerinizle görün.

Saygılarımla... Turgut Arslan

Google Reklam Kişiselleştirmeyi Nasıl Kapatırım?

Google'ın kişiselleştirilmiş reklamlarından rahatsız mı oldunuz?

Bir web sayfasını(özellikle bir e-ticaret sitesini) ziyaret ettikten sonra dolaştığınız her yeni sitede daha önce dolaştığınız sayfadaki ürünlerin reklamlarını görmekten sıkıldıysanız bu çözüm tam da size göre. Hemen aşağıdaki adrese gidip Reklam kişiselleştirme açık butonunu kapalı konumuna getirerek Google'ın verilerinizi reklamlarda kullanmasına engel olabilirsiniz.

https://adssettings.google.com/authenticated

Gogole'ın kişiselleştirilmiş reklamlarını kapatmak

Saygılarımla...
Turgut Arslan

Renk Paletim

Web/Grafik Tasarım Çalışmalarımda Kullandığım Renkler

#e9e8ef

#f5dfd5

#ed393a

#4251b6

#6ed6df

#f2ce20

#56f8bc

#42b1ff

#fce55b

#ff9f1d

#e71d35

#30c4b6

#011627

#0eadf1

#fa3263

#f8ad30

#28cda3

#135b4d

#fcd76c

#686459

#975592

#a1834d

#9f353f

#cbbb80

#cb3c74

#6d5b97

#e18bb8

#c59169

#d2b356

#b66ba4

#f37a29

#d74061

#fdb33a

#6d5b97

#1180ae

#d9ba2e

#6a6d52

#b32f3d

#ca457e

#83b14f

#81313a

#45223a

#ef5229

#93366b

Saygılarımla...
Turgut Arslan

SEO Uyumlu Sayfa Örneği

Bu yazıda SEO uyumlu Sayfa Nasıl Hazırlanır? Onu Araştırdım ve YOAST eklentisini baz alarak bir örnek sayfa oluşturdum. Sayfada yazı olarak lorem ipsum hurufat kelimelerini kullandım.

Örnek Sayfa

SEO UYUMLU SAYFA ÖRNEĞİ

Lorem ipsum dolor sit amet, seo uyumlu sayfa consectetur adipiscing elit. Donec volutpat blandit risus ornare tempor.

SEO ile ilgili tanım için Mauris a ipsum venenatis, commodo enim a, dignissim metus. Proin eget molestie odio. Maecenas porttitor urna et elit eleifend euismod. Suspendisse facilisis sem vel lorem tristique auctor. Sed sed ultricies elit. Pellentesque euismod placerat lobortis. Aliquam sollicitudin tincidunt dui, vitae faucibus orci mollis sit amet. Nunc vitae tortor sodales, fermentum tortor eu, luctus risus. Sed eget ligula ac tortor mollis ultricies. Aenean augue ipsum, ornare sit amet tristique et, dapibus vitae lectus seo uyumlu sayfa. Quisque gravida quam at turpis consectetur, et pellentesque nibh gravida. Integer lacinia fringilla turpis non iaculis.

SEO uyumlu sayfa yapmanın faydası nedir?

Donec hendrerit dui vitae nisi sagittis, imperdiet porta odio pulvinar. Nam tempor velit metus. Maecenas tempus ipsum lectus, vel blandit urna imperdiet sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas seo uyumlu sayfa. In placerat molestie laoreet. Aenean felis felis, accumsan id pulvinar ut, varius at tellus. Sed eu tortor quis dui imperdiet gravida porta nec erat. Morbi tincidunt dui in ultricies fringilla. Mauris porta sapien ac justo tempus blandit. Vivamus porta eros a elit dignissim laoreet. seo uyumlu sayfa Nam ornare, ipsum cursus faucibus posuere, diam dolor vulputate nunc, sed volutpat massa leo sed dolor. Aliquam finibus dignissim libero a aliquet. Nullam molestie tellus et orci gravida, ut ullamcorper tortor rhoncus.

Sayfam Neden SEO Uyumlu Olmalı?

Because sagittis diam eget odio consequat ultrices. Vestibulum a leo aliquam neque cursus aliquam seo uyumlu sayfa örneği quis non risus. Praesent ultrices pretium nisl, in finibus magna malesuada in. Aliquam vulputate neque in mauris euismod, nec euismod ipsum tempus. Nunc lobortis rutrum nulla, nec mollis leo porttitor et. Proin aliquam auctor enim id feugiat. Duis laoreet, augue vitae feugiat pretium, orci purus ullamcorper diam, at semper magna ligula ut libero. Nam ligula felis, commodo eget ligula nec, dictum fringilla tortor seo uyumlu sayfa. Nam a convallis tortor, ac rutrum ligula. Nullam id rhoncus arcu. In sit amet leo dui.

Nasıl daha iyi seo uyumlu sayfa hazırlarım?

Sonuç In pulvinar sem risus, feugiat porta metus auctor at. Nullam vehicula mauris eget laoreet luctus. Duis nec massa ornare, imperdiet augue sed, bibendum justo. Donec vel elit augue. Suspendisse seo uyumlu sayfa ac felis pulvinar, vulputate ante quis, blandit leo. Sed justo sem, pretium scelerisque libero vel, auctor dictum velit. Vestibulum iaculis porttitor placerat.
As a result Donec id tincidunt felis. Donec vulputate enim blandit mauris gravida, a suscipit leo venenatis. Pellentesque seo uyumlu sayfa non pharetra sem, eu hendrerit nisl. Maecenas non volutpat nisi. Integer laoreet mi erat, sit amet dignissim urna interdum id. Mauris viverra id diam nec malesuada. Mauris nec consectetur diam. Maecenas ac ex eu felis tincidunt blandit vitae eleifend nunc.

Sayfada özelikleri başlıca şöyle;

Anahtar Kelimesi : SEO Uyumlu Sayfa

Sayfa Başlığı (Title Etiketi) : SEO Uyumlu Sayfa Nasıl Olur? Sizin İçin Araştırdım ve Bir Örnek Hazırladım

Meta Açıklaması (Description) : İyi bir seo uyumlu sayfa oluşturmak ve google'da üst sıralara çıkmak için nasıl bir çalışma yapılmalı? Bu sorunun Cevabını araştırdığımız çalışmamızda. En çok bilinen SEO kriterlerine göre bir sayfa oluşturmaya çalıştık. Umarım SEO çalışmalarımızda hepimize faydası olur.

URL Uzantısı(Slug) : seo-uyumlu-sayfa

Bu örnek sayfada,

İlk paragrafta anahtar kelimem olan SEO Uyumlu Sayfa yı kullandım. aynı şekilde H1 etiketli başlıkta da anahtar kelimem geçiyor. Sayfada 1 adet H1, Bir adet H2 ve iki adet H3 kullandım. Sayfanın anahtar kelime yoğunluğu %2,3. Mümkün olduğunca anahtar kelime maksimum sayı değerini göstermek istedim. Bu yazıda toplam 469 kelime bulunuyor. Bunların 11 tanesi anahtar kelime.

Sayfada bir adet dahili bir adet de harici bağlantı kullandım. Ayrıca bir örnek görseli de anahtar kelimeyi içeren alt özelliğini de yazarak sayfaya ekledim.

Konu ile ilgili değerlendirmelerinizi bekliyorum

Saygılarımla...
Turgut Arslan

CSS ile Overlay Yapmak

Resim Başlığı

Resim Yazısı.

<!DOCTYPE html>
<html>
<head>
<title>CSS Overlay Efekti</title>
<style>
.kapsayici{

width:800px;
height:476px;
overflow:hidden;
text-align:center;
position:relative;
}
.perde{
position:absolute;
top:100%;left:0;right:0;bottom:0;
background:rgba(237,71,74,0.5);
color:#fff;
z-index:1;
padding-top:45%;
transition:top 0.5s;
}
.kapsayici:hover .perde{
top:0;
}
</style>
</head>
<body>
<div class="kapsayici">
<img src="/kirmizi-mercedes.jpg" />
<div class="perde">
<h3>Resim Başlığı</h3>
<p>Resim Yazısı.</p>
</div>
</div>

</body>
</html>
CSS overlay efetki ve diğer pratik bilgiler için Arin Yazılımın videolarını izleyebilirsiniz
https://www.youtube.com/watch?v=3aoOP_1mpws&list=PL-Hkw4CrSVq9GTqLreY9l5MiJJm6EOkal&index=7

Saygılarımla...
Turgut Arslan