Membuat Custom Blog Pager Di Postingan Blog
Kini sudah banyak custom template yang telah memakai custom blog pager di postingannya. Dengan custom blog pager, kita dapat menampilkan blog pager di mana saja menyerupai di atas postingan atau di bawah postingan (di antara postingan dan komentar) atau bahkan ditampilkan di keduanya. Ada pula yang mengganti link next post dan previous post dengan judul postingan menyerupai yang akan aku share kali ini.
Bagi yang template blognya masih memakai blog pager default Blogger atau blog pager lama, Anda dapat mencoba memakai custom blog pager ini menyerupai yang terlihat pada screenshot di bawah ini atau silahkan coba pada demonya. Custom blog pager ini juga sekarang aku gunakan di Kompi Ajaib, dapat Anda lihat di bawah postingan ini.
Bagi yang ingin mencobanya silahkan copy kode-kode di bawah ini.
Kode CSS
Silahkan ganti aba-aba CSS blog pager sebelumnya dengan aba-aba CSS di bawah ini
.halaman{margin-top:20px;padding:0;background:#e9e9e9}
.halaman-kiri{width:50%;background:none;float:left;margin:0;padding-bottom:10px;text-align:left;color:#333;transition:all .3s ease-in-out;}
.halaman-kanan{width:50%;background:none;float:right;margin:0;padding-bottom:10px;text-align:right;color:#333;transition:all .3s ease-in-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:red!important}
.halaman-kanan a:hover,.halaman-kiri a:hover{color:red!important;}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px; font-family: 'Open Sans', Helvetica, Arial, sans-serif;font-weight:700;background:none;text-decoration:none}
.halaman-kiri a,.halaman-kanan a{color:#333;}
.pager-title-left{font-family: 'Trebuchet MS', sans-serif;font-size:28px;text-transform:uppercase;font-weight:700;transition:all .3s ease-in-out}
.isihalaman-kiri{margin:5px 10px 10px}
.isihalaman-kanan{margin:5px 10px 10px}
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
.blog-pager,#blog-pager{clear:both;text-align:center}
.feed-links{clear:both;line-height:2.5em}
Kemudian silahkan cari aba-aba menyerupai di bawah ini
<b:includable id='nextprev'>
........
........
</b:includable>
Setelah ketemu silahkan ganti dengan aba-aba di bawah ini
<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
</b:if>
</b:if>
<div class='clear'/>
</b:includable>
Kemudian silahkan cari aba-aba menyerupai di bawah ini (biasanya berada persis di bawah aba-aba di atas).
<b:includable id='post' var='post'>
........
........
</b:includable>
Silahkan simpan aba-aba di bawah ini sempurna di atas epilog aba-aba di atas </b:includable>.
<b:if cond='data:blog.pageType == "item"'>
<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'>
<span class='pager-title-left'>Next</span><br/>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>« Prev Post</a>
</span>
<b:else/>
<span class='current-pageleft'><span class='pager-title-left'>Next</span><br/>This is the current newest page</span>
</b:if>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<span class='pager-title-left'>Previous</span><br/>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Next Post »</a>
</span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>Previous</span><br/>This is the oldest page</span>
</b:if>
</div>
</div>
</div>
<div style='clear: both;'/>
</div>
</b:if>
Kemudian simpan aba-aba javascript di bawah ini di atas aba-aba </body>
<script type='text/javascript'>
$(document).ready(function(){
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle);//rgt
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
});
</script>
Setelah itu silahkan SAVE template-nya dan lihat risikonya di postingan blog Anda. Selamat mencoba....
Sumber https://www.kompiajaib.com/
0 Response to "Membuat Custom Blog Pager Di Postingan Blog"
Posting Komentar