Yeni temada footerda yukarı çık özelliği bulunuyordu ama js yerine # özelliği ile çalışıyordu. Biraz araştırmayla özelliği nasıl kullanabileceğimi öğrendim, yazmak istedim.
Kumanda panelinde;
1. Blogunuz ➜ Şablon ➜ Html'yi Düzenle (Devam et) ➜ Widget Şablonlarını Genişlet yolunu izleyin
2. Ctrl+ F ile aşağıdaki kodu aratın
</head>
yukarıdaki kodu bulduysanız hemen üzerine aşağıdaki kodu ekleyin
<script type='text/javascript'>
$(window).ready(function(){
$('.yukari').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>
Yine </head> kodundan önce aşağıdaki kodu ekleyin. Eklemeden önce bu koddan temanızda olup olmadığını kontrol edin.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Daha sonra temanızda aşağıdaki kodu bulun
]]></b:skin>
ve hemen üzerine aşağıdaki kodları ekleyin.
.yukari{position:absolute;z-index:1;margin:-100px 0 0 125px}
#yukari{width:400px;float:right}
(İşlem bittikten sonra butonun yerinden memnun kalmazsanız sağa veya sola kaydırmak isterseniz buradaki margin değerleri ile oynayabilirsiniz.)Yukarıdaki işlemler butonun yerleşimi ve efektle yukarı çıkması içindi. Şimdi asıl buton kodlarını vereceğim. Siz aşağıdaki kodları temanızda istediğiniz yere yerleştirebilirsiniz. Tabi en iyi yerleşim footer olacaktır..
<div id='yukari'>
<a class='yukari' href='#' title='Yukarı'><img border='0' src='http://4.bp.blogspot.com/-pIoFizsXk2w/T2hUcBZIiAI/AAAAAAAADII/4iOqPmgUJeg/s1600/up.png'/></a>
</div>
Aslında bu konu biraz işin mantığını çözebilmek içindi. Yani buradaki kodları kullanarak daha kullanışlı şeyler yapabilirsiniz.
Anlatımın canlı örneğini görmek isterseniz blogumun en alt kısmındaki "Yukarı Çık" butonuna tıklayabilirsiniz.
Güzel eklenti :)
YanıtlaSilteşekkürler güzel paylaşım..
YanıtlaSil