WordPress için sayfanın sağına soluna ok işareti navigasyon

Bir önceki girdide belirttiğim gibi ne görsek istiyoruz durumu var, bu girdide de şu ok işaretlerini yazacağım. Hayır şimdi yazsam bir dert yazmasan bir dert kardeşim seviyor özeniyor insanlar napalım her taraf zırt”ca” zurt”ca” da dolmuş bu yüzden.

Wordpress için sayfanın sağına soluna ok işareti navigasyon

Bu navigasyon sistemi özünde yay!everyday isimli siteye ait ben o siteden önce sanırım uzun zaman önce bir thumblr tasarımında rastlamıştım orada da görünce hoşuma gitti uyarladım buraya.

Bunu yapmak bir öncekinden daha basit, sitenin <body> etiketinden sonrasına aşağıdakini ekleyin;

<div id="nav-above">
<div class="nav-previous">
<?php previous_posts_link('<span class="meta-nav">&laquo;</span>') ?>
</div>
<div class="nav-next">
<?php next_posts_link('<span class="meta-nav">&raquo;</span>') ?>
</div>
</div>

Daha sonra CSS de şöyle, style.css e ekleyin;

div#nav-above, #nav-above div{_display:none!important;}
#nav-above{display:block;position:fixed;top:35%;}
#nav-above a{display:block;padding:0 20px;color:#777;text-shadow:#fff 1px 1px 0px;}
#nav-above a:hover{color:#FFB321;text-decoration:none;}
#nav-below{clear:both;float:right;margin:3em 0 0;padding:0px;width:100%;color:#888;}
#nav-above .nav-previous {position:absolute;display:block;width:100px;top:50%;left:-90px;text-align:right;line-height:4em;font-size:5em;color:#888;}
#nav-above .nav-next {position:absolute;display:block;width:100px;top:50%;right:-850px;text-align:left;line-height:4em;font-size:5em;color:#888;}
#nav-below a {font-weight:800;margin:0px;}
.nav-next{background:transparent;float:right;font-size:1.2em;min-height:60px;padding:0;position:relative;margin:0;width:50%;}
.nav-previous{background:transparent;float:left;font-size:1.2em;min-height:60px;padding:0;position:relative;margin:0;width:50%;}

Bu da bu kadar.

Tekil yazılar için kod şöyle değişiyor, bunun farkı aynı kategoride ki yazıları sayfalaması;

<div id="nav-above" class="navigation">
<div class="nav-previous">
<?php previous_post_link('%link', '<span class="meta-nav">&laquo;</span>', true); ?>
</div>
<div class="nav-next">
<?php next_post_link('%link', '<span class="meta-nav">&raquo;</span>', true); ?>
</div>
</div>

Kullanımı yukarıda anlatıldığı gibi.

Volkan Yılmaz tarafından yayınlandı

Volkan Yılmaz #SEO, Digital Marketing, Growth Hacking #wolkanca volkan@volkanyilmaz.com.tr

“WordPress için sayfanın sağına soluna ok işareti navigasyon” için 13 yanıt

  1. bende blogumda kullanıyorum. tabiki ilk olarak sende görmüştüm. oldukça kullanışlı.

  2. selam, volkan kardeşim şöyle bi durum mevcut ben daha önce yapmıştım bundan onceki temamda şimdi kodu ekleyince söyle oluyor;

    ama ben;

    yapmak istiyorum

    <?php previous_post_link('%link', '&laquo önceki haber', true); ?>

    <?php next_post_link('%link', 'sonraki haber»', true); ?>

    böyle yapıncada şöyle oluyor

    bir önceki temamda düzeltmiştim ama suanda yapamiyorum yardımcı olurmusun

  3. bakı seyler cıkmamamıs yazında onceki ve sonraki haber seklinde yaptım lakin alt alt geliyor ben aynı sırada sağlı sollu olsun istiyorum

  4. sayın orhan ne yarışmasıymış o bibok anlamadık bu konuda yarışma diye bir kelime yok.

    sayın salih yazdıklarınız burada gözükmemiş pek birşey anlamadım, bir daha ki yorumunuzda konuyu biraz daha açıklarsanız yardımcı olmaya çalışırım.

    yorumlar için teşekkürler.

  5. simdi hocam site soyle anlatayım tekil yazı içersine önceki haber sonraki habe seklinda sağlı sollu yapmak istiyorum ama ornek veriyorum yorumu sonra silersin herhangi bisekilde reklam yada cıkarım yok http://frmbiz.com/samsun-kiz-yurdunda-yangin.html baksarsan alt altta girmiş ben bunlari aynı sira içersinde yapmak istiyorum

  6. sayın salih,

    sağlı sollu olması için sitil vermelisiniz. bunun için örnek;

    <div class="navigasyon"><div style="float:left;text-align:left;"> <?php previous_post_link('%link', '&laquo önceki haber', true); ?> </div><div style="float:right;text-align:right;"> <?php next_post_link('%link', 'sonraki haber &raquo', true); ?> </div></div>

  7. wordpress te bu kodları nereye ekleyeceğiz ben anlayamadım tam olarak kusura bakmayın.

Yorumlar kapatıldı.