Bloggingpasuruan - Kali saya akan memberikan tips bagaimana cara mengganti next dan previous page atau umum disebut halaman berikutnya dan halaman sebelumnya. Umumnya ini terdapat pada bagian bawah postbody yang tampilannya terdapat beranda di posisi tengah atau diantara halaman berikutnya dan sebelumnya.
Dan kita akan memodifikasi tampilan default ( bawaan blogger ) seperti gambar diatas menjadi tampilan lebih keren.
Lihat DEMO
Berikut ini Cara Mengganti Next Previous Page dengan Judul Posting di Blogger
1.Masuk ke a kun Blogger Anda
2.Pilih Dashbord >> Templete >> Edit Html
3.Cari kode ]]></b:skin>, kemudian letakkan kode dibawah ini sebelum kode ]]></b:skin>
CCS - BLOGGINGPASURUAN
/* Bloggingpasuruan replace previous and next page to title */
.bloggingpasuruan-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd; margin-bottom: 10px; overflow:hidden; padding:0px;}
.bloggingpasuruan-pager li.next { height:114px; float: right; padding:0px; background:none; margin:0px;}
.bloggingpasuruan-pager li.next a { padding-left: 24px; }
.bloggingpasuruan-pager li.previous { height:114px; margin:0px -2px 0px 0px; float: left; border-right:1px solid #ddd; padding:0px; background:none;
}
.bloggingpasuruan-pager li.previous a { padding-right: 24px; }
.bloggingpasuruan-pager li.next:hover, .bloggingpasuruan-pager li.previous:hover {background:#576269; }
.bloggingpasuruan-pager li { width: 50%; display: inline; float: left; text-align: center; }
.bloggingpasuruan-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.bloggingpasuruan-pager li i { color: #ccc; font-size: 18px; }
.bloggingpasuruan-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.bloggingpasuruan-pager li a span { font-size: 15px; color: #666; font-family:oswald,Helvetica, arial; margin:0px;}
.bloggingpasuruan-pager li a:hover span,
.bloggingpasuruan-pager li a:hover i { color: #ffffff; }
.bloggingpasuruan-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
.bloggingpasuruan-pager li.next i { float: right;
margin-top: 15%;
margin-right: 5%; }
.bloggingpasuruan-pager li.next i, .bloggingpasuruan-pager li.previous i ,
.bloggingpasuruan-pager li.next, .bloggingpasuruan-pager li.previous{
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }
.fa-chevron-right {padding-right:0px;}
4.Setelah itu cari kode <head> letakkan kode dibawah ini tepat dibawah kode <head>
LINKS - BLOGGINGPASURUAN
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
5.Kemudian cari <data:post.body/>, pada template umumnya terdapat lebih dari satu tag <data:post.body/>.Letakkan kode dibawah ini pada <data:post.body/> yang ke dua atau yang ke tiga.
HTML + jQuery - BLOGGINGPASURUAN
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<ul class='bloggingpasuruan-pager'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' />
<b:else/>
<i class='fa fa-chevron-right'/><a ><strong>Next</strong> <span>You are viewing Most Recent Post</span></a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' />
<b:else/>
<i class='fa fa-chevron-left'/><a ><strong>Previous</strong> <span>You are viewing Last Post</span></a>
</b:if>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h1.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h1.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
</b:if></b:if>
6.Kemudian Simpan template… selesai,dan lihat hasilnya
Jika ada masalah terkait tutorial Cara Mengganti Next Previous Page dengan Judul Posting, silahkan tinggalkan pesan pada kotak komentar di bawah ini. Dan jika Anda tertarik dengan tutorial diatas mohon bantuannya untuk share ke social media dibawah ini, terima kasih atas kunjungannya…