Cara Membuat Next - Previous di bawah Posting Blogger dengan Judul Posting. ~ Gudang ITE

Oke kali ini saya akan Membagikan sebuah Tips Cara Membuat Next - Previous page. Jika diterjemahkan ke bahasa indonesia, maka adalah halaman sebelumnya dan halaman selanjutnya. Umunya ini Widget ini diletakkan dibawah postingan blog tepatnya diatas Related Post.

Screenshoot :

Umunya para blogger, meletakkan Widget yang satu ini, dibagian Related Post atau dibawah Data Post Body. Widgetnya sangat penting dikarenakan memudahkan pengunjung lebih melihat artikel selanjutnya tanpa pergi ke home page blog. Bagaimana cara membuatnya? Oke langsung saja kita praktekan..

Cara Pertama :
1. Buka Blogger -> Login!
2. Dashboard -> Template -> Edit HTML.
3. Temukan kode ]]></b:skin>
4. Copy-paste kode berikut ini, dan lettakan diatas kode ]]></b:skin>

/* Widget By BloggingPasuruan Redesigned By gudangite */
.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;}

5. Jika sudah? Pasang Jqueri Java Script. Temukan dan Cari kode <head> 6. Copy-Paste kode berikut ini, dan letakkan bawah kode <head>

6. Kemudian Temukan Kode <data:post.body/> . Biasanya kode ini lebih dari satu, letakan saja yang kedua atau yang ketiga.
Cara Alternatif : Temukan kode <div class='post-footer'> . Jika bisa, letakkan dibawah atau diatas Related Post. Untuk kode <div class='post-footer'> letakkan diatas kode berikut ini.

7. Copy-Paste kode berikut ini, dan letakkan dibawah kode yang disebutkan diatas.

<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>

8. Simpan Template!

Bagaimana? Mudah bukan! Jika terjadi kesalahan, silakan jangan ragu-ragu untuk berkomentar. Jika tertarik dengan Tutorial Blogger diatas, silakan Share ke sosial media ke teman anda. Terima kasih atas kunjungan nya. Semoga Bermanfaat!

Gudang ITE

Cara Membuat Next - Previous di bawah Posting Blogger dengan Judul Posting.

Label