Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj28.07.2008, 17:05 (UTC)    
Mesaj konusu: text link e şekil verin

Öncelikle bu yazıyı okumak istiyorsanız bir miktar boş zamanınız olmalı Very Happy
*Ayrıca sitenizdeki mevcut css kodları yüzünden kodlar sitenizde bozulmaya uğrayabilir.
aşağıda anlatacaklarım hem tasarım ve şıklık hem de site optimizasyonunuz açısından önemlidir.her zaman text link vermek faydalıdır."ama text link kötü görünüyor" diyorsanız aşağıdaki yazıyı okuduktan sonra kararınızın değişeceğini umuyorum.

text linki buton haline dönüştürme:

==html link kodu==
Kod:
<a href="www.seonet.tr.gg" class="superlink">Seo Bilgi Bankası</a>


a tagine class parametresini verdik.çünkü bu kodun üzerinden css ile geçeceğiz.css'de bu linki düzenlerken diğer linklerin etkilenmemesi için superlink adını koyduk ve sadece bu ad üzerinde oynama yapacağız.(siz istediğiniz adı verebilirsiniz)
===============

sadece yukarıdaki html kodunu ekleyince o bilindik link görüntüsü oluştu:



şimdi ise bu sıradan görünümü profesyonel bir tasarım ürününe dönüştürme vakti.(yukarıdaki html kodunu sayfamıza ekledikten sonra aşağıdaki css kodunu gerekli yere ekleyin)

==Css Kullanarak linki buton yapalım==
Kod:
<style type="text/css">
<!--
.superlink
{
display: inline;
width: 200px;
height: 50px;
text-align: center;
padding-top: 12px;
border: solid 1px collapse red
}
-->
</style>

yukarıdaki kodu sitenizde css kodlarını eklediğiniz yere ekleyin.(css design kullananlar css imlerini çıkarsın).
Peki yukarıdaki kod ile ne yaptık:
display:inline =>birden fazla link yaparsak bu linkler yatay menü şeklini alacak.
width: 200px =>butonun genişliği(kısa bir link olursa bu değeri de küçültmek gerekebilir)
height: 50px =>butonun yüksekliğini belirledik.
text-align: center =>linkin tam ortada görünmesini sağladık.
padding-top: linkin dikey olarak ortada olmasını sağladık.(yüksekliğe ve link fontuna göre değişiklik göstermeli)
border: solid 1px collapse purple => sade biçimli 1px genişliğinde inceltilmiş kırmızı renkli kenarlık yaptık.
===============================

yukarıdaki css kodunu uyguladıktan sonraki görünüm:




Şimdi ise yaptığımız basit butonu geliştireceğiz.
Arkaplan resmi ayarlayıp, yazı ile oynayacağız.
ilk başta verdiğim html kodu aynen dursun.
zaten işimiz css ile.

==Css koduna eklemeler yapalım==
Kod:
<style type="text/css">
<!--
.superlink
{
display: inline;
width: 200px;
height: 50px;
text-align: center;
padding-top: 12px;
border: 0px;
background: #3366ff;
text-decoration: none;
font: 20px;
color: white;
font-family: Georgia
}
-->
</style>

Böylece birkaç ekleme/çıkarma yaparak butonu profesyonelliğe bir adım daha yaklaştırdık.
Peki neler ekledik/çıkardık:
border: 0px =>arkaplan rengi uygulayacağımız için şimdilik kenarlığı kaldırdık.
background: #3366ff => arkaplan rengi belirledik(#3366ff yerine istediğiniz renk kodunu yazabilirsiniz)
text-decoration: none =>artık linkimizin altı çizili değil.
font: 20px =>linkimizin piksel cinsinden boyutunu ayarladık.
color: white =>linkimizin rengini beyaz yaptık(istediğinizi yapabilirsiniz)
font-family: Georgia =>Linkimizin yazı tipini "Georgia" yaptık.(istediğinizi yapabilirsiniz)
=========================

yukarıdaki css kodunu eskisiyle değiştirdiğinizde aşağıdaki görünüm oluşur:




Eğer arkaplan rengiyle yetinmek istemiyor ve arkaplan resmi ayarlamak istiyorsanız aşağıdakileri uygulamanız yeterlidir.
Bu arada en başta verdiğim html koduyla işimiz çoktan bitti o kodla hiçbir zaman işimiz olmayacak.(Ama silerseniz tabiki bu css kodları işe yaramaz çünkü ortada oynayabileceğimiz bir link kalmaz.[yani silmeyin])
herneyse işte yeni css kodu.

==Css ile arkaplan resmi belirleme==
Kod:
<style type="text/css">
<!--
.superlink
{
display: inline;
width: 200px;
height: 50px;
text-align: center;
padding-top: 12px;
border: 0px;
background: #3366ff url(http://i42.servimg.com/u/f42/12/62/73/81/butbg10.png) repeat-x;
text-decoration: none;
font: 20px;
color: white;
font-family: Georgia
}
-->
</style>

Eğer farkettiyseniz yukarıdaki kodda sadece 1 yerde değişiklik var.Yani diğer kısımlara dokunmadım, sadece araya arkaplan kodunu koydum.
Yine de biz yukarıda ne yaptık:
url(http://i42.servimg.com/u/f42/12/62/73/81/butbg10.png) => arkaplan resmimizi belirledik
repeat-x => resim kendini sadece yatay düzlemde tekrarlasın dedik.Bu sayede 1px genişliğinde bir resim bile olsa sanki büyük bir resimmiş gibi gösterebilirsiniz.Ayrıca 1px olması "sitenizin hızını neredeyse hiç etkilemez" anlamına geliyor.Ayrıca ordaki karman çorman resim adresi yerine istediğiniz resmin adresini yazabilirsiniz.
===============================

yukarıdaki değişikliği yaptıktan sonra butonumuz böyle görünmeye başladı:




bu kadar değişiklikten sonra hover özelliği vermeden olmaz herhalde.Hover, bir butonun, linkin veya herhangi bir şeyin üzerine imleci getirdiğinizde değişiklik olmasını sağlar.Biz de bunu imleç üstüne geldiğinde arkaplanın değişmesini sağlamak için kullanıcaz.

==Css hover özelliği==
Kod:
<style type="text/css">
<!--
.superlink
{
display: inline;
width: 200px;
height: 50px;
text-align: center;
padding-top: 12px;
border: 0px;
background: #3366ff url(http://i42.servimg.com/u/f42/12/62/73/81/butbg10.png) repeat-x;
text-decoration: none;
font: 20px;
color: white;
font-family: Georgia
}

.superlink:hover
{
background: url(http://i42.servimg.com/u/f42/12/62/73/81/butbgh10.png) repeat-x
}
-->
</style>

Yukarıda sadece son 5 satırı ekledik.Bu bize hover özelliğini sağladı.Böylece butonun üstüne gelince arkaplanı farklı bir resim oluyor.
=======================

Son değişikliğimizi de yapınca butonumuz aşağıdaki hali aldı:

mouse üstünde değilken


mouse üstündeyken



eğer komple bir menüyü böyle oluşturmak istiyorsanız html deki link kodunu arada boşluk veya satır olmadan ard arda istediğiniz kadar kopyalayın.
ve eğer menü yatay değil dikey olsun diyorsanız css kodundaki display:inline yazan yeri display:block yapın.

menü örneğini görmek için tıklayın:

http://www.aurelis.info/_vti_pvt/ex.htm

şimdi içinizden "bunun text link liği falan kalmadı" veya "ben resme link veririm daha iyi" diyebilirsiniz ama eğer bir sayfanıza sadece bir resimle link verdiyseniz arama motorları o sayfayı indexine alamaz.Çünkü resimler görülmez.Ayrıca text link verdiğiniz zaman anahtar kelimeye link veriyorsunuz bu da optimizasyona + katkı demektir.
herkese kolay gelsin.
______________




En son seonet tarafından 28.07.2008 18:14:07 tarihinde değiştirildi, toplam 4 kere değiştirildi
Mesaj28.07.2008, 17:42 (UTC)    
Mesaj konusu:

GüzeL Anlatım SağoLun....
______________
kural ihlali @kerimdj
Mesaj28.07.2008, 17:48 (UTC)    
Mesaj konusu:

child-tasarim yazmış:
GüzeL Anlatım SağoLun....


zaman buldukça bunu yapmaya çalışacağım.
ayrıca anlamadığınız yerler olursa öm atmaktan çekinmeyin.
______________


Mesaj28.07.2008, 18:25 (UTC)    
Mesaj konusu:

paylaşım için saol. Wink
______________
Mesaj28.07.2008, 19:14 (UTC)    
Mesaj konusu:

oraya da yazdım ama göremediyseniz diye:

menü örneğini görmek için tıklayın:

http://www.aurelis.info/_vti_pvt/ex.htm
______________


Mesaj28.07.2008, 19:50 (UTC)    
Mesaj konusu:

paylaşımınız için teşekkürler.
______________
Mesaj29.07.2008, 04:21 (UTC)    
Mesaj konusu:

hersite-burada yazmış:
paylaşımınız için teşekkürler.


önemli değil.
______________


Mesaj30.07.2008, 13:22 (UTC)    
Mesaj konusu:

Emeğine sağlık
Mesaj03.08.2008, 11:26 (UTC)    
Mesaj konusu:

dediğim gibi bazen sitenizdeki mevcut css kodlarından etkilenebiliyor.bu durumda genellikle yazı tipi, rengi ve padding özellikleri sıfırlanıyor.
duruma göre değişir.henüz bomboş css kodları hiç olmayan bir siteye koyduğunuzda aynen örnekteki gibi çıkar.
______________


Mesaj03.08.2008, 11:37 (UTC)    
Mesaj konusu:

anlatım icin tesekkürler..
______________
Mesaj04.08.2008, 07:24 (UTC)    
Mesaj konusu:

GÜZEL PAYLAŞIM Wink
______________
Gazeteleri-Oku.Tr.GG Artık Forumda Yoqq !! Banned!!
Mesaj04.08.2008, 08:08 (UTC)    
Mesaj konusu:

Güzel Paylaşım için Saol Very Happy
______________
Sponsor aranıyor...Çok iyi bir photoshop'cu aranıyor...Rap işlerimle ilgili resimler yazılar yapabilecek biri aranıyor...Eğer yapabilecekseniz ve bunları ciddiye alan varsa mail adresimden bana ulaşsın : snack_tin( at )hotmail.com İlginizi bekliyorum...(Fiyat msn'de konuşulacaktır.)
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu