12 Eylül 2017 Salı

Yorum yok

Siteni renklendir

Web Siteni CSS tanımlarıyla Renklendir

sayfana renk katacak css kodlar

Dikkat ederseniz her konuda 'site' kelimesini kullanarak, konu'dan fayda sağlayacağı platformu seçmeksizin web ağına bağlı tüm domainlere yardımcı olabilmek adına bir şeyler paylaşıyorum. Bilgi sahibi olduğunuzu düşündüğünüzde küçük çaplı konular gibi görünsede bilmeyenler için yararlı olduğunu düşündüğümden siteniz veya bloğunuz'da görünüm ve tarzını renklendirecek küçük tanımlar (css kodlar)sunucam.
tudimenu li { background: #f4524d; color: white; border: 1px solid gray; padding: 2px 3px 4px 5px; margin-top: 2px; margin-right: 3px; margin-bottom: 4px; margin-left: 5px; border-radius: 8px; display: block; float: left; -webkit-box-shadow: 3px 3px 4px #000; }
Üsteki CSS kodları aşağıda bulunan HTML kodlarına ait tanımlardır.
<div class="tudimenu">
<li><a href="sayfa">Ana Sayfa</a></li>
<li><a href="sayfa url">ikinci</a></li>
<li><a href="sayfa url">üçüncü</a></li>
<li><a href="sayfa url">dördüncü</a></li>
<li><a href="sayfa url">beşinci</a></li>
</div>

Bu HTML ve CSS kodlarını kullanıp örnek olarak bir buton menü hazırladım. Siz dilerseniz aşağıda vereceğim tanımları farklı yerlerde kendinize göre değişiklikler yapıp buton, sütun, tablo, veya istediğiniz eklentilerde kullanabilirsiniz. Fazla detaylara giremediğim için kusuruma bakmayın oldukça vakit alan ve geniş bir konu. Aşağıda kullanımlarıyla ilgili açıklama ve örnekleri inceleyebilirsiniz.

Background(arka fon)

Türkçe kelime anlamı 'arka fon' olan BLACKROUND renk, resim, klip ve ses gibi görsel ve işitsel nesneleri arka plana yerleştirmemize yardımcı olan tanım türlerindendir. Şimdi gelelim nasıl kullanıldığına.

blackround: Arka fon için kullanılan renk veya görseli içine alan tanımdır.

background-color: Sadece renk seçimi için kullanılan tanımdır.

background-image görsel için kullanılan tanımdır.

Bunlar arka fon için kullanabileceğiniz türün tanımları.
örnek:
background: #f4524d;

Border(sınır)

Eklenti ve temanızda dolgunun bitiş sınırını göstermek için kullanılan tanımlardır.

border: sınır için kullanılan tanımlardır.

border-(right)(left)(top)(bottom): Sağ, sol, üst ve alt sınırı için kullanılan tanımlardır.

border-radius: Kenarlıkların eğimi için kullanılan tanımlardır.
örnek:
border: 1px solid gray;

Padding(kenara uzaklığı)

Kullanıldığı dolguya olan uzaklığını belirleyen tanımdır.

padding: Tüm dolguya olan uzaklık.

padding-(left)-(right)-(top)-(bottom): sağ, sol, üst ve alt dolgunun uzaklığı.
örnek:
padding: 2px 3px 4px 5px;


margin(kenar boşluk)

Kenarların uzaklığı için kullanılan tanınlardır. Örnekte her bir kenar uzunluğunu farklı tanımlarla gösterdim.
örnek:
margin-top: 2px; margin-right: 3px; margin-bottom: 4px; margin-left: 5px;

Shadow(gölge)

Dolgu, tablo ve butonlarda kullanabileceğiniz gölgelik efecti veren tanım.
örnek:
webkit-box-shadow: 3px 3px 4px #000;


Radius

Sınır çizgisinin birbirine eğilimi için kullanılan tanımdır.
örnek:
border-radius: 8px;

Display(düzen)

Öğenin düzenini sağlayan tanım.
örnek:
display: block;

Float

öğenin yerini belirleyen tanım.
örnek:
float: left;
Devamını Oku »

11 Eylül 2017 Pazartesi

Yorum yok

Konu için görsel oluşturma

Kendi görselinizi kendiniz yapın

Paylaşım yaparken konuya ait bir görsel bulmak için arama motorlarından faydalananların çoğu kendi görselini oluşturabilecek düzeyde olmadıkları için buna mecbur kalıyorlar. Genellikle pohotoshop kullanarak profesyonel görseller oluşturulabilir buda photoshop kullanmayı gerektiriyor, fakat oldukça zahmetli ve karmaşık bir program olduğundan çoğu kişi yararlanamıyor.Geri kalan tüm uygulama ve programlarla yapılan görseller biraz daha acemiliğe kaçarak ve istediğimiz gibi oluşturma imkanı vermiyor. Bunun için görselleri oluşturmak yerine arama motorlarından görsel aramayı tercih ediyoruz. Konunuz ile alakalı kendi görselinizi yapmak için size yardımcı olacak, oldukça basit ve istediğiniz bir biçimde görsel üzerinde değişiklikler ve ekler yapabileceğiniz bir kaç faydalı interner sitesini tanıtıcam.

Dikkat Edilmesi Gerekenler

Bu internet sitelerinin nasıl kullanacağınıza geçmeden önce görselleri en iyi nasıl kullanabilir ve oluşturabiliriz ? Nelerden kaçınmamız gerektiğini bir kaç maddeyle sizin için araştırdım.
  • Görsel ile alakalı yazıların veya başlıkların alt kısmında bulundurulması.
  • Tema renginize ve diğer renk uyumluluğuna dikkat ederek açık veya koyu, temaya göre renk seçimi ve yazı rengi.
  • Görsel boyunu olabildiğince küçük çözünürlükte olması, bu sayfa yükleme hızınızıda etkiler.
  • Konuya uygun resim ve iconlar'ın kullanılması.

Görsel Oluşturma

İki tür siteye değineceğim ki bu siteler alanında en iyisi. İlk olarak iconarchive, bu site içerisinde yüz binlerce iconu barındıran, iconun boyut, renk, kategori ve türüne göre filtreleyen gerçek bir icon arama motoru diyebiliriz. Gerçekte kullanacağımız ve görseli oluşturacak site www.creafe.net/banner/ bu siteye ilk girişimizde önümüze çıkan pencerede 3 seçenekten birini kullanabiliriz.Bunlar url adresi ile yükleme, bilgisayardan yükleme ve kendin oluştur seçenekleri. Bu seçeneklerden birini seçerek ilk adımı geçicez tercih sizin. Daha fazla deneyim için seçenekleri test edin.
Eklediğimiz resim veya boş resim penceresinin üst kısmında bulunan aç seçeneğini tıklayınca üst kısımda bulunan pencere tekrar aftif olur. Bunu kullanarak isterseniz iconarchive.com'den bir icon, isterseniz seçtiğiniz bir resmi üzerine birleştirerek kullanabilirsiniz.Yan tarafta bulunan yardımcı menüdeki yazı, resim, şekil ve çizimlerdende yararlanarak dahada iyi bir görünüm sağlayabilirsiniz.

Temel seçeneğinde ise yön, boyut, arka planrengi gibi seçenekler var. En son görselimizi kayıt etmek için temel kısım seçeneğinden birleştir seçeneğimizi tıkladıktan sonra üst kısımda bulunan kaydet butonuna basıyoruz. Kayıt gerçekleşmediği takdirde (Bu görsel mb. boyutunun yüksek olmasından kaynaklı) görselimizin üzerine sağ tıklayıp resmi kaydet seçeneğiyle bilgisayarımıza indirip kullanıma hazırlaya biliriz. Bu site üzerinde kullandığım tüm resim, görselleri bu şekilde hazırlayıp bu iki farklı siteden yararlanıyorum. Bu  görsel oluşturucu ve icon sitesini denemenizi tavsiye ederim.
Devamını Oku »

9 Eylül 2017 Cumartesi

2 yorum var.

Kullandığıniz görsellerin arama motorları için önemi

Arama Motorlarında Görseller

Yaptığınız paylaşımlarda kullanıcılara veya takipçilerinize anlaşılır bir dil kullanmanın yanı sıra konu ile alakalı verdiğiniz görsel kullanıcı deneyimini ve paylaşımın kalitesini arttırır. Genellikle google, yandex, yahoo ve bing üzerinden yapılan görsel aramaları, arama sonucuna göre seçtiğiniz görselin popülaritesini azaltır ve konu ile alakalı görsel aramalarda, görselin daha alt sıralarda çıkmasına neden olur. Bunu önlemek için ya görsel üzerinde değişiklikler yapıp boyutunu tekrardan ayarlamak veya yeni bir görsel oluşturmak.
blogunuz için görsellik en önemlisi

Paylaşımlarda Yeni Görsellerin Kullanılması ve Önemi

Paylaşım yaparken kullandığımız kelimelerden, başlık ve etiketlerden tutun satır sayısına kadar herşey arama motorlarında üst sıralara çıkmamıza etki eden detaylardır. Bu tür detayların yanında kullanılan konu ile alakalı görsellerle'de, görsel arama sonuçlarında üst sıralara çıkmamız için oldukça önemlidir.. Ben kendi şahsıma kullanmak veya bulmak istediğim bir konuyu ilk olarak görsellerde arama yaparak bulmaya çalışırım. İkinci seçenek olarak google arama sonuçlarına yönelirim. Aynı yöntemleri kullanan milyonlarca google kullanıcısı olduğunu düşünürsek paylaşıma uygun ve dikkat çekici görsel, yeni bir tür görsel kullanımı hit seviyenizi iyi yönde etkiler. En iyi nasıl görsel oluşturabilirsiniz ? Bir sonraki konuda size detaylı anlatımını yapıcam.
Devamını Oku »

8 Eylül 2017 Cuma

Yorum yok

Web üzerinden herhangi bir renk kodunu bulma

Beğendiğiniz Renk Hangi Sayfada

Dolaş, dolaş bitmeyen internet ortamında bin bir çeşit renk ve her klavyeden farklı kodlamalar, işte bunlar size tasarımınız için ilham kaynağı. Aradığımız her nesneyi hemen google amcaya soruyor, o site senin, bu site benim derken zaman kaybı ve aklımızda kurguladıklarımızı kaybediyoruz. Bunun önüne geçmek için renk kodu seçmekten başlayarak size zahmetsiz yollar bulmaya çalışalım. Küçükten başlayarak anlatmaya karar verdimki, ileriki konularda bu küçük ayrıntıları kullanarak fark yaratabilesiniz. Bilmeyeniniz vardır diye bu konuyu açtım, umarım işinize yarar ve renk seçimlerinizi google amcayı kullanmadan yapabilesiniz.
sağ tıklama ile renk kodunu bulma

Sağ Tık ile Renk Seçme

Bir sitedeki renk veya renk uyumunu kendi sitenizde kullanmakmı istiyorsunuz?Çok zahmetli ve kafa karıştırıcı bir işlem olmasa da, çokça kullandığım ve bilmeyenlerinde kullanacağını düşündüğüm sağ tık ile renk kodunu bulma işlemini size birkaç adımda anlatayım.
  • İlk olarak beğendiğiniz web sayfa üzerindeki renkleri kaplayan alana sağ tıklamak.
  • Sol tık seçeneklerinden incele seçeneğini tıkladığımızda 'tarayıcılarda değişir' sağ tarafta açılan pencerede, en alt kısımda bulunan css kodları içerisinde color seçeneği bulunan kod düzeneğindeki renk küpüne tıklayıp açıyoruz.
  • Açılan color penceresine müdahale etmeden sol kısımda beğendiğimiz rengin üzerine tıklayınca, color penceresinde seçtiğimiz renk belirir,
  • Hemen alt kısımda '#' ile başlayan 6 rakam veya 6 kelime ile biten ek, beğendiğiniz rengi web ortamında yansıtmakta kullandığımız, renk kodu'dur.
,umarım işinize yaramıştır.
Devamını Oku »

4 Eylül 2017 Pazartesi

2 yorum var.

Blog yazmadan once

Blog Yazarlığı'na Başlarken

Blogunuzu kurdunuz, temasıyla renkleriyle seçtiğiniz konuya kadar, kısacası herşeyiyle tamam. Sıra geldi blog yazarlığınızı göstermeye, paylaşımlarınızı sevdirip bol bol yorum ve beğeni almaya. Bu blog yazarlığınızı göstereceğiniz konudaki tecrübe ve bilgiye bağlı olarak başarılı veya çok başarılı olabilirsiniz, ama ilk paylaşımınızı yapmadan önce, bu tecrübe edindiğim ön bilgiye bir göz atıp deneyin bence. Eminim bunlar paylaşacağınız makaleler ve içeriklerde duraksayıp nasıl devam etsem? sorusunu kaldırmanıza yardımcı olacaktır.
bir blogda yazar nasıl olunur

Bir Blog'cu için Gerekenler

Blog kurmak herkes için oldukça basit ve masrafsız artık, her isteğen bir blog sahibi olabilir. Bir sürü platform ücretsiz alan ve domain veriyor. Bazılarının kar amacı güderek yaptıkları bu hizmet internet ortamında (internet atığı) dediğimiz bir sürü sitenin oluşmasına neden oldu. Bu siteler hit yani ziyaretçi sayısını bölerek internet üzerinden istediğimiz bilgiye veya o konuda paylaşımını yapmamıza engel oluyor. Sizde bunlardan biri olmamak için öncelikle nasıl paylaşımlar yapacağınıza dikkat ederek en doğru şekilde bilgi vermeye çalışın. Bilgi ve deneyiminiz olduğunu düşündüğünüz konular üzerine bir blog açmak en doğrusu.

Uyumluluk

Google adsense başvurularında olumsuz cevap alanlar 'içeriğiniz uyumsuz' gibi bir sorunla karşılaşır, bu sorun paylaşımınız veya temanızla alakalı olabilir, hem ziyaretçilerinizin hemde google amcanın dikkatini çeker. Paylaşımlarınızın içeriği birbiriyle yada başlıkla uyumsuz olmamalı.Gözleri yormayan bir tema kullanın.
Misal; verdiğiniz başlık makalenizi yansıtmalı, içeriğe ve temanıza uygun bir görsel kullanın.

Makale

Bir yazınızda bilgi kısmı dışında 'başlıklardan hemen sonraki metin' hariç aktaracaklarınızı mümkün mertebe özet ve öz bir şekilde yazın. Bu okuyucularınızın makalenizi okurken sıkılmadan bitirebilmesi için önemli. Makalelerinizi başlıklar halinde ve 'Heading Etiketleri' dediğimiz kullanılan etiketlerin düzenine uygun olarak yazın, max. 1 h1, 4 h2 ve 4 h3 kullanın. Yazım kurallarına dikkat ederek ve açıklayıcı cümleler kurarak.

Ruh Hali

Başlamadan önce kendinize öz güven sağlayın. Sevdiğiniz bir müziği açarak veya sizi mutlu edecek bir şeyler düşünerek. Blog yazarlığına başladıysanız zaten severek yaptığınız için bunlar sadece takviye diyebilirim. Siz zaten en iyisisiniz...

Not: bu makale zaman içerisinde değiştirilebilir veya ek yapılabilir.
Devamını Oku »

1 Eylül 2017 Cuma

Yorum yok

ilk yazı'm değil bu

Can Sıkıntısıyla Başladı Herşey

bu blogda ilk yazım
Bazen tek kaldığımda yapacak pek bir şey bulamadığım zamanlar aklıma ilk gelen bilgisayarın başına geçip bilgisayar monitörüne, klavye tuşlarına basıp, basıp dert anlatmak. Ama ilk beş satırdan sonra sıkıntı basıyor içimi tek derdi olan sen değilsinki diyor monitör ekranı, google amcada neler çıkıyor neler. Her gün yeni bir haber yeni olaylar, üzücü, sevindirici binlerce yazı, bazen yalan bazen abartılı kim dinlerki diyorum bu defa kendi kendime. Yok diyor sağ yanım yaz sen, karala bir şeyler, cana en yakın bulduğumuz sevdiğimiz insan oğlu, ALLAH'ın kuluna sağ yanım denir ya. Bana da ordan yükseldi ses, ben ordan duydum o sesi, masum doğru gibi geldi bana, bende yazıyorum şu an, dilediğim gibi. Bu blogdaki ilk yazım olucak, okuyan okumayan herkese huzurlu ömürler diliyorum.Ne demişler yeni temalarda, ilk konularında 'MERHABA DÜNYA'.

Devamını Oku »