Blogger Yayınlar Arası Resimli Geçiş Navigasyonu

Blogger Yayınlar Arası Resimli Geçiş Navigasyonu - Bu yazımızda Blogger sitelerine yayın sayfaları arasında resimli geçiş navigasyonu ekleme ile ilgili ipuçları paylaşacağım.

Blogger sitelerine resimli yayın navigasyonu eklemek için, Blogger hesabınıza giriş yapın ve blogunuzun yönetici panelinin sol tarafında bulunan menüden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın ve aşağıdaki adımları takip ederek eklentiyi blogunuza uygulayın.

Blogger Yayınlar Arası Resimli Geçiş Navigasyonu Nasıl Eklenir?

Şablon editör sayfasında aradığınız kodlara daha hızlı erişmek için CTRL+F tuşlarından faydalanın.

Ön İzleme

1- Aşağıdaki CSS kodlarını şablon editör sayfasında bulunan </head> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.halaman-kanan,.halaman-kiri{transition:all .3s ease-in-out}
.halaman{margin:0;padding:0;min-height:170px;height:auto}
.halaman-kanan,.halaman-kiri{color:#666;position:relative;background:#000;background:rgba(0,0,0,.6);width:50%;min-height:170px;-moz-box-sizing:border-box;margin:0}
.halaman-kiri{height:auto;float:left;padding:20px 10px 20px 40px;text-align:left;box-sizing:border-box}
.halaman-kanan,.halaman-kiri{-webkit-box-sizing:border-box}
.halaman-kanan{height:auto;float:right;padding:20px 40px 20px 10px;text-align:right;box-sizing:border-box}
.current-pageleft,.current-pageright,.halaman-kanan a,.halaman-kiri a{font-size:16px;font-family:Roboto,sans-serif;font-weight:700;background:0 0;text-decoration:none;line-height:1.1}
.halaman-kanan a,.halaman-kiri a,.current-pageleft,.current-pageright{color:#fff;}
#blog-pager,.isihalaman-kanan,.isihalaman-kiri{margin:0!important}
.panahkanan,.panahkiri,.halaman-kiri a div:before,.halaman-kanan a div:before{position:absolute;top:50%;margin-top:-8px;font-size:18px!important;}
.panahkiri,.halaman-kiri a div:before{left:10px}
.panahkanan,.halaman-kanan a div:before{right:10px}
.halaman-kanan a:hover,.halaman-kiri a:hover{text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.isihalaman-kanan img,.isihalaman-kiri img{position:absolute;top:0;width:100%;height:100%;object-fit: cover;z-index:1}
.isihalaman-kanan img{right:0}
.isihalaman-kiri img{left:0}
.halaman-kiri a div, .halaman-kanan a div,.current-pageleft,.current-pageright {position: absolute;bottom: 10px;z-index: 3;width: 100%;padding:0 10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.halaman-kiri a div,.current-pageleft{left:0;padding-left:40px;}
.halaman-kiri a div:before{content:'\f053';font-family: FontAwesome;}
.halaman-kanan a div,.current-pageright  {right:0;padding-right:40px}
.halaman-kanan a div:before{content:'\f054';font-family: FontAwesome;}
.halaman-kiri a div h6,.halaman-kanan a div h6,.pager-title-left{font-weight:300}
.blog-pager-newer-link:after,.blog-pager-older-link:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background:-moz-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:-webkit-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:linear-gradient(to bottom,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#003f474e', endColorstr='#a63f474e', GradientType=0 );transition:all .4s ease-in-out}
.halaman-kanan a:hover:after,.halaman-kiri a:hover:after{opacity:0}
@media screen and (max-width:414px){.halaman-kiri,.halaman-kanan{width:100%;}}
/*]]>*/
</style>
</b:if>

Blogunuzda daha önceden eklenmiş veya var olan bir yayın veya sayfalar arası geçiş navigasyonuna ait CSS kodlarını kaldırın.

2- Aşağıdaki javaScript kodunu şablon editör sayfasında bulunan </body> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
(function($){var newerLink=$('a.blog-pager-newer-link');var olderLink=$('a.blog-pager-older-link');$.get(newerLink.attr('href'),function(data){var thumb=$(data).find('.post-body').length==1?"<img alt='"+$(data).find('.post-title').text()+"' src='"+$(data).find('.post-body img:first').attr('src',function(i,src){return src.replace(/.*?:\/\//g,"//").replace('s1600','s386');}).attr('src')+"' class='pager-thumb' width='386' height='170'/>":"";newerLink.html(thumb+'<div><h6>Geri</h6><h5>'+$(data).find('.post-title').text()+'</h5></div>')},"html");$.get(olderLink.attr('href'),function(data2){var thumb2=$(data2).find('.post-body').length==1?"<img alt='"+$(data2).find('.post-title').text()+"' src='"+$(data2).find('.post-body img:first').attr('src',function(i,src){return src.replace(/.*?:\/\//g,"//").replace('s1600','s386');}).attr('src')+"' class='pager-thumb' width='386' height='170'/>":"";olderLink.html(thumb2+'<div><h6>İleri</h6><h5>'+$(data2).find('.post-title').text()+'</h5></div>')},"html")})(jQuery);
//]]>
</script>
</b:if>

3- Blog sitenizde navigasyonun doğru çalışması için, aşağıdaki HTML kodları resimde 1 (bir) nolu belirtilen HTML kodlar ile değiştirin.

    <b:includable id='nav-post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
<div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171; Önceki yayın</a>
</span>
<b:else/>
<span class='current-pageleft'><i class='fa fa-chevron-left panahkiri'/><span class='pager-title-left'>Geri</span><br/>En yeni sayfa</span>
</b:if>
<div class='clear'/>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Sonraki yayın &#187;</a>
</span>
<b:else/>
<span class='current-pageright'><i class='fa fa-chevron-right panahkanan'/><span class='pager-title-left'>İleri</span><br/>En eski sayfa</span>
</b:if>
<div class='clear'/>
</div>
</div>
</div>
<div class='clear'/>
</div>
</b:if>
</b:includable>

    <b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a>
</div>
<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><data:desktopLinkMsg/></a>
</div>
</div>
</b:if>
<div class='clear'/>
</b:includable>

4- Yukarıdaki resimde 2 (iki) nolu belirtilen HTML kodun en alt kısmına aşağıdaki HTML kodu ekleyin. Bir aşağıdaki örnek koda uygun olarak eklemeye çalışın.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nav-post'/>
</b:if>

Örnek HTML kod ekleme

<b:includable id='post' var='post'>
<article class='post hentry'......
......
......
......
</article>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nav-post'/>
</b:if>
</b:includable>

Blogunuzda da önceden eklenmiş veya var olan yukarıdaki koda benzer bir kod var ise değiştirmenize gerek yoktur. Eğer yukarıdaki koddan farklı bir kod bulunuyorsa değiştirin.

Yukarıdaki adımları doğru bir şekilde uyguladığınızdan emin olarak şablonu kaydedin ve blogunuzu kontrol edin.

Navigasyon, mobil sayfalarda veya ekran boyutlarına uygun olacak şekilde geniş ekranlarda yan yana dar ekranlarda alt alta görünecektir.

Blog yayın sayfaları arasında resimli geçiş navigasyon ekleme ile ilgili ipuçlarını paylaştık. Bu yayın ile ilgili görüş ve sorularınız için yorum bırakabilirsiniz.