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

Blogger Yayınlar Arası Resimli Sabit Geçiş Navigasyonu - Bu yazımızda blog sitelerinde bulunan yayın sayfaları arasında resimli geçiş navigasyonunu, sayfanın sağ ve soluna sabitleyerek daha kullanışlı blog sayfalarının daha kullanışlı olması ve eklentinin kurulumu ile ilgili ipuçları paylaşacağım.

Dünkü yazımızda blog yayınları arası resimli geçiş navigasyonun bir farklı tasarımını sizlerle paylaşmştık.

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

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

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. Açılan sayfada aranan kodları daha hızlı bulmak için, klavyenizin CTRL+F tuşlarından faydalanabilirsiniz. Navigasyonu eklemek için aşağıdaki adımları takip edin.

Ön İzleme

1- Aşağıdaki CSS kodlarını blogunuzun ş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{position:fixed;height:110px;top:50%;background:rgba(0,0,0,0.1);color:#fff;margin-top:-55px;padding:15px;z-index:9;cursor:pointer;-webkit-transform: translate3d(0,0,0);}
.halaman-kiri{border-radius:0 4px 4px 0;left:0}
.halaman-kanan{border-radius: 4px 0 0 4px;right:0}
.halaman-kanan a,.halaman-kiri a{width:220px;white-space:nowrap;}
.halaman-kanan a,.halaman-kiri a,.current-pageleft,.current-pageright{color:white;}
.halaman-kanan .isihalaman-kanan,.halaman-kiri .isihalaman-kiri{width:0; overflow: hidden; display:block;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
.current-pageright,.current-pageleft{width:200px;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;font-size:13px;line-height:2.05em}
.isihalaman-kiri a {margin: 0 5px;}
.isihalaman-kanan a {display: -webkit-box;text-align: left;}
.isihalaman-kanan a div,.isihalaman-kiri a div{width:125px;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;font-size:13px;margin: 0 15px;}
.isihalaman-kanan a:hover,.isihalaman-kiri a:hover{color:#fff!important}
.halaman-kanan:hover .isihalaman-kanan,.halaman-kiri:hover .isihalaman-kiri{width:240px;}
.halaman-kanan:hover, .halaman-kiri:hover {background:rgba(0,0,0,0.8);}
.halaman-kiri:before,.halaman-kanan:before{position:absolute;top:50%;height:22px;line-height:22px;margin-top:-11px;font-size:24px;}
.halaman-kiri:before{left:8px}
.halaman-kanan:before{right:8px}
.halaman-kiri:before{content:'\f104';font-family: FontAwesome;}
.halaman-kanan:before{content:'\f105';font-family: FontAwesome;}
.isihalaman-kanan img,.isihalaman-kiri img{object-fit:cover;height:80px;width:80px;border-radius:5px;}
.isihalaman-kanan img{left:15px;}
.isihalaman-kiri img{right:15px;}
#blog-pager-newer-link{float:none}#blog-pager-older-link{float:none}
/*]]>*/
</style>
</b:if>

2- Aşağıdaki javaScript kodunu blogunuzun ş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('<div>' + $(data).find('.post-title').text() + '</div>' + thumb)
    }, "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>' + $(data2).find('.post-title').text() + '</div>')
    }, "html")
})(jQuery);
//]]>
</script>
</b:if>

3- Blogunuza daha önceden eklemiş olan yada var olan yayın navigasyonu HTML kodlarını aşağıdaki HTML kodlar ile değiştirin. Aşağıdaki resimde 1 (bir) no ile belirtilen HTML kodlar ile aşağıdaki HTML kodları 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'/>
</span>
<b:else/>
<span class='current-pageleft'><span class='pager-title-left'/><br/>En son yayınlanan yayın</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'/>
</span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'/><br/>En eski yayın</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) no ile belirtilen post HTML kodlarının en alt kısmınına aşağıdaki örnek HTML kodda gösterildiği gibi ekleyin.

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

Eğer blogunuza daha önceden eklemiş yada var olan navigasyon kodları bulunyorsa bu kodları değiştirin.

Yukarıdaki kodları blogunuzun şablon editör sayfasına doğru eklediğinizden emin olduktan sonra şablonu kaydedin ve blogunuzu kontrol  edin.

Bu yazımızda blog yayınları resimli sabit geçiş navigasyonu ile ilgili bilgiler paylaştık. Bu yazımız ile ilgili görüş ve sorularınız için yorum bırakabilirsiniz.