Nurettin KayaMesaj

Sitede Kar Yağdırma Kodu

Yılbaşına yaklaştığımız şu günlerde herkes sitesinde küçüklü büyüklü bazı düzenlemelere gidiyor. Bunlardan en basit olanı ise sitede kar yağdırmak.

Scott Schiller tarafından aşağıdaki kod ile sitenizde kar yağdırabilirsiniz. Sitenizde kar yağdırmak için aşağıdaki kodu sitenizin <head> ve </head> kodları arasına ekleyin.

Yukarıdaki kodu sitenizde <head> ve </head> kodları arasına ekledikten sonra hiç bir sıkıntı yaşamazsınız ve sitenizde kar yağmaya başlar. Aşağıdaki ise yukarıdaki ile tamamen aynı işi görüyor, tek farkı farklı bir sunucuda yer alması. İkinci bir alternatif olarak tercih edilebilir yukarıdaki kod ile aynı sonucu verecektir. İkisinden birini sitenize eklemeniz yeterli.

Yukarıda verilen kodlarda yer alan JavaScript dosyaları hemen hemen 22 Kb boyutunda. JavaScript dosyasının boyutunun büyük olması sitenizin yavaş açılmasına sebep olabilir. Bu gibi durumlar için aşağıdaki sıkıştırılmış kodu üçüncü bir alternatif olarak tercih edebilirsiniz.

Bu kod yaklaşık olarak %40 daha küçük. Yani 10 Kilobayta yakın bir değerde. Hemen hemen yarısı.

Eğer dosyaları JS dosyasını kendi sunucunuza yüklemek isterseniz buraya tıklayarak gerekli dosyaları js dosyalarını indirebilirsiniz.

Yukarıda verdiğimiz kodlardan istediğiniz birini sitenize ekledikten sonra sitenizde kar yağmaya başlayacaktır. Bu kar efekti üzerinde bazı özelleştirmeler yapmanız mümkün. Örneğin karın rengi, kar tanelerinin sayısı ve benzeri bir çok özellik.

Yukarıda verdiğimiz kodlardan birini sitenize ekledikten sonra <script> ve </script> kodlarını arasına özelleştirmesinin yapmak istediğimiz özelliğin kodlarını yazıyoruz. Aşağıda bazı özelliklerin kodunu verdik ve nasıl kullanıldıklarını anlattık.

Gerekli düzenlemeleri yaptıktan sonra bu kodu daha önce <head> ve </head> etiketleri arasına eklediğiniz kodun hemen altına ekleyin. Örneğin:

Sitene Atatürk ve Türk Bayrağı Ekle

Merhaba arkadaşlar, bugünün 23 Nisan Ulusal Egemenlik ve Çocuk Bayramı olması nedeniyle sizlere bu kodu hazırladım. Kodu sitenizin istediğiniz herhangi bir yerine ekleyebilirsiniz.

Sadece resim olarak eklemek için:

Resime bağlantı vermek için:

Ayrıca kodun içindeki width: 100px; kodunu kendi zevkinize göre düzenleyerek resmin genişliğini ayarlayabilirsiniz.

Kopyalanan Yazıya Otomatik Kaynak Adresi Ekleme Kodu

İçerik hırsızlığına karşı çok küçük önlemlerden biri de kopyalanan yazıya kaynak adresinin eklenmesidir. Kimi zaman anlık ve hızlı mesajlaşmalarda bu kaynak adresi çok iş görebiliyor. İşte bizde bu yazımızda sizlere kopyalanan bir yazıya otomatik olarak kaynak adresinin ekleyen kodu paylaşacağız.

Kodun altıncı satırında yer alan codexYazi değişkeninin içeriğini istediğinize göre düzenleyebilirsiniz.

CSS’de text-indent kodu ile Paragraf Başı Yapmak

Bu yazımızda paragraflarda ilk satırın soldan bizim belirlediğimiz kadar uzak başlamasını, yani paragraf başı yapmamızı sağlayan text-indent kodundan bahsedeceğiz.

HTML’de paragraflar <p> kodu ile belirlenir. WordPress kullanıyorsanız yazılarınızdaki paragraflarınız daima <p> ve </p> kodları arasında yer alır. Fakat ilk satır sola yapışıktır. Eğer paragraflarınıza satır başı eklemek istiyorsanız aşağıdaki kodu kullanabilirsiniz.

Yukarıdaki kodda paragraflarımızın ilk satırının soldan 35px sonra başlamasını sağlamış oldu. Ön izlemesini Türkçe bir lorem ipsum örneği ile görelim.

Biber türemiş sıfat dergi koştum orta camisi öyle ki koyun adresini kapının kulu. Filmini mi koştum sıla türemiş sıfat bilgiyasayarı. Sarmal açılmadan dolayı de adresini gitti adanaya. Layıkıyla telefonu dışarı çıktılar telefonu ve sokaklarda şafak bahar ötekinden dolayı koştum türemiş sıfat masanın yazın sevindi.

Yukarıdaki paragrafta gördüğünüz gibi ilk satırın soldan 35 piksel sonra başlamasını sağlayarak satır başı yapmış oldu.

Eğer bu kodu sitenizdeki tüm paragraflare uygulamak istiyorsanız yazının başında verdiğimiz kodu sitenizin CSS’sine ekleyin. Sadece belli bir paragrafta satır başı olmasını istiyorsanız aşağıdaki kodu kullanabilirsiniz.

Bu koda sadece px değil; pt, cm, em ve etc cinsinden de değerler atayabildiğiniz gibi yüzde % de kullanabilirsiniz. Javascript sözdizimindeki karşılığı ise object.style.textIndent=”35px”‘dir.

CSS ile Başlıkların Harflerini Büyük veya Küçük Yapmak

Başlık yazarken bazen ilk harfleri büyük yapmayı unutmuş olabiliriz ya da hiçbir harfi büyük yapmıyoruzdur. Bu başlıkları en baştan düzenlemek yerine tek bir kod ile siz başlıklarınızı yeniden düzenleyene kadar idare edebilirsiniz ya da forumlardaki kullanıcıların başlıkları tamamen küçük harfle yazmasına rağmen kelimelerin ilk harfini büyük yapabilirsiniz. Bunun için text-transform: capitalize; kodunu kullanacağız.

Örnek kullanım

Yukarıda cümlemizin tüm harfleri küçük olmasına rağmen text-transform: capitalize; kodu sayesinde ilk harfleri büyük gösterebiliriz. text-transform: lowercase; ile de TÜM HARFLERİ BÜYÜK OLAN CÜMLELERİN harflerini otomatik olarak küçük gösterebilirsiniz. Örneğin bir sözlük sitesi açacaksanız bu kodu mutlaka kullanırsınız.

Ayrıca text-transform: uppercase; kodu ile de yazılarınızın başlıklarındaki cümlelerin tüm harflerini BÜYÜK yapabilirsiniz.

Javascript ile Tıklanılan Nesnenin Gizlenmesi

Bu yazımızda çok basit bir Javascript kodunun kullanımına değineceğiz. Bu yazımızda sizlere obj.style.display=”none” kodunu anlacağız. Bu javascript sözdizimi ile tıkladığımız bir objenin yok olmasını sağlayacağız.

İlk öncelikle Javascript kodlarımızı elimize alıyoruz.

Yukarıdaki kodda gizle adlı nesneye style=”display:none;” kodunu eklemesini istedik. Bu kod tıkladığımız nesnemizi görünmez yapacak. Biz tıkladığımız bir resmin görünmez olmasını istiyoruz. Bu yüzden resim kodumuzun içine onclick=”gizle(this)” kodunu ekleyeceğiz. Kodumuzu resim kodumuzun içine eklediğimizde şöyle bir sonuç elde edeceğiz.

Tüm kodlarımızı bir araya getirdiğimizde ise,

Böyle bir sonuç elde ederiz.

Sayfa: 1 Toplam: 3123