Kare Menu
Kare menu, alt kare, reklam alanı vs… artık bunun ismine ne denir ne denmelidir bilmiyorum ama bu ismini tam koyamadığım pek çok arkadaşında defalarca sorduğu bu şeyi şimdi sizlere anlatmaya çalışacağım.
Her ne kadar adını tam koyamadığım desemde bu yazımda kare menu olarak adlandıracağım.
Bunu ilk olarak blogcudaki bloğumda kullanmıştım. O zamandan beri pek çok arkdaş nasıl yapabiliriz diye defalarca sormuştu. Bende yorum olarak nasıl yapılabileceğini anlattım. Bu kadar sorulan bir şeyi artık başlı başına bir yazı olarak yazmanın vakti çoktan geçtide biz şimdi yazıyoruz.
İşte kare menu için gereken css kodları
.kare {
float:left;
width:150px;
height:130px;
border:#eee 1px solid;
margin:2px 0 0 15px;
padding:1px 2px 1px;}
Şimdi gelelim bunları sayfaya yerleştirmeye.
<div class=”kare”>İçerik</div>
İçerik kısmına istediğinizi yazın ve bu kodu bloğunuzun genişliğine göre istediğiniz kadar tekrarlayabilirsiniz.
<div class=”kare”></div>
<div class=”kare”> </div>
<<div class=”kare”></div>
gibi. Ben 4 tane koymuşum. Genişlikler arttırılarak yada azaltılarak kare sayısı değiştirilebilir. İsterseniz bir kaç kat olarak uygulayın. Fakat dikkat uygulanması gereken bir nokta daha var. Herkesin teması farklı farklı olabilceğinden karelerin aşağı yukarı kayma duğumları olabilir bunu engellemek için css kodlarına
.clear {clear:both; margin:2px 0 2px;}
sayfdaki kodların başına ve sonuna
<div class=”clear”></div>
kodlarını eklemeliyiz. Son eklediklerimizle beraber kodlarımız şöyle oldu.
.kare {
float:left;
width:150px;
height:130px;
border:#eee 1px solid;
margin:2px 0 0 15px;
padding:1px 2px 1px;}.clear {clear:both; margin:2px 0 2px;}
Sayfaya eklenen kodlar
<div class=”clear”></div>
<div class=”kare”>İçerik</div>
<div class=”clear”></div>
Bu kadar. Ama şimdi bu kare menu üzerinde biraz oynayıp daha janjanlı birşeyler yapalım.
Karelerin üzerinde gezinirken farenin üzerine geldiği kare diğerlerinden farklı olsun.
Bunun için css kodlarına
.kare:hover {border:#666666 1px solid;}
bunu ekliyoruz. Daha değişik biçimlere sokmak mümkün. Sizler için kendi yaptığım birkaç değişik sitili sunuyorum. Orada kullandığım kodları kağnağını görüntüleyerek ya da ikinci sayfadan ulaşabilirsiniz.
Sayfalar: 1 2
14 Yorum yapılmış...
eline sağlık :D
Eyvallah..
Abi çok faydalı olmuş hakikaten, ellerine sağlık..
İnsan kodları bilse de böyle hazır şeyler çok daha kolaylaştırıyor işi.. :)
slm pardus007 bbpress forumu ile wordpressi entegre etmeyi biliyormusun
Benimde aklımda geçti ama araştırmadım. Ama şuraya bir bak derim.
Faydalı bir yazı olmuş,teşekkürler.
Çok Yararlı Bir Konu Olmuş.Çok Teşekkürler Pardus.Bu Kare Menü’yü Bloğumda kullanmayı Düşünüyorum.
Merhaba bazı şablonlarda uyarlama pardus yazıyor. Worpress temalarında da. Şablon istek kabul eder misin bilmem ama ben bi şablon buldum çok yere istek yazdım ama hiçbiri yapamadı. Acaba sen yapabilir misin?
Konum:
http://themes.wordpress.net/columns/3-columns/3376/myjournal-supareal-10/
Şablon güzele benziyor. Yapabilirim ama söz vermiyorum. Ancak ne varki insan emeğinin karşılığı olarak koyduğu linki kaldırılınca ya da değiştirilince hevesi kırılıyor. Kendi uyarladığı şablonun altında başka biri tarafından uyarlandığını görünce sinirlenebiliyor. Bİlmem anlatabildim mi?
Sen yapabilirsen ben her tarafına senin adını yazarım söz.
Söz diyorsunda kullandığın şablonda benim ve altındaki ismimi değiştirmişsin
Onuda mı sen yaptın. Ben tee martta değiştirmiştim onu.Yazıyım o zaman.
Düzelttim kardeşim
Ben söz derken uyarladığın şablonu bahsetmiştim
tee martta değiştirirken acaba benim adım yazmıyormuydu orada. Neyse şablonu boş bir vaktimde yapmaya çalışacağım. Bu kesinlikle yapacağım sözü değildir.
Merhabalar Sevgili şablon TR ve Pardus007.:)) Sık sık giriyorum sitenize. Başvurduğum kaynaklardan önde geleni sizsiniz. Kısa yoldan başka biryere bakmadan sormak istiyorum size. Photoshopta animasyon yapabilirmiyim. Çok şey öğrendim sanıyorum ama öğrenememişim demekki. Blogcuya şablon uyarlamayı öğrendim. Ama sadece Layout ve template leri. Şimdi tek istediğim kendi animasyonlu bannerimi yapmak ve glitter çalışabilmek. Bildiğiniz birşey varsa bunu benimle paylaşırsanız sevinirim. Çok teşekkürler. Ayrıca cevabı yine sizin sitenize gelip öyle mi okuyacağım.:)) Güzel girişimlerinizin daha daha başarılı olması dileğiyle hoşçakalın… Kiana
Teşekkürler,
Photshopla beraber gelen İmageReady’i kullanarak animasyonlu bannerler yapmanız mümkün. Tam hoşuma giden kaynaklar bulamadım ama şimdi vereceğim linkler işinze yarar inşallah. [ 1 2 3 ]
Ayrıca daha önce yazdığım şu yazımda paylaştığım sitelerde ilgili dersler olması mümkün. Bir bakın derim.
Şimdiye dek dikkat ettiyseniz photoshop’un araçlar menüsünün altında İmageReady’ geçiş yapmak için bir bağlantı mevcut. Bu iki programı koordineli bir şekilde kullanarak çok güzel çalışmalar yapılabilir.
Animasyonlu banner yapımında hazır programlar olduğu gibi flash programı ile çok güzel sonuçlar ortaya çıkartmanın mümkün olduğunuda hatırlatmak isterim.
Ayrıca henüz yapım aşamasında olan sablon.pardus007.com adresi için olumlu ve olumsuz eleştiriler yaparsanızsevinirim. Böylece daha baştayken göremediğim bir hatam varsa düzeltmek isterim.