CSS 05: BLOG PAGER - BLOG NAVIGATION

DEMO

CSS:

Tempatkan diatas kode </head> :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.blog-pager,#blog-pager{clear:both;}
a.blog-pager-older-link,a.blog-pager-newer-link{background-color: #fff; border: 1px solid #ddd; color: #666!important; right: 0; border-radius: 3px 0 0 0; padding: 0 13px 0 18px; position: fixed; bottom: -50px; z-index: 100000; transition: all 400ms ease-in-out; height: 70.7px; line-height: 70.7px;}
a.home-link{visibility:hidden}
.blog-pager-older-link h6,.blog-pager-newer-link h6{font-size:27px;font-weight:700;margin:0!important}
.blog-pager-older-link h7,.blog-pager-newer-link h7.new{position:fixed;background-color:#888888;padding:10px;font-size:14px;font-weight:normal;margin:0!important;transition:all 400ms ease-in-out;}
.blog-pager-older-link h7{bottom:0;right:-1000px;z-index:99999;border-radius:3px 0 0 0}
.blog-pager-newer-link h7.new{bottom:0;left:-1000px;z-index:99999;border-radius:0 3px 0 0}
.blog-pager-older-link:hover h7{right:45px;}
.blog-pager-newer-link:hover h7.new{left:45px;}
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0);}
</style>
</b:if>

Kemudian cari kode dibawah ini:

<b:includable id='nextprev'>
<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/></i></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/></i></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>
<div class='clear'/>
</b:includable>

Lalu kode <data:newerPageTitle/> diganti dengan kode:

<i class="fa fa-chevron-left"></i>

Opsional: &#8676;

Dan kode <data:olderPageTitle/> diganti dengan kode:

<i class="fa fa-chevron-right"></i>

Opsional: &#8677;


Penggunaan <i class="fa fa-chevron-left"></i> dan <i class="fa fa-chevron-right"></i> membutuhkan Javascript Font Awesome.
Sedangkan penggunaan &#8676; dan &#8677; tidak membutuhkan Font Awesome.

Lalu masukan kode berikut ini diatas kode </body> :

<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){if($(this).scrollTop()>500){$("a.blog-pager-newer-link,a.blog-pager-older-link").css({bottom:0})}else{$("a.blog-pager-newer-link,a.blog-pager-older-link").css({bottom:"-50px"})}})});
$(document).ready(function(){var e=$("a.blog-pager-newer-link").attr("href");$("a.blog-pager-newer-link").load(e+" .post-title:first",function(){var e=$("a.blog-pager-newer-link").text();$("a.blog-pager-newer-link").html('<h6><i class="fa fa-chevron-left"></i></h6><h7 class="new">'+e+"<h7>")});var t=$("a.blog-pager-older-link").attr("href");$("a.blog-pager-older-link").load(t+" .post-title:first",function(){var e=$("a.blog-pager-older-link").text();$("a.blog-pager-older-link").html("<h6><i class="fa fa-chevron-right"></i></h6><h7>"+e+"</h7>")})});
//]]>
</script>

NOTE:

Delete the all related default code because the new CSS already have it.

#blog-pager-newer-link { ... }
#blog-pager-older-link { ... }
#blog-pager { ... }
ETC ...