Mengganti Next Previous Page dengan Judul Posting Blog

Mengganti Next Previous Page dengan Judul Posting Blog

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.

Mengganti Next Previous Page dengan Judul Posting Blog

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 == &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <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 + &quot;_blog-pager-newer-link&quot;' />
    <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 + &quot;_blog-pager-older-link&quot;' />
    <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…
Share this with short URL: Get Short URLloading short url

Nama saya Usman Kurniawan dari Pasuruan - jawa timur dan bukan seorang Blogger Pro, Namun saya akan serius belajar jika menyukai sesuatu hal, termasuk dunia blogging.

Previous
Next Post »

2 comments

Write comments
Aashi siva
AUTHOR
June 14, 2017 at 12:06 AM delete

I do trust all of the concepts you’ve presented on your post. They’re really convincing and will definitely work. Still, the posts are too brief for newbies. May you please extend them a little from subsequent time?Also, I’ve shared your website in my social networks.
Sharepoint Training in Chennai
SEO Training in Chennai
Selenium Training in Chennai

Reply
avatar
August 24, 2017 at 12:03 PM delete

Wih ada juga blogger dari pasuruan, salam om dari pasuruan-community(.)blogspot(.)com

Reply
avatar