Yoğun istek üzerine yazıyorum :) Sitemin üst kısmındaki kayarak açılıp kapanan burasıda var bölümünün nasıl yapıldığını anlatacağım.. Bunu her temaya uyarlayabilirsiniz. Bu olayı merdeka temasında gördüm, beğendim ve kendi temama uyarladım..
Öncelikle kullanacağımız dosyaları yükleyelim. Kayma hareketini sağlamada kullanılan moo.fx.js ve prototype.lite.js javascript kütüphanelerine ihtiyacımız var. Bu ikisine sağ tıklayın ve hedefi farklı kaydet diyerek bilgisayarınıza indirin. Daha sonra sitenizin /wp-includes/js/ klasörüne yükleyin.
Wordpressinizin yönetim panelinden Görünüm > Tema Editörüne girin. Sağ taraftan Üst Kısımı seçin.
<?php wp_head(); ?> kodunun altına şu kodları yapıştırın :
<script src="/wp-includes/js/prototype.lite.js" type="text/javascript"></script>
<script src="/wp-includes/js/moo.fx.js" type="text/javascript"></script> <script type="text/javascript"> var opened=false; window.onload = function() { resizeDivHeight = new fx.Height('budavar',{duration:1000}); }; function toggelopen(){ if(opened==false){ resizeDivHeight.custom(0,270);//First Number is starting height, Second is ending height. opened=true; }else{ resizeDivHeight.custom(270,0); opened=false; } } </script>
<body> etiketinin altına bu kodu ekleyin :
<div id="budavar">div id="budavarContent"> burada içeriğimiz olacak </div></div><div id="js"><a id="toggle" href="#" onclick="toggelopen()" title=""></a></div>
Sırada css kodlarımız var.. Stil sayfanızın içine bir yere yapıştırın.
a#toggle{display:block; padding:0; margin:0; width:1000px; height:30px; background:transparent url(images/enust.png) no-repeat top left} #js{position:auto; width:1000px; margin:0 auto; text-align:center}
#budavar{position:auto; height:0px; padding:0; color:#ECF3F8; overflow:hidden; text-align:center; margin:0 auto }
#budavarContent{position:auto; margin:0 auto; display:block; width:999px; font-size:11px; background:#003466; text-align:left; overflow:hidden; border:0px solid #0097CA }
Şimdi buna benzer bir resim yapıp images klasörüne enust.png olarak yüklemeniz gerekiyor. Hepsi bu kadar…Sorularınızı sorunlarınızı yorum olarak yazabilirsiniz..
Favorilerime Ekle