WordPressinize kayarak açılıp kapanan -burası da var- bölümü yapın!
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..
Gayet açık bir şekilde anlatmışsın. Teşekkürler Hüseyin..
WordPress’inize kayarak açılıp kapanan “burası da var” bölümü yapın.
http://nxs.nxsn.com adresinde üst kısmındaki ilk anda gizli olan tıklandığında kayarak açılan daha sonra tekrar tıklandığında kapanan “burası da var” bölümünün nasıl yapıldığını anlattım..
Yalnız javascript dosyalarını kendi sunucunuzdan kullanıma açmak yerine ayrıca belirtseniz bence daha iyi olur. Böylelikle bu menüyü kullanlar sizin bant genişliğini tüketmez, sizin sunucunuzda gelişebelecek sorunlar diğer siteleri etkilemez.
mükemmel birşeymiş daha önce görmüştüm de o temaları kullanmak istememiştim. artık kendi temamda da kullabilirim teşekkürler nexus
Teşekkürler güzel bir yazı olmuş..
slm hojam elıne saglıkta yanlıs ındırdıgımız ıkı dosya sızın sıtenız uzerınden calısmak ıstıyor yada sızın sıtenızden bıseyler oluyor sıteye ben onu anlamadım yanı en alaka sızın sıtenızden ızın ıstıyor anlamadım fırefoxda no scrıptten sızın sıtenızden ızın ıstıyor neyse artık bakarım
o iki dosyaya sağ tıklayıp bilgisayarınıza indirin daha sonra kendi siteinze atın.. en güzeli bu..
buna göre kodları düzenledim.. şimdi daha doğru oldu :)
Emeğine sağlık gayet açık bir şekilde anlatmışsın bir ara http://www.eylos.com‘a bir deneyeyim bakalım yakışacakmı…
Hüseyin kodlar çok karışık görünüyor. Bunu da yapılacaklar listesine eklemelisin. dontforgtthemilk.com daki listene :D
ekledim :) o hep listede aslında ama yapan yok :P
He he. Siteye üye oldum bugün. Bakalım listeleyince bir şeyleri dah düzgün yapacak mıyım :)
içerik eklerken nasıl yapıyoruz.örneğin en son yorumları vs göstermek istediğimiz zaman kodu nasıl yazmamız gerekiyor teşekkürler şimdiden,elinize sağlık.