Joomla Yukarı Düğmesi (Top Button - scroll ) Oluşturma










AŞAMA BİR
templates Klasörü aç.
Hangi tema'ya uygulayacaksan ilgili tema klasörü de aç.
ÖRNEK: templates\auramsen tema klasörü.

templates\auramsen klasörü içinde yeni bir klasör yarat.
Adını (js) olarak isimlendir.
js klasörünü aç
içinde yeni bir metin belgesi oluştur
Aşağıdaki kod ları kopyala ve metin belgesine yapıştır.

Kod:

function scrollToTop(){
scrollBy(0,-1500) ;
}

function scrollToTop(){
for (var i=0;i<1500;i++){
scrollBy(0,-15) ;
}
}
Metin belgesini farklı kaydet: (scroll.js)

AŞAMA İKİ
İmages klasörü içine (top) adında bir PNG dosyası koy. Boyutlarını kendi temanıza göre seçin...

AŞAMA ÜÇ
templateDetails XML Dosyasını aç.
<images> KOD ları altındaki herhangi bir satırı kopyalayın, bir satır aşağı, boş satıra kopyaladığınız satırı yapıştırın.
ÖRNEK: <filename>http://www.frmmavi.com/images/subitem.png</filename>
subitem.png adını top.png olarak değiştirin.

AŞAMA DÖRT
index PHP Dosyasını açın. <div class="cleared"></div> kodları altına aşağıdaki KOD ları yapıştırın.
Kod:
<div id="top">
<div class="top_button">
<a href="#" onclick="scrollToTop();return false;">
<img src="templates/<?php echo $this->template ?>/images/top.png" width="30" height="30" alt="top" /></a>
</div>
</div>
KOD içindeki: width="30" height="30" rakamlarını PNG Dosyanızın boyutlarını yazacaksınız.

AŞAMA BEŞ
temanızın css klasörü içindeki template dosyasını açın.
en altına aşağıdaki KOD ları yapıştırın.
Kod:
#top {
float:right;
width:30px;
height:30px;
margin-top:0px;
padding:0 !important;
border:none !important;
background:transparent;

}

.top_button {
padding:0 !important;
border:none !important;

}

#fontresizer {


margin-left: 10px;
padding-right: 20px;
float: right;
}

#fontresizer img {
border: 0px;
}
KOD içindeki
width:30px;
height:30px;
rakalmlarını yine PNG Dosyanızın boyutlarını yazacaksınız.