WordPressinize kayarak açılıp kapanan -burası da var- bölümü yapın!

Posted: Eylül 18th, 2007 | Author: | Filed under: Wordpress | Tags: , , | 13 Comments »

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..

13 Comments on “WordPressinize kayarak açılıp kapanan -burası da var- bölümü yapın!”

  1. 1 Uğur SAMSA said at 13:53 on Eylül 19th, 2007:

    Gayet açık bir şekilde anlatmışsın. Teşekkürler Hüseyin..

  2. 2 oyyla.com said at 00:11 on Eylül 20th, 2007:

    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..

  3. 3 Emre Özçelik said at 01:49 on Eylül 20th, 2007:

    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.

  4. 4 kolaj said at 15:30 on Eylül 20th, 2007:

    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

  5. 5 HC said at 12:19 on Eylül 21st, 2007:

    Teşekkürler güzel bir yazı olmuş..

  6. 6 kaptan said at 23:27 on Eylül 21st, 2007:

    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

  7. 7 Hüseyin Berberoğlu said at 00:57 on Eylül 22nd, 2007:

    o iki dosyaya sağ tıklayıp bilgisayarınıza indirin daha sonra kendi siteinze atın.. en güzeli bu..

  8. 8 Hüseyin Berberoğlu said at 00:59 on Eylül 22nd, 2007:

    buna göre kodları düzenledim.. şimdi daha doğru oldu :)

  9. 9 dest said at 01:15 on Eylül 22nd, 2007:

    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ı…

  10. 10 Uğur SAMSA said at 03:19 on Eylül 22nd, 2007:

    Hüseyin kodlar çok karışık görünüyor. Bunu da yapılacaklar listesine eklemelisin. dontforgtthemilk.com daki listene :D

  11. 11 Hüseyin Berberoğlu said at 03:50 on Eylül 24th, 2007:

    ekledim :) o hep listede aslında ama yapan yok :P

  12. 12 Uğur SAMSA said at 10:57 on Eylül 26th, 2007:

    He he. Siteye üye oldum bugün. Bakalım listeleyince bir şeyleri dah düzgün yapacak mıyım :)

  13. 13 Kadir said at 00:53 on Ekim 9th, 2007:

    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.

Leave a Reply