Sitenin Köşesine Linkli Resim Ekleme

web tasarim Sitenin Köşesine Linkli Resim Ekleme

Başlıktan anlaşıldığı gibi sitemizin herhangi bir köşesine hatta istersek ortasına bir yerlere seçtiğimiz resim veya resimleri linkli olarak eklemeyi göreceğiz. Konuyu okuduktan ve anlatımları uyguladıktan sonra sitenizin 4 köşesinden istediğiniz yerine istediğiniz bağlantı ve resmi ekleyebileceksiniz.. 

DİKKAT! Yazı, 9 Şubat 2009 tarihinde yayınlanmıştır ve erişim sağladığınız tarihte güncelliğini yitirmiş olabilir.

Önce kodları ham haliyle vereceğim, daha sonrada Vbulletin için özel bir kullanım şeklini göstereceğim..

Öncelikle köşeye gelecek resmi ayarlayın. Ben yazımda sağ alt köşe için demo resim kullaneceğım…

demoi zpscae0c432 Sitenin Köşesine Linkli Resim Ekleme

Yukarıdaki resmi sağ alt köşeye sabitleyip sitemizdeki bir konuya yada bir reklam veren sitesine bağlantı ekleyeceğiz..

Site scriptlerinde genellikle index.php, index.html, bazı sistemlerde header.php (WordPress) bulunmaktadır. Bir de css kayıtlarını eklediğimiz bölüm yada dosya vardır, sisteminize göre bu ayarlamaları siz yapacaksınız ben ise kodları paylaşacağım..

Resmimizi ftp’ye atacağız ve ardından temamızın yada sitemizin index.php yada header.php dosyasını açıp aşağıdaki kodu <head> etiketinden sonrasına ekleyeceğiz..

 <div id="lordiz"><a href="https://www.lordiz.com" "target="_blank" title="Resim üstüne gelince çıkan text"></a></div>

Yukarıdaki kodu <head> etiketi sonrasına eklediysek şimdi div id etiketi lordiz‘i css ayarlarından tanımlayalım..

Sitenizin ek css yada style.css dosyasını açın ve en alta şunu ekleyin..

#lordiz a {
position: absolute;
bottom: 0px;
right: 0px;
position: fixed;
text-indent: -1000px;
width: 100px;
height: 85px;
overflow: hidden;
background: url("https://www.lordiz.com/resimler/lordiz/demoi_zpscae0c432.png") 0 0 no-repeat;
}

Bu işlemleri doğru yaptığınızda, tüm web tarayıcılarından sitenize baktığınızda sağ alt köşeye sabitlenmiş yukarıdaki demo resmi veya kendi eklediğiniz resmi göreceksiniz…

Düzenlemeler:

Şimdi yukarıdaki kodlamada duruma göre yapılacak editlemelere geçelim.. Düzenlemeler bottom: 0px ve right: 0px kodları yerine top, left kodları eklenerek yapılacak..

Örneğin resmi sol alta dayayacaksanız; sadece right: 0px‘i silip left: 0px yapacaksınız.. (Rakam sıfır)

Resmi sağ üste dayayacaksanız; bottom: 0px‘i silip top: 0px yazacaksınız ve right: 0px olacak..

Resmi sol üste dayayacaksanız; top: 0px yerinde aynen dururken right: 0px‘i silip left: 0px ekleyeceksiniz..

Yukarıda anlattıklarım çok açık dediklerimi aynen yaparsanız ekranda istediğiniz köşeye, istediğiniz resmi ekleyebileceksiniz…

Gelelim uyarılara..

Görselleri ufak boyutlu tutmaya özen gösterin.. Ayrıca ftp’ye attığınız resim boyutu 70 x 100 iken css ayarlarında resim boyutu 85 x 100 kalırsa resim köşeye oturmaz. Resimlerin boyutunu resim boyutu belirlenen satırlardan düzenlemeyi unutmayın..

Resim boyutunun düzenlendiği satırlar..

width: 100px;   (genişlik)
height: 85px;   (yükseklik)

Vbulletin kullanıcıları içinde özel bir eklemem olacak.. Diyelim ki görünecek resim kayıt ol resmi ve bu resmi ziyaretçilere göstermek istiyorsunuz. Bu durumda yapmanız gereken şey header şablonuna ekleyeceğiniz kodu şu şekilde eklemek olmalı..

 <if condition="$show['guest']"><div id="lordiz"><a href="https://www.lordiz.com" "target="_blank"></a></div></if>​

WordPress kullanıcıları ise verdiğim kodlardan ilkini header.php, single.php veya sidebar.php’ye, css kodlarını ise temasının style.css dosyasına eklemeliler. Ama burada dikkat etmeniz gereken mevzu css kurallarına uymak. Kurallara uymayan eklemelerde kodlar düzgün çalışmayacaktır.

Yukarıdaki yöntemi smf, webwiz, mybb, ipboard vb. forum sistemlerinde scripte uygun kodlamalara uyarlayarak herkes kullanabilirler..

Yukarıda paylaştığım kodların işinize yarayacağına eminim. Anlattıklarımı wordpress,avarcade,vbulletin,smf ve joomla’da  daha önce kullanmıştım, sorunsuz çalışıyor. Ve diğer scriptlerde de çalışmaması için neden yok! Lütfen işlemleri dikkatle yapın..

Yazı hakkında soru ve eklemeleriniz varsa yorum panelinden gönderebilirsiniz..

>> Web Tasarım ile Uğraşanlar için Faydalı Bağlantılar