Ditulis oleh: Ditulis pada: 11/08/2014
Fixed Slide Blog Pager And Hover Slide Page Title - Adalah salah satu alternatif yang bisa kita coba untuk membuat custom blog pager tampil sedikit berbeda. Blog pager ini melayang di bawah kiri dan kanan blog dan akan muncul tanda panah untuk next dan prev post ketika halaman di-scroll ke bawah.
Dan selanjutnya ketika tanda panah untuk next dan prev post ini di-hover, maka akan muncul judul postingan sebelumnya atau judul postingan selanjutnya dengan efek slide dari kiri ke kanan atau sebaliknya.
Dengan demikian akan lebih memudahkan pengunjung untuk mengetahui postingan apa yang sebelumnya atau postingan selanjutnya untuk dibaca. Untuk demonya silahkan coba di halaman demo pada link di bawah ini.
Nah bagi yang ingin mencobanya, silahkan gunakan kode-kode di bawah ini.
Kode CSS
Simpan kode CSS khusus untuk halaman postingan ini di bawah kode CSS skin blog atau di atas kode
</head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.blog-pager,#blog-pager{clear:both;}
a.blog-pager-older-link,a.blog-pager-newer-link{background-color:#181818;color:#fff!important;padding:10px;position:fixed;bottom:-50px;z-index:100000;transition:all 400ms ease-in-out;}
a.blog-pager-older-link{right:0;border-radius:3px 0 0 0}
a.blog-pager-newer-link{left:0;border-radius:0 3px 0 0}
a.home-link{visibility:hidden}
.blog-pager-older-link h6,.blog-pager-newer-link h6{font-size:30px;font-weight:700;margin:0!important}
.blog-pager-older-link h7,.blog-pager-newer-link h7.new{position:fixed;background-color:#181818;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;}
</style>
</b:if>
Kemudian silahkan cari kode di bawah 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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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>
<div class='clear'/>
</b:includable>
Lalu kode
<data:newerPageTitle/> silahkan ganti dengan kode ⇤ dan kode <data:olderPageTitle/> silahkan ganti dengan kode ⇥
Kode Javascript
Silahkan simpan kode javascript di bawah ini di atas 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>⇤</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>⇥</h6><h7>"+e+"</h7>")})});
//]]>
</script>
Bagi yang sebelumnya sudah menggunakan custom blog pager, silahkan ganti kode javascript custom blog pager sebelumnya dengan kode javascript di atas.
Untuk selanjutnya Anda bisa mengkustomisasi tampilannya dengan menyesuaikan pada kode CSS di atas agar sesuai dengan selera Anda.