#Cara Membuat Next/Prev Dengan Judul Dibawah Artikel!

Awaknyo >>

Cara Membuat Next/Prev Dengan Judul Dibawah Artikel!

Selamat datang, hai sob pada kesempatan ini kita mau share tentang cara membuat tombol next dan previsios atau tombol sebelumnya dan tombol selanjutnya dengan judul artikel serta script ini ringan dan responsif seperti diblog ini. fungsi tombol next prev ini untuk memberi informasi pada pembaca agar mereka tertarik membaca artikel lain diblog kita dan berlama lama. semakin lama semakin bagus untuk blog kita. caranya sangat mudah sekali ikuti tutorial berikut ini:

1. log in ke blogger.com
2. pilih template > edit html
3. letakkan kode berikut daatas</style>

/* next page with title */
.bloggingpasuruan-pager { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;  margin-bottom: 10px;   overflow:hidden; padding:1px;}
.bloggingpasuruan-pager li.selanjutnya { height:120px; float: right; padding:0px; background:none; margin:0px;}
.bloggingpasuruan-pager li.selanjutnya a { padding-left: 24px; }
.bloggingpasuruan-pager li.sebelumnya { height:114px; margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;
}
.bloggingpasuruan-pager li.sebelumnya a { padding-right: 24px;  }
.bloggingpasuruan-pager li.selanjutnya:hover, .bloggingpasuruan-pager li.sebelumnya:hover  {background:#000000; }
.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: 14px; }
.bloggingpasuruan-pager li a strong { display: block; font-size: 15px; color: #ccc; letter-spacing: 0.1px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.bloggingpasuruan-pager li a span { font-size: 14px; 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.sebelumnya i { float:left; margin-top:15%; margin-left:5%; }
.bloggingpasuruan-pager li.selanjutnya i { float: right;
margin-top: 15%;
margin-right: 5%; }
.bloggingpasuruan-pager li.selanjutnya i, .bloggingpasuruan-pager li.sebelumnya i ,
.bloggingpasuruan-pager li.selanjutnya,  .bloggingpasuruan-pager li.sebelumnya{
-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. cari <data:post.body/>

5. paste kode berikut di bawahnya, cari script share media sosial anda dan paste dibawahnya

<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='selanjutnya'>
    <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>Lihat yg disebelumnya</strong> <span>Kamu Sedang Melihat Artikel Terbaru!</span></a>
    </b:if>
    </li>
        <li class='sebelumnya'>
    <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>Lihat yg Selanjutnya</strong> <span>Kamu Sedang Melihat Artikel Pertama!</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>selanjutnya</strong> <span>'+$(data).find('.post h1.post-title').text()+'</span>');
        },"html");
        $.get(olderLink.attr('href'), function (data2) {
         olderLink.html('<strong>sebelumnya</strong> <span>'+$(data2).find('.post h1.post-title').text()+'</span>');
        },"html");
    })(jQuery);
    //]]>
    </script>
          </b:if></b:if>

7. save template


itulah cara membuat next prev dengan judul postingan yang responsive dan ringan, semoga bisa dimanfaatkan dan meningkatkan kualitas blog anda. semoga bermanfaat sob.

Berbagi :