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
- Reklam
- Benzer Yazılar
- Tüm Etiketler
- Gözüme Takılanlar
- özgürlük İlginç şablon animasyon animation asker ayna basın bedava blog blogcu cep telefonu chp css menu Dünya deniz baykal facebook güncelleme güvenlik gazete google hürriyet haber siteleri Heroes html icon internet Joomla klip medya mim msn nihat genç operasyon oyun ramazan bayramı safari türkiye tarayıcı tezkere upgrade vatan video wordpress youtube
Son yazı:
19 Ağu, 2008 saat: 20:33
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.
19 Ağu, 2008 saat: 19:58
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
01 Haz, 2008 saat: 11:13
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.
01 Haz, 2008 saat: 09:59
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
01 Haz, 2008 saat: 09:29
Söz diyorsunda kullandığın şablonda benim ve altındaki ismimi değiştirmişsin
01 Haz, 2008 saat: 07:05
Sen yapabilirsen ben her tarafına senin adını yazarım söz.
31 May, 2008 saat: 21:19
Ş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?
31 May, 2008 saat: 20:04
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/
26 Oca, 2008 saat: 17:49
Çok Yararlı Bir Konu Olmuş.Çok Teşekkürler Pardus.Bu Kare Menü’yü Bloğumda kullanmayı Düşünüyorum.
13 Ara, 2007 saat: 23:39
Faydalı bir yazı olmuş,teşekkürler.
10 Kas, 2007 saat: 21:08
slm pardus007 bbpress forumu ile wordpressi entegre etmeyi biliyormusun
Benimde aklımda geçti ama araştırmadım. Ama şuraya bir bak derim.
10 Kas, 2007 saat: 20:45
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.. :)
10 Kas, 2007 saat: 19:27
Eyvallah..
10 Kas, 2007 saat: 19:14
eline sağlık :D