Şimdilik ilk onluyu sizlerle paylaşıyorum. Dikkat edin bunlar sadece sosyal medya için olanlar! Site tasarımında kullanılacak diğer ikonlar için ayrıca bir paket hazırlamayı düşünüyorum.

1- Free Vector Social Bookmark Icons

2- Extreme Grunge Social Media Garmant Icons

3- Transparent Glass Social Bookmarking Icons

4- Nurture Social Icon Set

5a- Free 3D Social Media Icon set #1

5b- Free 3D Social Media Icon set #2

6- 3d Glossy Blue Orbs Social Media Icons

7- Freebie! 30+ New Social Media Icons

8- Sleek! Free Tab Style Social Icons

9- Splatter Social Media Icons

10- Starry Site! NEW 16 Social Media Icons + PSD!

Sözü daha fazla uzatmadan karşılaştığım ve beğenmiş olduğum tooltiplere geçelim.

1. Dynamic tooltip

2. Coda Popup Bubble

3. TipTip

4. jQuery Ajax Tooltip

5. Awesomeness

6. (mb)Tooltip

7. jGrowl

8. tipsy

9. Easiest jQuery Tooltip Ever

10. Create a Simple CSS + Javascript Tooltip with jQuery

Hemen anlatmaya başlayayım! Öncelikle Google Arama Motoru’nun işleyişi şöyle oluyor; kullanmış olduğum javascript kodları ile blogda yapılan google aramasında sayfa yeniden yüklenmeden, mevcut sonuçlar hemen aynı sayfada gösteriliyor. Bu sayede daha aktif bir sayfa yapısına kavuşulmuş olunuyor ve sonuçlara tıklandığında ilgili konuya hemen gidilebiliyor. Şimdi gelelim bu güzel çalışmanın temaya uygulanmasına;

<div id='cse' style='width:100%;'>Yükleniyor...</div>
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1');
google.setOnLoadCallback(function(){
var cse = new google.search.CustomSearchControl();
cse.enableAds('pub-XXXXXXXXXXXXXXX');
cse.draw('cse');
cse.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
}, true);
</script>

Yukarıda XXXXXXXXXXXXXXX olarak görmüş olduğunuz yere google hesabınızın numarasını yapıştırmanız ile kazançlarınız sizin hesabınıza aktarılacaktır.

Gelelim şimdi Twitter için oluşturacağınız bölüme bunu için de aşağıdaki kodları temanız da twitter güncellemeleriniz görüntülemek istediğiniz yere yapıştırın.

<style type='text/css'>

#twitter_update_list li {
padding-bottom:6px;
border-bottom:solid 1px #DEDEDE;
margin-bottom:6px;
}

.twitter-follow{
background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SgxdH2E0JsI/AAAAAAAAEDE/HTXaxE7_KaU/twitter.png) right  no-repeat;
font-size:11px;
float:right;
margin-top:7px;
margin-right:4px;
padding-right:20px;
height:16px;
font-weight:bold;
}

</style>

<h2><span class='twitter-follow'><a href='http://www.twitter.com/sanalduvar'>Twitter Takip! </a></span>Tweetlerim</h2>
<div id='twitter_div'>
<ul id='twitter_update_list'>Tweetler Yükleniyor...</ul>
</div> 

<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'></script>
<script src='http://twitter.com/statuses/user_timeline/sanalduvar.json?callback=twitterCallback2&count=5' type='text/javascript'></script> 

Yukarıda görmüş olduğunuz http://www.twitter.com/sanalduvar adresini kendi twitter adresiniz ile değiştirin. <style> ve </style> bölümleri arasından bu bölüm için görsel değişikliği yapabilirsiniz.

Kodlama konusunda fazla bilgi olmayan arkadaşlar dahi bunları yapması sonucu sayfalarında bahsettiğim bu uygulamaları kullanabilirler. Teşekkürler!..

Aşağıdaki resimler kendi incelememden görüntüler.

Google’ı ürünlerini pazarlama konusunda çok başarılı buluyorum. İnsanlar üzerinde bıraktığı etkilerle özellikle webin nabzını tutan blog yazarlarına konu olarak kendi reklamını çok basit ve etkin bir şekilde yapıyor. Google’ın pazarlama bölümünde çalışan beyin grubunu tebrik ediyorum ve sizi Google Chrome Tema Galeri’ye davet ediyorum.

CSS Dock Menu

Fish Eye Menu Tutorial

Fish Eye Menu for Prototypejs

Fish Eye Menu for Mootools

Bir çok ziyaretçide içeriği alıp gitme derdinde olunca reklamlar dikkat bile çekemeye biliyor. Bu sebeple bazen büyük partal haber sitelerinde dahi zaman zaman görebileceğimiz sayfanın ortasında bulunan reklamlar hatta sayfayı aşağı kaydırdığınızda doğrusal olarak aşağı doğru kayan, sizin o reklamı görmemenizi imkansız kılan çalışmalar ortaya konabiliyor. İşte benimde şimdi burada bahsedeceğim örnek bunlardan ya da bunlara benzeyen türden bir çalışma.

Örneğimiz sayfanın aşağı kaydırılması ile doğru olarak hareket etmesinin yanında başlıkta da belirttiğim gibi HTML ile sayfanıza yerleştirirken belirleyeceğiniz süreye göre de görüntülenme süresini değiştirebiliyorsunuz.

Sayfaya yerleştirmesi de oldukça kolay olan kodlar aşağıdaki gibidir. Kendi tasarımınıza uyarlamak ya da zamanı ayarlamak için yapmanız gereken değişiklikler kodların yanında açıklanmıştır.

Örnek Görünüm

Kodlama

<!-- Zamanla Kapanan Reklam Bölümü Başlangıcı -->
<style type="text/css">
<!--
#reklamdiv {position:absolute; height:0; width:0px; top:0; left:0;}/* reklamınızın konumunu belirlemek için burayı kullanın (burası için CSS dilini kullanaksınız!) */
-->
</style>
<script type="text/javascript">
/******************************************
* DHTML Reklam (Zamanla Kapanan Reklam Bölümü)
* Düzenleyen: Veysel SEMİZ
* http://www.sanalduvar.com
******************************************/
gosterizamani=5;  // reklamın gösterileceği süre (sn.)
defagoster=1; // reklamın X zamanda kaç defa gösterileceği (her sayfa yenilenmesinde olsun istiyorsanız 1 kullanın)
var ns=(document.layers);
var ie=(document.all);
var w3=(document.getElementById &amp;amp;&amp;amp; !ie);
var calunit=ns? "" : "px"
reklamsay=0;
function initRek(){
if(!ns &amp;amp;&amp;amp; !ie &amp;amp;&amp;amp; !w3) return;
if(ie)		rekdiv=eval('document.all.reklamdiv.style');
else if(ns)	rekdiv=eval('document.layers["reklamdiv"]');
else if(w3)	rekdiv=eval('document.getElementById("reklamdiv").style');
randRek=Math.ceil(Math.random()*defagoster);
if (ie||w3)
rekdiv.visibility="visible";
else rekdiv.visibility ="show";
if(randRek==1) gosterreklami();}
function gosterreklami(){
if(reklamsay<gosterizamani*10){reklamsay+=1;
if (ie){documentWidth  =truebody().offsetWidth/2+truebody().scrollLeft-20;
documentHeight =truebody().offsetHeight/2+truebody().scrollTop-20;}
else if (ns){documentWidth=window.innerWidth/2+window.pageXOffset-20;
documentHeight=window.innerHeight/2+window.pageYOffset-20;}
else if (w3){documentWidth=self.innerWidth/2+window.pageXOffset-20;
documentHeight=self.innerHeight/2+window.pageYOffset-20;}
rekdiv.left=documentWidth-300+calunit;rekdiv.top =documentHeight-200+calunit;
setTimeout("gosterreklami()",100);}else kapaRek();}
function kapaRek(){
if (ie||w3)
rekdiv.display="none";
else rekdiv.visibility ="hide";}
function truebody(){
return (document.compatMode &amp;amp;&amp;amp; document.compatMode!="BackCompat")? document.documentElement : document.body}
onload=initRek;
</script>
<div id="reklamdiv" style="visibility:hidden">
<!--*****Reklam Kodunuzu veya Görüntülemek İstediğiniz Yazıyı Buraya Yazınız (Başlangıç)*****-->

Buraya reklam kodunuzu yerleştirin!

<!--*****Reklam Kodunuzu veya Görüntülemek İstediğiniz Yazıyı Buraya Yazınız (Bitiş)*****-->
</div>
<!-- Zamanla Kapanan Reklam Bölümü Bitiş -->

Not: Tasarıma yönelik ihtiyaçlarınız hakkında bilgi edinmek için bana iletişim bölümünden ulaşabilirsiniz. Sizden tek istediğim bana örnek bir çalışma göstermeniz. Böylelikle ihtiyacınızı daha kolay anlayabilir, size daha etkili yardımı göstermeye çalışabilirim.

Mevcut çalışmanın kodları aşağıdaki gibidir.

Yapı Kuruluşu – XHTML

Üç sutunlu listeleme basit olacaktır.

  <ul class="thumb">
	  <li> <a href="#"> src="thumb1.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb2.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb3.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb4.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb5.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb6.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb7.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb8.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb9.jpg" alt="" /> </ a> </ p>
  </ ul>

Şekillendirme – CSS

Listedeki resimlerin görünümü ve durumlarının nasıl olacağının belirlenmesi.

 ul.thumb (
	  float: left;
	  List-style: none;
	  margin: 0; padding: 10px;
	  width: 360px;
  )
  ul.thumb p (
	  margin: 0; padding: 5px;
	  float: left;
	  konum: göreli; / * Set mutlak konumlandırma taban * koordine /
	  width: 110px;
	  height: 110px;
  )
  ul.thumb Li img ismiyle bir dizin (
	  width: 100px; height: 100px; / * * küçük küçük boyutları ayarla /
	  -ms-interpolasyon mod: bicubic; / * Fix IE Bicubic Ölçekleme * için /
	  border: 1px solid # DDD;
	  padding: 5px;
	  background: # f0f0f0;
	  konum: mutlak;
	  left: 0; top: 0;
  )
  ul.thumb Li img.hover (
	  background: (thumb_bg.png) no-repeat merkezi merkezi / * Görüntü duraksamak etkisi üzerinde artalan olarak kullanılacak URL
	  border: none; / * alın sınırın üstünde uçmak üzerine * kurtulmak /
  )

Hayat Vermek – JQuery

Sıra geldi yapılan çalışmaya canlılık katmaya.

$ ( "ul.thumb Li"). sallanmak (function () (
	  bu görüntü kalır $ (this). CSS (( 'z-kütüğü':'10 ')); / yüksek bir z-endeks değeri Ekle * * Yukarı /
	  $ (this)) ( 'img ismiyle bir dizin' bulmak.. addClass ( "sallanmak"). stop (), daha sonra "sallanmak" nin sınıf Ekle * durdurmak animasyon kuyruk buildup * /
		  . canlandırabiliriz ((
			  110px ', / * marginTop:' Bir sonraki 4 hat dikey * Bu görüntü hizalamak olacak /
			  marginLeft: '-110px',
			  top:'50% ',
			  Sol:%'50 ',
			  genişlik:'174px ', / * Set yeni genişliği * /
			  height:'174px ', / * Set yeni yükseklik * /
			  padding:'20px '
		  200 of "), 200); / * Bu değeri" ne kadar hızlı ve hızla bu duraksamak yavaş * animates / 

	  ), Function () (
	  $ (this). CSS (( 'z-kütüğü':'0 ')); / * Z-INDEX geri 0 * Set /
	  $ (this)) ( 'img ismiyle bir dizin' bulmak.. removeClass ( "sallanmak"). durdurmak () / * çıkarın "sallanmak" sınıf, daha sonra animasyon kuyruk buildup * durdurmak /
		  . canlandırabiliriz ((
			  marginTop:'0 ', / * Set hizalamayı geri * varsayılan /
			  marginLeft:'0 ',
			  top:'0 ',
			  left:'0 ',
			  genişlik:'100px ', / * Set genişliği geri * varsayılan /
			  height:'100px ', / * Set yüksekliği geri * varsayılan /
			  padding:'5 piksel '
		  ), 400);
  ));

Çalışmanın demosunu görmek için burayı tıklayın.

Kaynak bilginin orjinaline buradan ulaşabilirisiniz. Bu çalışmayı bizimle paylaştığı için Soh Tanaka’ya teşekkür ederiz. Thanks for this work, Soh.

İşte bu sebeple web sitelerinde de sadece yazı ile insanların beyinlerinde kalıcığı sağlamak yeterli olmadığını düşünüyorum. Dolayısıyla gerek eğlenceli bir görünüm kazandırmak gerek ziyaretçinin dikkatini çekmek için simgelerden faydalanılmadır.

Yazılarınızı bir simge ile paketleyin!

Öncelike bahsedeceğiniz yazıyı temsil edecek bir simge oluşrun. Bu simgeyi gören okuyucu yazının neden bahsettiğini az çok anlayabilmeli. Bu sayede yazıyı okumadan önce o kunu ile beyninde bir canlandırma gerçekleştirecektir.

Örnek bir site: digitalartifex.com

Simge ile göz boyayın!

İnsanları kandırmayın fakat onları etkilemek için nelerin olabileceği konusunu ön plana getirecek simgeler koyun. Mesela istatistik konusnda onlara artık sağlayacak bir yazıdan bahsederken onların önüne grafiksel simgeleri koyabilirsiniz. Onlara istatistiki ya da parasal konuda kazanç sağlayacaklarını belirtin. Bu sayede yazıyı okumalarını sağlayın.

Örnek bir site: inveon.com.tr

Bazen ön planda simgeler olsun!

Saydaki yazıların çokluğu vurgulamak istenen konuyu arkada plana atabilir. Sade bir sayfada büyük simgeler hemen göze batar ve okuyucuyu yönlendirirler. Bu sayede ziyaretçi sayfada başka şeylerle ilgilenmeden koyuna girer. Unutmayın bazen okuyucunun gözüne sokmak gerekebilir.

Örnek bir site: ripple.org

Zamanın yetersiz oluşundan dolayı sizlere Türkçe olarak anlatımını yapamayacağım. Demosunu burada görebileceğiniz sistem sade ve şık olacak bir şekilde tasarlanmış.

Ücretsiz olarak herkesin kullanımına sunulmuş bu sistemi kullanabilmek için IE6, IE7 , Firefox, Safari, Opera ve Chrome tarayıcıları gerekli.

Gerekli dosyaları ve sitenize yerleştiriken yapmanız gerekenleri buradan bulabilirsiniz.

Bu sistemin kullanıldığı birde WordPress Teması mevcut. Henüz Türkçe değil fakat muhtemelen kısa bir süre sonra SanalDuvar Türkçe Tema Galeride yerini almış olacak. Nigth Transition temasının İngilizcesini buradan indirebilirsiniz.

Tıpkı şuan kullanmakta olduğum temanın(sanalduvar-blue) ana sayfasında bulunan kategorilere göre son yazılarınızı görüntülemebiliyorsunuz. Hazırlanması ve kullanılmasını oldukça basit kılıyor. Bu sayede blog sahibinin kodlarla boğuşup bir kategorisel RSS menüsü(bu benim tanımım ) hazırmak için çaba sarf etmesine gerek kalmıyor.

Kullanıcı hazırlanma aşamasında sunulmuş olan seçenekleri tıklayarak şık bir araç oluşturup bunu eçiştli amaçlarla kullanabiliyor. Mesela bunu ilk gördüğümde aklıma yeni bir reklam aracı olarak göründü. Düşünsenize reklam vermek istediğiniz bir blog var ve vermiş olduğunuz reklamda son yazılarınızı kategorisel olarak görüntüleme imkanı buluyordunuz. Üstelik bunun kodlamaya ihityaç duymuyorsunuz. Aynı şekilde beğendiğniz ya da desteklemek istediğniz blogların RSS’lerini kendi blogunuzda okuyucularına sunabilirsiniz.