Yazıya Yorum Gönder!
facebook share twittershare

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…

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="http://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("http://www.lordiz.net/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="http://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

facebook share twittershare

    Murat 25 Nisan 2009, 17:33

    İnternet Explorerde Sol üst köşede sabit kalıyor, kodlamalarda oynaya yapsam bile yeri değişmiyor. :( firefox ve chromede normal çalışıyor

    admin 26 Nisan 2009, 01:47

    internet explorer 6 7 yada 8 hangisi ile baktınız 6 da sorun olabilirken 7 de düzgün görünüyor olabilir eğer öyleyse çoğu kullanıcı zaten 6 dan 7ye geçti bile eğer ie 7 veya 8 de sorun var ise kodlarda yada eklemede hata olabilir :)

    volkan 18 Aralık 2010, 01:17

    Merhaba, öncelikle sitenizde ki emeğinizden dolayı teşekkürlerimi sunarım. Acizane isteğim ; sitenizin sağ alt köşesindeki sabit resim ve link bağlantı kodunu kendi kişisel sitemde kullanabilirmiyim. Eğer uygun görürseniz email adresime ilgili kod ve iconların bulunduğu dosyayı rar olarak gönderirseniz memnun olurum. Yanlış anlaşılmasın lütfen..! kod bilgim iyidir ve internette bulmamda mümkün ama eğer emek verin diyorsanız öğrenmek için çok emek verdim şimdi sadece sitenizdeki bu sistemi kendi sitemde uygulamam için izin verirseniz memnun olurum. saygı ve sevgilerimle… yardımsız öğrendim ve artık yoruldum takdir ederseniz..

    admin 18 Aralık 2010, 15:16

    benim sitemde kullandığım konuda verdiğimin geliştirilmiş hali zamanla butonları arttırdım hepsini toplu olarak bir yerden almadım gerektikçe uygun butonu oraya uyarladım zevkine göre farklı ama aynı boyutlu butonlar koyabilirsin istersen oraya 10 tanede buton koyarsın istersen 1 tanede bırakırsın herşey aşağıdaki 2 koda bakıyo geliştirip çoğaltıyosun :)

    < *a href="#" class="buton1" title="üstüne gelince çıkacak yazı" rel="nofollow">Buton Adı< */a> (2 yıldızı sil)

    .buton1{ background:url(resim bağlantısı) no-repeat 0 0; width:32px; height:32px; display:block; _display:none; position:fixed; z-index:9999; text-indent:-9999px; overflow:hidden; outline:none; right:10px; (her bir butonda sayı 40 büyüyecek 50px,90px gibi..) bottom:10px; }

    emre dinçer 22 Aralık 2010, 14:38

    dostum ekik bilgi var kesin verdiğin kodları bire bir yapıyorum ancak iexplorerde görünmüyo mozillada sorunsuz. Senin sitendekiler iedede sorunsuz bizimkiler neden görünmüyo bişe daha olmalı :)

    admin 24 Aralık 2010, 11:42

    birebir yapmak yerine kendi sitenize göre editleyin konuda paylaşılan anlatım iede sorunsuz görüntüleniyormuydu hatırlamıyorum kendi sitemde kullandığım css ise 2 mesaj yukarıda bide o kodları ekleyerek deneyin :)

    Murat ÖZER 11 Ekim 2015, 23:55

    ne uğraştırıyorsun cssle falan direk html versene be adam

Üyeliksiz Yorum Bırak

Sorularınıza gelen cevapları görmek için sayfayı CTRL+D tuşları ile Yer İmlerine eklemeyi unutmayın.


Lordiz.com © 2008~2017