Fixed Slide Blog Pager And Hover Slide Page Title

Fixed Slide Blog Pager And Hover Slide Page Title - Adalah salah satu alternatif yang dapat kita coba untuk menciptakan 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 saat halaman di-scroll ke bawah.

Dan selanjutnya saat tanda panah untuk next dan prev post ini di-hover, maka akan muncul judul postingan sebelumnya atau judul postingan selanjutnya dengan pengaruh 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.

DEMO

Nah bagi yang ingin mencobanya, silahkan gunakan kode-kode di bawah ini.

Kode CSS

Simpan arahan CSS khusus untuk halaman postingan ini di bawah kode CSS skin blog atau di atas arahan </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:#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 arahan 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 + &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>
   <div class='clear'/>
 </b:includable>

Lalu arahan <data:newerPageTitle/> silahkan ganti dengan kode ⇤ dan arahan <data:olderPageTitle/> silahkan ganti dengan kode ⇥

Kode Javascript

Silahkan simpan arahan javascript di bawah ini di atas arahan </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>&#8676;</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>&#8677;</h6><h7>"+e+"</h7>")})});
 //]]>
 </script>

Bagi yang sebelumnya sudah memakai custom blog pager, silahkan ganti arahan javascript custom blog pager sebelumnya dengan arahan javascript di atas.

Untuk selanjutnya Anda dapat mengkustomisasi tampilannya dengan menyesuaikan pada arahan CSS di atas semoga sesuai dengan selera Anda.

Sumber https://www.kompiajaib.com/

Share this post