Cara Mengganti Next Previous Page dengan Judul Posting
Info Blog News.. 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
seperti pada gambar dibawah ini
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 - Info Blog News
/* 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>
LINK - Info Blog News
<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 atau CCS - Info Blog News
<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…