Kayıtlar

Javascript Büyüteç Uygulaması

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

Javascript Büyüteç Kodları:
<!DOCTYPE html> <html> <head> <style>
</style> </head> <body>
<div id="resimKabi" style="width:100%;height:auto;background:url() no-repeat center;display:block;background-size:cover;position:relative;overflow:hidden;">
<img src="https://1.bp.blogspot.com/-3qHgrm-aeyY/W7stoW8SG4I/AAAAAAAACHc/Sywb-VigiVAEezKqBP9KqNl576nM6lifwCLcBGAs/s1600/lotr-ring.jpg" style="display:block;width:100%;height:auto;"/>
<div id="buyutec" style="width:100px;height:100px;background:url(https://1.bp.blogspot.com/-3qHgrm-aeyY/W7stoW8SG4I/AAAAAAAACHc/Sywb-VigiVAEezKqBP9KqNl576nM6lifwCLcBGAs/s1600/lotr-ring.jpg);background-repeat:no-repeat;border-radius:50%;border:solid 2px #fff;position:absolute;"></div>
</div>




<script>
    window.onload = function () {
        boyutla();
        …

Google 20 Yaşında

Resim
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.

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ırabilir…

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

Resim
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


Renk Paletim

Resim
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 #c59169 #d2b356 #b66ba4 #f37a29 #d74061 #fdb33a #6d5b97 #1180ae #d9ba2e #6a6d52 #b32f3d #ca457e #83b14f #81313a #45223a #ef5229 #93366b

SEO Uyumlu Sayfa Örneği

Resim
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 turp…

CSS ile Overlay Yapmak

Resim
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