Fixed Slide Related Post Dan New Post Keren
Selamat datang agan/aganwati kali ini saya akan membahas Fixed Slide Related Post Dan New Post Keren Di Postingan Blog Ini adalah cara alternatif utk menambah fitur keren blog yang bisa kita buat dengan sedikit tampil berbeda dan lebih keren lagi. Dan selanjutnya kita ada tanda panah next atau previous dengan efek slide untuk artikel lama atau artikel terbaru , dengan ini juga akan semakin efektif dan pengunjung pun lebih gampang untuk mencari artikel terlama/paling baru baiklah langsung saja ini dia cara-caranya:
lIHAT SEPERTI APA:
CARA PEMASANGANNYA:
1. Agan/aganwati taruh kode css dibawah ini diatas 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>
2. Silahkan agan cari di dashboard agan kode seperti 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>
Catatan :Lalu kode <data:newerPageTitle/> ganti dengan kode ⇤ dan
kode <data:olderPageTitle/>
silahkan ganti dengan kode ⇥
3. Silahkan simpan kode javascript dibawah 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>⇤</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>
4. Coba lihat hasilnya gan....
Sekian artikel dari saya jika kurang paham silahkan tanyakan di komentar bawah sekian dan terimakasih, selamat mencoba !!!