Bu dersimizde Photoshop ile fotoğrafların arkaplanını temizliyoruz, daha sonra fırça oluşturuyoruz.
Derste aşağıdaki görsel kullanılmıştır.
Video derslerimizi takip etmek için YouTube kanalımıza abone olabilirsiniz.
Makalenin alt kısmından tasarımı canlı olarak test edebilirsiniz.
Bu tasarımı hazırlamak için tek yapmamız gereken birkaç satır HTML ve CSS kodu yazmak. Overflow:hidden tanımlamasını CSS’in transition elemanı ile süsleyerek <section>‘ın detayında bulunan bilgiyi gizleyeceğiz.
Daha önce dediğimiz gibi section elemanı ile bir örnek hazırlayalım. Tasarımı genişletmek ve daha şık hale getirmek için biz bir adet span elemanı da kullanacağız.
<section>
<span>Adobewordpress.com ne yapar?</span>
Adobe dersleri, WordPress, SEO, HTML5 ve CSS3 gibi güncel konuları ele alan Türkçe interaktif eğitim merkezi.
</section>
Şimdi geçelim tasarıma.
Section elemanı için tanımlamalarımızı yapalım. 12 piksel büyüklüğündeki Tahoma yazı tipi ortalama olarak 15px civarında bir satır uzunluğuna sahip. Dolayısıyla max-height tanımlamamız ile section elemanını daraltıyoruz.
section
max-height: 15px;
overflow: hidden;
background-color: #665847;
border-left:8px #3D362D solid;
width: 220px;
padding: 4px;
color: #FFFFFF;
-webkit-transition: max-height 1s ease;
-moz-transition: max-height 1s ease;
-o-transition: max-height 1s ease;
transition: max-height 1s ease;
font:12px Tahoma;
Şimdi de section elemanının üzerine gelince olmasını istediğimiz değişikliği, yani height değerinin yükselişini belirtiyoruz.
section:hover max-height: 200px;
Ve son olarak span elemanımızı tasarlayalım.
spancolor:#FF9900; display:block; margin-bottom:5px;
İşlem bu kadar.
Bu tip küçük örnekleri paylaşmayı seviyoruz. Çoğu zaman direkt olarak işinize yaramasalar bile ilham verici tasarımlar oldukları aşikar. Sonuca şöyle bir göz atalım :
Bir sonraki makalemizde görüşmek üzere, hoşçakalın.
Bu dersimizde her türden ekran çözünürlüğüne uyumlu olarak çalışan bir fotoğraf galerisi tasarlayacağız. Hazırlayacak olduğumuz bu galeri, görsel ağırlıklı tasarımlar için ideal gözüküyor.
Sayfanın küçültülmesi ve büyültülmesi de dahil tüm ölçütlendirme işlemlerinin anlık olarak uygulanması için jQuery desteğine ihtiyacımız var. Dolayısıyla ilk olarak web sayfanızın <head></head> alanına jQuery‘nin güncel versiyonunu eklemeyi unutmayın. jQuery 1.11.0′ın sıkıştırılmış halini kullanmak isterseniz aşağıdaki kod sizin için yeterli.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
Şimdi sırasıyla kodlarımızı yazalım.
Galerinin gözükmesini istediği yere, yani kısaca <body></body> içerisinde istediğiniz alana div elemanımızı ekleyelim. Galeri isimli bir class atanmış div ekleyerek işleme başlayın. Bu div elemanının içerisine de bol bol görsel ekleyin. Eğer hali hazırda önizleme yapmak için yeterli görseliniz yoksa aşağıdaki kodları direkt olarak kullanabilirsiniz. Aşağıda 14 adet, çeşitli boyutlar görseller mevcut.
<div class="galeri">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/12/Ruth-Steck.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/11/aw-kartvizit.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/Kinetic-Singapore.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/Esteban-Munoz.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/instagram-1977.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/Dreamer-theme.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/Kutztown-University.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2014/01/Adament.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/tilt-shift-blur.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/scriptfont-masana.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/genclige-hitabe.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/scriptfont-anha-queen-vmf.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/scriptfont-the-dreamer.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/07/photoshop-eskitme-efekti.jpg">
</div>
Sırada CSS kodlarımız var. Gördüğünüz gibi sadece 2 satırlık bir kod kullanacağız. Eğer isterseniz .galeri classına tasarım oluşturabilirsiniz. Ayrıca bu kısımdaki padding tanımlamasını değiştirerek objelerin birbirlerine olan mesafelerini de düzenleyebilirsiniz.
.galeri img
float: left;
padding: 0 2px 2px 0;
Ve son olarak JS kodlarımızı ekliyoruz. Detaylandırarak devam edelim. Düzenlemek isteyebileceğiniz kısımları etiketler ile belirttim.
<script language="JavaScript">
function boyutGaleri()
// Bir fotoğraf karesinin kabaca genişlik ve yükselik değeri
var genislik = 400;
// Eğer ne yaptığınızı bilmiyorsanız buradan aşağısını değiştirmeyin
var kutuGenislik = $(".galeri").width();
var MaxDeger = kutuGenislik / genislik;
var imgs = $(".galeri img");
var noFoto = imgs.length, OrtDeger, ratio, photo, row, rowPadding, i = 0;
while (i < noFoto)
OrtDeger = rowPadding = 0;
row = new Array();
while (i < noFoto && OrtDeger < MaxDeger)
photo = $(imgs[i]);
// genişliği resetle
photo.width("");
ratio = photo.width() / photo.height();
rowPadding += yatayPad(photo);
// eğer birinci öğe ise clear:left ekle
if(OrtDeger == 0) photo.css("clear", "left"); else photo.css("clear", "none");
OrtDeger += ratio;
row.push(photo);
i++;
// eğer sadece 1 resim kaldıysa onu sıkıştır
if(i == noFoto - 1) MaxDeger = 999;
unitWidth = (kutuGenislik - rowPadding) / OrtDeger;
row.forEach(function (elem)
elem.width(unitWidth * elem.width() / elem.height());
);
function yatayPad(elem)
var padding = 0;
var left = elem.css("padding-left");
var right = elem.css("padding-right");
padding += parseInt(left ? left.replace("px", "") : 0);
padding += parseInt(right ? right.replace("px", "") : 0);
return padding;
$(window).load(boyutGaleri);
$(window).resize(boyutGaleri);
</script>
Bu galeri orjinal haliyle bile inanılmaz büyük görsel havuzuna alt yapı oluşturabilir. Eğer aklınızda böyle bir tasarım kullanmak varsa hiç düşünmeden bu tasarımı kullanabilirsiniz.
Galeri Justin Klemm‘e aittir. Kendisine hem bu kaliteli tasarımı hazırladığı için, hem de Türkçe olarak anlatmamıza müsade ettiği için teşekkürlerimizi iletiyoruz.
Bir sonraki yazımızda görüşmek üzere, hoşçakalın.
Sadece birkaç saniye içerisinde üstteki örneğe benzer bir düzenleme yapmak ister misiniz?
Fotoğraf makinesi, telefon veya diğer cihazlarla çekilen fotoğrafların kalitesini arttırmak aslında sanıldığı kadar zor değil. Bu makalemizde 3 adımda fotoğraflarınızı nasıl daha ilgi çekici hale getirebileceğinizi anlatacağız.
İlk olarak fotoğraflarımızı Photoshop ile açıyoruz. Photoshop’a girdikten sonra File > Open (CTRL+O) alanına giderek bu işlemi yapabilirsiniz. Artık fotoğrafımızı düzenlemeye hazırız. Sırasıyla ilerleyelim.
Photoshop’un Crop aracıyla bu işlemi yapabiliyoruz. Bu araca toolbardan veya C kısayol tuşuyla erişebilirsiniz.
Crop aracını seçtikten sonra çalışmamızı saran bir çerçeve gözükecektir. Bu çerçeve ile oynayarak istemediğimiz kısımları çalışma dışında bırakıyoruz.
Crop işlemini tamamlayınca ister ENTER tuşuna basın, isterseniz de Photoshop’un üst kısmında bulunan ✔ işaretini tıklayın.
Photoshop’un Sharpen filtresi sayesinde fotoğraflarımızı netleştirebiliyoruz. Bu işlem için Filter > Sharpen menüsü altından size uygun filtreyi kullanabilirsiniz. Makalemizin devamında Unsharp Mask isimli filtreyi kullanacağız.
Amount değerini 100%’de tutup Radius ve Threshold üzerinde oynarak fotoğrafınıza uygun bir efekti verebilirsiniz. Veya 100-3-0 değerlerini kullanarak ortalama bir efekt uygulayabilirsiniz.
Photoshop fotoğrafınızın renk yoğunluğuna ve parlaklığına bakıp sizin için doğru filtreyi uygulayacaktır. Bu işlemi yapmak için sırasıyla aşağıdaki işlemleri yapıyoruz.
İlk olarak Image > Adjustment > Levels (CTRL+L) alanına gidelim. Açılan kısımdan Auto butonuna basalım.
Daha sonra Image > Adjustment > Curves (CTRL+M) alanına gidelim. Açılan kısımdan tekrar Auto butonuna basalım.
Sadece birkaç adım ile bu derece büyük bir kalite farkı elde ediyoruz. Sizler de kalitesini arttırdığınız fotoğrafları bu makale altında yayınlarsanız aramıza yeni katılanlara ilham vermiş olursunuz.
İyi çalışmalar.
Web sayfalarına eklenmiş videoların otomatik olarak oynaması, istenen dilde altyazı oluşturulması, istenen süreden başlaması ve bildirilerin otomatik olarak açılması gibi özelliklerin nasıl aktif edildiğini anlatacağız.
İlk olarak YouTube’un bizlere sunduğu 3 ayrı paylaşım tipini tanımlayarak başlayalım.
An itibariyle 3 ayrı tanımlama ile web sayfalarımıza YouTube videoları ekleyebiliyoruz. Bunlardan en popüleri yenilenmiş yazılımıyla <iframe> tipi olan New embed code. YouTube bu kategori altında HTML5 video oynatıcıyı da duyuruyor ve ilgilenenlere buradan katılma şansı sağlıyor. İkinci embed tipimiz de Old Embed Code diye tanımlanan, <object> tanımlamasıyla başlayan ve sadece Flash üzerinden çalıştırılabilen uygulama.
Soru-cevap şeklinde devam edelim.
Videoları sitemize eklemizi sağlayan embed kodunun sonuna, yani ID tanımlamasının hemen yanına ‘&autoplay=1′ yazarak bu işlemi yapabilirsiniz.
Örnek kullanım :
<object height="350" width="425">
<param name="movie" value="http://www.youtube.com/v/LUeT24saKNA&autoplay=1" />
<embed height="350" src="http://www.youtube.com/v/LUeT24saKNA&autoplay=1" type="application/x-shockwave-flash" width="425">
</embed>
</object>
‘#t=’ tanımlaması sayesinde web sayfamıza eklediğimiz videoları istediğimiz saniyeden başlatabiliyoruz.
Aşağıdaki örnekte videoyu 1 dakika 10 saniye ileri sarılmış olarak başlatıyoruz.
<iframe ="" frameborder="0" height="315" src="http://www.youtube.com/embed/LUeT24saKNA#t=1m10s" width="420"></iframe>
‘&cc_lang_pref=en&cc_load_policy=1′ tanımlaması ile web sayfanıza eklediğiniz videolara başlık ve altyazı desteği ekleyebilirsiniz. Tüm alt yazı ve dil desteklerini aşağıdaki bağlantıdan görebilirsiniz.
Codes for the Representation of Names of Languages
YouTube’un paylaşım seçenekleri geniş. Ayrıca her geçen gün video oynatıcı daha da özgünleştirilebiliyor.
Adobewordpress’in video derslerini takip etmek için YouTube kanalımızı takip etmeyi unutmayın : http://www.youtube.com/adobewordpress
Konuyla alakalı sorularınızı yorum alanına bekliyoruz.
Yumuşak ‘Yukarı Çık’ buttonunu ister eklentiyle isterseniz de manuel yöntemle kurabilirsiniz. Tercih sizin. Adobewordpress olarak iki yolu da detaylandıracağız.
Bildiğiniz gibi WordPress büyük bir eklenti arşivine sahip. Gittikçe büyüyen bu arşiv size herşeyin kısayolunu sunuyor. Eğer makalemizin devamında kod satırları size yabancıysa Smooth page scroll to top isimli eklentiyi kurarak bu işlemi yapabilirsiniz.
Fakat WordPress üzerine kafa patlatan bir çok takipçimiz eklentilerden ziyade manuel yolu tercih ediyor.
Eklenti tamamıyla ücretsiz.
WordPress’e eklentilerin nasıl kurulduğunu kısaca hatırlayalım.
Download Adresi : Smooth page scroll to top
Yapmamız gereken işlemler gayet basit. Birkaç satır JavaScript, HTML ve CSS kodu işlemi tamamlayacak.
Temanızın bulunduğu dizine gidin ve footer.php’yi açın. Dosyanın içerisindeki </body> tanımlamasından öncesine aşağıdaki tek satırlık kodu yapıştırın.
<a href="#top" id="yukari-cik" title="Yukarı çık"></a>
Şimdi de aynı dizindeki function.php’yi açıyoruz ve aşağıdaki PHP kodunu ekliyoruz. Böylece script sadece ihtiyaç dahilinde çalışıyor.
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/smoothscroll.js', array( 'jquery' ), '', true );
Şimdi aşağıdaki kodlardan yeni bir .js dosyası yaratıyoruz ve adını smoothscrool.js olarak tanımlıyoruz.
jQuery(document).ready(function($)
$(window).scroll(function()
if ($(this).scrollTop() < 200)
$('#yukari-cik') .fadeOut();
else
$('#yukari-cik') .fadeIn();
);
$('#yukari-cik').on('click', function()
$('html, body').animate(scrollTop:0, 'fast');
return false;
);
);
Bu dosyayı da ana dizinimize, yani function.php dosyasının olduğu dizine atalım.
Sıra geldi bu buttonun tasarımını oluşturmaya. CSS dosyamıza aşağıdaki kodları ekliyoruz.
#yukari-cik
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
z-index:9999;
display:none;
background: url("yukari.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
#yukari-cik:hover -webkit-transform: rotate(360deg) background: url('') no-repeat;}
Gördüğünüz gibi yukari.php isimli bir görsel kullandık.
Yumuşak geçişli ‘Yukarı çık’ buttonunun nasıl yapılacağına dair iki adet yöntem sunduk. Aslına bakarsanız yukarıdaki küçük kodlamaları yerlerine yerleştirmeniz eklentiyi kurmanızdan daha kısa sürede yapılabilir. Dolayısıyla hem performans açısından, hem de kurulum işlemi açısından sizlere ‘Manuel yolu’ öneriyoruz.
Bizden şimdilik bu kadar. Hoşçakalın.
WordPress sitenizdeki uzun makalelerinize, Wikipedia’da olduğu gibi Table of Content (içerik tablosu) eklemeyi hiç düşündünüz mü? Bu makalemizi okuduktan sonra emin olun düşüneceksiniz.
İçerik tablosu makalelerinizi daha düzenli ve akademik kılacaktır. Böylece ziyaretçileriniz istedikleri alana hızlıca erişebileceklerdir. Ayrıca içerik tablosu sayesinde sayfanızın SEO değerine de katkı sağlarsınız. Eğer doğru bir şekilde makalelerinizi bu yapıda hazırlarsanız Google otomatik olarak arama sonuç ekranınıza “Jump to” bağlantıları (bkz. kırmızı ile belirtilmiş alan) ekler.
Bu makalemizde, en ufak HTML ve CSS yazmadan içerik tablosunu nasıl yaratabileceğinizi anlatacağız.
Yapmanız gereken ilk işlem Table of Contents Plus eklentisini indirmek. Eklentiyi aktifleştirdikten sonra yapmamız gereken 1-2 işlem var. Wp-admin üzerinden Ayarlar > TOC+ alanına gidiyoruz.
En üstteki position kısmı bildiğiniz gibi içerik tablosu için pozisyon belirlememizi sağlıyor. Before first heading seçimi yapmanız, makale içerisindeki ilk Heading elemanı altında gösterim yapmanızı sağlayacaktır. Tavsiye ettiğimiz ayar da budur. Show when kısmı an itibariyle 4 olarak ayarlı. Yani makale altında 4′den fazla başlık varsa içerik tablosu gözükecek. Auto insert the following content types kısmı ise hangi sayfalarda içerik tablosunun gözükmesini istediğinizi belirttiğiniz alan. Sonrasında Heading text alanı ile bu kısma bir isim veriyoruz. Hemen altındaki Show text ve Hide text alanlarına ise hide show yerine Türkçe karşılıkları olan gizle ve göster sözcüklerini yazıyoruz.
Bu eklenti ayrıca 5 renk seçeneği sunuyor. Ek olarak Custom alanından kendi tasarımımızı da oluşturabiliyoruz.
Eklenti makale içerisindeki <h1>, <h2>, <h3>, <h4> ve türevi başlık elemanlarını tarar ve yeterli bulduğunda otomatik olarak içerik tablosu oluşturur. Az önce bahsettiğimiz gibi ayarlar kısmından “En az kaç başlık varsa TOC çalışsın” seçimini yapabiliyoruz.
Ayrıca eklenti kendi içerisinde shortcode desteği de sunuyor. Örneğin aşağıdaki shortcode tanımlamasını makale içerisinde kullanmanız, o makalede içerik tablosu oluşmamasını sağlıyor.
Size tavsiyemiz ise Ayarlar penceresinden Auto insert for the following content types alanında bulunan tüm seçimleri iptal etmeniz, sonrasında ise içerik tablosu oluşturmak istediğiniz makalelere aşağıdaki shortcode tanımlamasını eklemeniz.
Böylece eklentiyi manuel olarak kullanmış oluyoruz.
Ayrıca eklentinin Widget desteği de sunduğunu hatırlatmak isteriz. Böylece daha kolay bir kullanım imkanı sunuyor.
Bu eklenti hem yazılarınızın okunabilirliğini hem de SEO değerini arttırıyor. Hal böyleyken bir şans verin deriz.
Bizden şimdilik bu kadar. Bir sonraki WordPress eklentileri konulu makalemizde görüşmek üzere, hoşçakalın.
After Effects derslerimizin ikincisiyle sizlerleyiz. Bu videomuzun konusu ‘timeline’. Paneli tanıdıktan sonra ilk opacity aracı ile bir örnek hazırlıyoruz. Sonrasında ise daha detaylı bir çalışma yapıp render alıyoruz.
Video derslerimizi takip etmek için YouTube kanalımıza abone olabilirsiniz.
2013 yılında gelen radikal güncellemeler sadece WordPress’in altyapısını değil, arayüzünü de büyük oranda değiştirdi.
Bildiğiniz gibi yönetici panelinde (wp-admin) bulunan Kullanıcılar > Profiliniz alanında artık daha fazla arayüz renklendirme seçeneği mevcut. Fakat çeşitliliği arttırmak istediğimizde WordPress kendi renklendirmemizi yapmamıza izin vermiyor. Özellikle her yazarına farklı arayüz sunmak isteyen WordPress kullanıcıları bu isteklerini resmi forumlarda dillendirmekte. Çözüm mü? Gayet basit.
Bu makalemizde sizlere Wp-admin’i nasıl özgün bir şekilde renklendirebileceğinizi anlatacağız.
WordPress’in sistem dosyaları içerisinde varsayılan renk tanımlamalarını değiştirerek bu işlemi yapabilirsiniz. Fakat bu hem zor hem de vakit isteyen bir işlem. Dolayısıyla sizlere daha kısa bir yol sunacağız.
İlk olarak Admin Color Schemer isimli eklentiyi indiriyoruz. Bu eklenti yönetici panelinde istediğimiz renk tanımlamalarını yapmanıza izin veriyor.
Bu tip eklentiler yüklerken endişlenmeyin. Sadece wp-admin üzerinde çalışan bu tip minik eklentiler sitenizin açılış performasını kesinlikle negatif yönde etkilemez.
Eklentiyi kurduktan sonra Wp-admin’e giriyoruz ve soldaki menüden Araçlar > Admin Colors alanına gidiyoruz.
Bu kadar basit.
Makaleyi birkaç renk önerisi ile bitiriyoruz. Hoşçakalın.
Türkiye’de her geçen gün daha da popülerleşen “İnternet üzerinden para kazanmak” kavramı bizleri AdSense üzerine yoğunlaşmaya itiyor. Bu makalemizde yine AdSense’in geniş dünyasının bir ucundan tutacağız. Cevabını arayacağımızın sorulara şöyle bir bakalım.
TBM, AdSense’in bize sunduğu yayımcılık hizmetinde, web sayfamızdaki reklamlara her tıklandığında kazandığımız paradır. Temelinde Google’ın dev reklam hizmeti AdWords tarafından güncellenmekte, reklamverenlerin rakamları TBM değerimize yön vermektedir.
Tıklama Başına Maliyet değerinin yukarı veya aşağı oynamasının yüzlerce sebebi vardır. Sitenizin kategorisi, AdWords’ün saatlik değişen reklam bütçe hizmeti, içeriğiniz, yaşadığınız ülke, trafiğiniz, tasarımınız, bu liste sonsuza kadar uzatılabilir.
Google, “Bazı reklamverenler, reklamını yaptıkları ürün veya hizmetin ne olduğuna bağlı olarak, tıklama başına diğerlerinden daha fazla ödeme yapmak isteyebilirler.” tanımlamasıyla yelpazenin geniş olduğunu belirtiyor.
‘Niç’ diye okunan, oyuk veya gedik anlamını çıkarabileceğimiz Niche kelimesi artık önem kazanıyor. ‘Taşı gediğine koymak’ olarak tanımlayabileceğimiz bu kelime TBM değerini arttırmamızda altın değerinde.
Niche, onlarca içerik kategorisine sahip içeriklere değil de belirli bir içeriği yoğunlaşan, çerçevesi biraz dar sitelere verilen isimdir. Yani rekabeti az, geliri yüksek olandır. Örneklerle devam edelim.
Çemberlitaş civarında nargile ve pipo için tütün üreten esnaf satışlarını arttırmak için AdWords’e reklam veriyor diyelim. Daha önce oluşturduğunuz bir web sayfasında ‘Çemberlitaş’ın ne iyi nargilecilerini ve tütün üreticilerinizi’ yazdınız varsayalım. İşte bu AdWords reklamının direk hedefi sizin siteniz olacaktır.
Unutmayın Google’ın aramalarının büyük bir kısmı ikiden fazla kelime içermektedir. Kimse ‘nargile tütünü’ diye arama yapmaz, yapılacak arama ‘çemberlitaş nargile ürünü’ şeklinde olacaktır. Böylece hem AdWords’e reklam veren esnaf, hem de onun reklamını başarıyla yayınlayan siz kazanacaksınız. Ayrıca Niche olduğunuz için TBM değeriniz yükselecektir.
Peki doğru kelimeyi nasıl seçeceğiz? Daha önce üzerine konuştuğumuz aşağıdaki makaleyi incelemenizi öneririz.
Makale : Google’ın Ücretsiz SEO Araçları
Bu makalede yer verdiğimiz Google AdWords Anahtar Kelime Planlayıcı doğru kelimeyi seçmenizde size yardımcı olacaktır.
Rekabeti düşük bir kelime seçin. Sonrasında bu kelime için .com uzantılı domainleri kontrol edin. Eğer popüler olmayan bir Niche ve uygun domain bulursanız projenizi geliştirmeye başlayabilirsiniz. Fakat unutmayın, bu çok sık vereceğiniz bir karar değil. O yüzden emin olmadan boşa kürek çekmeyin.
İçeriği hazırlayacağınız dil ise ne yazık ki önemli. Türkçe’den ziyade İngilizce daha yüksek TBM sunuyor. Eğer İngilizceniz yetersizse bu moralinizi bozmasın. Türkçe bir içerik ile de yüksek gelirlere ulaşabilirsiniz. Sadece biraz sabırlı ve inatçı olmanız gerekmekte.
Burada küçük bir hatırlatma yapalım. İçeriği konusunda bilgi sahibi olmadığınız, sağdan soldan topladığınız bilgilerle oluşturduğunuz web sayfaları genellikle sizi sonuca ulaştırmayacaktır. Unutmayın, uzun soluklu bir proje geliştirmek istiyorsanız içerik eklerken keyif almanız gerekiyor.
Artık yavaş yavaş makalenin en ilgi çekici alanlarına geliyoruz. Adobewordpress olarak gelir arttırımı ile ilgili anahtarları paylaşacağız fakat ilk başta beklentileri biraz düşürelim : “Çabalamadan ve istemeden başarı gelmeyecektir.”
AdSense gelirinizi arttırmanızın için doğru içeriği, yüksek sayıda ziyaretçiye sunmanız gerekmekte. Yani kısaca anahtar kelimelerimiz şunlar : içerik, ziyaretçi sayısı.
Tıklama Başına Maliyet değerini yükseltmek için Niche’in ne derece önemli olduğunu konuştuk. Fakat başarıya giden başka yollarda var. Makalemizin devamında TBM’yi yükseltmek için neler yapmanız gerektiğini, neler yapmamanız gerektiğini anlatacağız.
AdSense’in popüler terimlerini artık tanıdık. Ne işe yaradıklarını da öğrendik. Şimdi sıra kazancımızı arttırmakta. Aşağıdaki maddeler TBM arttırımı konusunda size yardımcı olacaklar.
AdSense ile gelir artışını sağlayan önemli faktörleri tüm detaylarıyla listeledik. Beraberinde süreci etkileyen teknik terimleri de tanıdık. Fakat AdSense ile ilgili yayınladığımız tüm makalelerin temeli aynı şeyi gösteriyor : “Ne kadar ekmek o kadar köfte…”
Web sayfaları için büyük emekler harcayan herkese bol kazançlar dileriz.
Web sayfasını insan olarak düşünürsek CSS‘de bu insanın kıyafetidir.
Bu kıyafeti seçerken ne kadar özeniyorsak CSS ile kodlama yaparken de bu şekilde özen göstermeliyiz.
İleri ki zamanlarda site tasarımınızda yapacağınız değişiklikler de zorlanmamak ve işlerinizi düzenli bir şekilde yürütebilmeniz için aşağıda yazılanları uygulamaya koymanızı öneririm.
1 – CSS döküman şablonu oluşturma
CSS dosyanızın en üst kısmında oluşturacağınız bir şablon ile ulaşmak istediğiniz satırlara çok daha kısa sürede ulaşabilir CSS dosyanız içindeki düzeni sağlayabilirsiniz.
Örnek
/*————
[CSS Döküman Şablonu]
1. Body
2. Header #header
2.1. Navigation / #navigation
3. Content / #content
3.1. Post / #post
3.2. Sidebar / #sidebar
4. Footer / #footer
————–* gibi
2 – CSS Reset
Düzenli CSS yazmanın ilk koşulu güzel bir Reset koduyla başlamaktan geçer.
Bunun için tek tek yazmakla uğraşmanıza gerek yoktur, bu konuyla ilgili ulaşabileceğiniz sınırsız kaynak internet ortamında mevcuttur.Ben sizlere Google ‘a CSS reset yazdığımda ilk çıkan linklerden derlediğim
bir kaynak listesi sunacağım, seçim sizlerin.
Eric Meyer’s “Reset CSS” 2.0
HTML5 Doctor CSS Reset
Yahoo! (YUI 3) Reset CSS
Universal Selector ‘*’ Reset
Normalize.css 1.0
3 – Açıklama başlıkları kullanın
Geriye yönelik değişiklikler yaparken en çok zorlandığım sorunlardan biriydi aradığım div ‘e ait özelliklerin bulunduğu CSS satırını bulmak. Önceden karışık ve düzensiz çalıştığım için aradığım satırı bulurken az cebelleşmiyordum kodlar arasında şimdi ise açıklayıcı başlıklar ile bu sorunu çözmüş bulunuyorum. Sizlerde bu yolu denerseniz hem kod aramaktan gözleriniz ağrımaz hemde zamandan tasarruf etmiş olursunuz.
Örnek verecek olursak;
/***** Wrapper Div CSS Kodları *****/
#wrapper{
clear: left;
float: left;
padding-top: 20px;
}
/***** Container Div CSS Kodları *****/
#container{
float: left;
margin-right: 13px;
width: 647px;
}
/***** Post Div CSS Kodları *****/
#post{
clear: left;
float: left;
margin-top: 20px;
}
/***** Sidebar Div CSS Kodları *****/
#sidebar{
float: left;
margin: 0;
width: 300px;
padding:10px;
background:#ffffff;
font-family: verdana, sans-serif;
font-size: 12px;
}
Bu şekilde kod karmaşasının önüne geçmiş olabilirsiniz.
4 – Alfabetik kodlama sırası
Yukarıdaki örnek üzerine bir kaç ufak ekleme yaparak sizlere alfabetik sıralama hakkında kısa yoldan bilgi vermek istiyorum.
#sidebar{
float: left;
margin: 0;
width: 300px;
padding:10px;
background:#ffffff;
font-family: verdana, sans-serif;
font-size: 12px;
}
#sidebar{
background:#ffffff;
float: left;
font-family: verdana, sans-serif;
font-size: 12px;
margin: 0;
padding:10px;
width: 300px;
}
Şimdi sizlere soruyorum, yukarıdaki örnek fazla kafa karıştırmayabilir fakat uzun yazılmış CSS kodlarında aradığınız satırı bulmak hangisinde daha kolay olacaktır. Seçim sizin
5 – Tek satırda kod yazma alışkanlığı ile kod satırlarını azaltmak
Bu kısım CSS dosyanızın görsel olarak daha sade ve basit görünmesinin ince ipuçlarından birini içermekte. Demek istediğime gelecek olursak bazı div ‘lerin CSS kodları çok sayıda özellik barındırabilir. Bu durumlarda tek satırda tüm kodları birleştirmek ileri de dönüp göz atarken kafa karıştırabilir fakat
3 veya 4 satır özellik içeren divler için bu kolaylığı göz ardı etmemelisiniz.
Örnek:
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 15px;
üstteki gibi alt alta özellikleri tanımlamaktansa aşağıdaki gibi tek satırda bu işi çözebiliriz.
font: bold 11px/15px verdana, sans-serif;
Yukarıda anlattıklarımla göze hoş gelen ,düzenli CSS dosyaları oluşturmak mümkün.
Bu anlattıklarım tasarımcıların dikkat etmesi gereken konuların başında gelmelidir.
Kaynaklar :
Bir diğer ücretsiz WordPress tema arşivimiz ile birlikteyiz.
Bu makalemizin filtresi ise Kişisel (Personal) WordPress temaları olacak. Fakat bu sizi yanıltmasın. Aşağıda listelediğimiz temalar her türden içeriği taşıyabilecek kalitede. Özellikle portfolio olarak size mükemmel bir sunum imkanı sağlayacaklardır.
Hatırlatma : Temaların hepsi ücretsiz fakat aralarından bazılarını indirmeniz için sizden birkaç şey yapmanızı isteyebiliyor. Facebook sayfalarını beğenmek veya Twitter hesaplarını takip etmek gibi…
Listede 14 tane tema bulunuyor.
Kişisel kullanım için listedeki en iyi temalardan birisi. Mükemmel header tasarımının yanı sıra hem görsel hem de metinsel sunum yapmanızı sağlıyor.
Test Et İndir
Dev görsellerin balon halindeki başlık ve açıklama ile süslendiği etkileyici bir tasarım. Göstereceğiniz şeylerin sayısı anlatacaklarınızdan fazlaysa Adament’e bir şans verin.
Test Et İndir
En üstte navigasyon menü, altında ise görsel sunum içeren bu tema alt kısımlarına doğru geniş metin alanları barındırıyor. Göz yormayan tasarımı doğru renk seçimleriyle ziyaretçilerinizi mest edecektir.
Test Et İndir
Bootstrap 3 Framework’ü üzerine kurulu Wembley ızgara tipi tasarımıyla göz dolduruyor.
Test Et İndir
Düzenlenebilir ayarlarıyla Vangard göz kamaştırıyor. Listedeki diğer temalar gibi Vangard da premium temalardan farksız.
Test Et İndir
Geniş bir ızgara mantığıyla tasarlanmış Nautilus size responsive ve büyük bir oyun sahası sunuyor.
Test Et İndir
Marjinal slider tasarımıyla bizi şaşırtan Mordor teması alt kısmında barındırdığı sidebar ve content alanıyla her türden içeriği sunabilmekte. Responsive olan bu temaya bir göz atın deriz.
Test Et İndir
Tumblr stilini hatırlatan tasarımıyla Binary gayet ilgi çekici bir tema. Kişisel sitenizde veya portfolio sunumlarınızda kullanabilirsiniz.
Test Et İndir
Yasmin, görselle beslenmiş ve dikkat çekici renklerde tasarlanmış bir diğer responsive WordPress teması.
Test Et İndir
Listenin en dikkat çeken temalarından birisi Anew olacaktır. Mükemmel bir tasarıma sahip temanın ücretsiz olması bizi şaşırttığı gibi sizi de şaşırtacaktır.
Test Et İndir
Çift kolondan oluşan bu blog teması dar bir tasarıma sahip. Ayrıca esnek header alanı dikkat çekici.
Test Et İndir
My Notes listenin en basit arayüzüne sahip tema olabilir, fakat en kötüsü olmadığı kesin. Bu küçük tema günlük gibi kişisel kullanımlar için responsive bir taslak sunuyor.
Test Et İndir
Görsel ağırlıklı mükemmel bir WordPress teması. Responsive olan bu tema da ücretsiz olmayı pek hak etmiyor.
Test Et İndir
My Notes gibi basit bir arayüze sahip responsive WordPress teması. My Notes’a kıyasla daha renkli ve şık diyebiliriz.
Test Et İndir
Şimdilik bu kadar. Bir sonraki tema arşivimizde görüşmek üzere.
