Animasyonlu Portfölyo Sitesi
Merhaba Arkadaşlar,
Sizlere hazır bir portfölyo sitesi sunacağım, beğeneceğinizede inanıyorum. Aşağıdaki linkten indirip ve herhangi bir editör programıylada burda anlattıklarımı uygularsanız hiçbir sorununuz kalmayacaktır. JQuery Portfölyo sitesi bildiğiniz gibi kişisel bir site türüdür. Bu uygulamayla kendi sayfanızdaki ürünleri veya yaptığınız web sitelerin tanıtımlarınızı yapabilirsiniz. Animasyonlu olmasıda daha kullanılmasını dahada cazipleştiriyor.İnşallah hoşunuza gider.
İndirdiğiniz rarlı dosyanın içinde 3 adet klasör 3 adet resim( arkaplanda kullanılan resimler) ve index.html dosyası bulunmaktadır. İmages klasörü tahmin ettiğiniz gibi sitede kullanılan resimlerin bulunduğu klasördür. Bu klasörün içinde 3 adet daha klasör bulunmakta. Large (resmin en büyük hali ve resmin boyutları 600×500) klasörü, Medium ( orta boyutlu resimlerin olduğu klasör, resmin boyutları 360×300) klasörü ve birde thumbs( en küçük resimlerin bulunduğu klasör , resmin boyutları 160×133) klasörüdür. Burdaki resimler sitede kullanılan resimlerdir her birinin içeriğini kendi resimlerinizle doldurmanız gerekmektedir. Bununla birlikte her klasörün içindeki resimde aynı sayıda ve aynı isimde olmalı. Tabi html kodlama bilen arkadaşlar kendileri istediği şekilde düzenleyebilirler.
index.html dosyasınıda editör programı ile açtığımızda düzenleyeceğimiz yerler ilk önce ;
<div> <div id="pg_title"> <h1 style="display:block;top:25px;">omerbozalan.com</h1> <h1>Summer of Love</h1> <h1>Smashing Multimedia</h1> <h1>Design Studio Project</h1> <h1>Graphpedia Blog Innovative Solutions</h1> <h1>My Portfolio Project</h1> <h1>1st Webdesigner</h1> <h1>Workspace Tools Conference</h1> </div>
Yukarıdaki <h1> … gibi başlık kodlarının içeriğindeki yazılar sol tarafta çıkan resimlere tıkladığınızdaki resimlerin başlıklarıdır. İmages klasörünün içinde 8 adet resim olduğundan onlara ait 8 adet başlığı daburdan değiştirebiliyorsunuz.
sonrasında ;
<div style="display:block;left:250px;"> <h2>Project Description</h2> <p>A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</p> </div>
……
yukarıda yer alan kısım ise o başlığa ait yazılardır. Burdan istediğiniz şekilde resmin altında yazacak yazıyı değiştirebiliyorsunuz. Bu kadar basit…
(240)
Yorum(11)
Yorum bırakın Yanıtı iptal et
Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.
selam hocam her konuya çok güzel cözümler buluyor ve yayınlıyorsunuz hocam meta etiketlerini düzenlemeyi de bizlere gösterirseniz seviniriz
Gokhan kardesim gerçi Ömer kardesime sormussun ama ben cevaplayayim yalnisim varsa Ömer kardesim beni duzeltsin simdi head taglarindan önce veya script taglarin sonra da olabilir ( head’den önce olmasi sart) Su kodlari yaziyoruz:
Burada description 2-3 kelimeyle siteyi tanimlaman
content ise içerigi kapsar. Bunu cogaltabilirsin istedigin kadar.
O zaman Google’da ararken kolayca siten cikaro ortaya.
Kodlar cikmamis
meta name=”description” content=”JQuery ile hazırlanmış ve kendiniz düzenleyebileceğiniz bedava portfolyo sitesi. Güle güle kullanın.”
meta name=”keywords” content=”jquery, jquery porfolyo site tasarımı, jquery site yapma, porfolyo site
bunlari tabiki ilk basta acip sonrada kapatmalisin
meraba ömer bey
ben bu portfolyo içeriğini artırmak istiyorum 8 le kalmasını istemiyorum
bunu nasıl yapabilirim
Biraz css bilgisi ile bu mümkündür kardesim. Kod bolumunde incelersen portfolyo bolumune ekleme yapabilirsin. Kolay gelsin.
Merhaba, içerikteki her ürüne ayrı dışarıdan link vermek istiyorum ancak nasıl link verebilirim. Hepsi tek index sayfasında kodlanmış durumda. Link ile gelen kişiyi sürekli ilk ürüne değil belki 3. ürüne yönlendirmeliyim. Bunu nasıl yapabilirim umarım sorumu anlatabilmişimdir ?
Altay arkadaşım, normal şekilde link vereceksin. sonuçta dışarıya link vereceğin için değişen bişey olmayacak yani.
Dışarıya değil. Mesela bu kod ile yaptığımız sayfada 5 ürün bulunacak. Ben başka bir sitede bu ürünlerden 3.sune link vermek istiyorum ya da 2.sine bunu nasıl yapabilirim diye soruyorum. Sonuçta tüm linklerde ..com/index olacak bu kod daki her ürünün sayfası aynı. Ürünleri ayrı linklere nasıl atayabilirim gibisinden. Böyle anlatılması zor bir soru oldu o nedenle 🙂
Altay arkadaşım, slider tarzında olduğu için malesef veremezsin. Lakin asp veya php ile kodlasaydık Id numarasına göre ayarlayabilir ve linke yönlendirebilirdik.
Her şablonunuzu beğeniyle indiriyorum ancak ne yazık ki uygulayamıyorum 🙁 baya eksik kalıyorum
Ezo, CSS konusunda kendini geliştirmen gerekiyor.