Evet arkadaşlar. Bir süredir paylaşım yapıyorum. Fakat sanırım en beğenerek yazdığım bu makale oldu. Bu yüzden makaledeki yazıyı direk copy+paste yapmıyorum, buraya daha samimi olarak yazıyorum :) En azından örneği bir kere görüntülemenizi şiddetle tavsiye ediyorum.

Bu image hover efekti

tagını kullanır. 'dan sonra gelen ilk p olduğu için bir nevi title ve alt işlevi görür ve arama motorları için kayıt edilir. Yani SEO dostudur. Href ise klasik bağlantı şeklindedir, a block ve java onclick gibi saçmalıklar yok. Böylece JS yok, bu hem daha hızlı hem de herkes tarafından görüntülenebilir demek. Tasarımsal olarak ise çok başarılı olduğunu düşünüyorum.

Nasıl hazırlanır?

CSS Kodları :

.adobewordpress{
border-radius:15px;
width:300px; height:188px; /* Resmin Boyutları*/
background-color:#bb5046;
color:#FFF;
-moz-box-shadow:inset 0 0 80px #822820; /* Gölge */
-webkit-box-shadow: inset 0 0 80px #822820;
box-shadow: inset 0 0 80px #822820;
}

.adobewordpress img{
position:absolute;
z-index:1;
-moz-transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
border-radius:15px;
}

.adobewordpress img:hover{opacity:0;}

.adobewordpress p{
padding:10px;
text-align:center;
font:14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#fcd1cd;
text-shadow: #822820 2px 1px;
}

.adobewordpress h1{
padding-top:15px;
font:20px Georgia, 'Times New Roman';
color:white;
letter-spacing: -1px;
text-align:center;
text-shadow: #822820 2px 1px;
}

HTML Kodları



Üstteki kodlar kısaltılabilir. CSS bilginiz varsa farklı varyasyonlar elde edebilirsiniz. CSS bilginiz yoksa üzülmeyin, sitemizin CSS kategorisi altında onlarca özgün ve Türkçe makale bulunmakta.

Not : Konuyu CSS veya HTML kategorisine sürüklemezseniz sevinirim. Çünkü konu tam olarak CSS~SEO~HTML~Web Tasarımı :)

Eğer ben bunu beğendim ve sitemde kullanacağım diyorsanız kaynağa göz atın. Sorularınızı ise kaynaktaki linkin yorum alanından veya buradan bana yöneltebilirsiniz. Özel mesaj atmazsanız sevinirim.

Kaynak : http://www.adobewordpress.com/css-ile-seo-ve-performans-dostu-harika-resim-aciklamalari/

Birisi bunu wp entegreli şeklinde temalaramıza nasıl uygulayabileceğimizi anlatsa harika olur bence.
ayrıca paylaşım için teşekkürler.

Bu tür bir şey arayan için çok güzel bir çalışma.Emeğine sağlık.

Bu tür bir manşet çalışmanız oldu mu veya tavsiyeniz var mı?

Harikaymış wp entegre edilrse dedikleri gibi çok güzel olur normal yazılar içinde kullanılabilir.Öne çıkarılmış görsel üzerine yazının bir kısmı bence çok güzel durur teşekkürler. (:

WordPress yapımcıları ile aram pek iyi olmadığı için WP'nin resmi sitesinde eklenti yayınlayamıyorum. Bu yüzden eklenti yazmak içimden gelmiyor. Ama makalelerimi yayınladığım sitede wp üzerinden eklenti yayınlayan başka arkadaşlar da var. Onlar el atarsa size link veririm.