1 Next Previous Sederhana di Blog

Assalamu'alaikum kawan, apa kabar hari ini ? Tentu baik saja bukan...?

Lama juga tidak update blog, maklum ada beberapa blog yang harus di perbaiki karena usang ... cciieeee iiillllaaaa ... usang katanya... hahahahaaaa :)

Kawan kali ini admin akan posting tentang cara membuat button / tombol Next Previous di blog, mongooo disimak... bro and sista. 👀

Langkah awal temukan kode berikut ]]></b:skin> atau </style>

Lalu paste CSS berikut tepat diatasnya

.pagebutton-nextprevious {margin-bottom: 10px;   overflow:hidden; padding:0;margin-right:5px;margin-left:5px;}


.pagebutton-nextprevious li.next { margin:0 -2px 0 0; float: left;  border-right:1px solid #ddd; padding:0; background:#fff;color:#444;}

.pagebutton-nextprevious li.next a { padding-left: 15px;text-align:left;padding-bottom:20px}

.pagebutton-nextprevious li.previous {float: right; padding:0; background:#fff; margin:0;color:#444}

.pagebutton-nextprevious li.previous a { padding-right:15px; text-align:right;padding-bottom:20px }

.pagebutton-nextprevious li.next:hover, .pagebutton-nextprevious li.previous:hover  {background:#fff;color:#ccc }

.pagebutton-nextprevious li { width: 50%; display: inline; float: left; text-align: center; }

.pagebutton-nextprevious li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}

.pagebutton-nextprevious li i { color: #444; font-size: 18px; }

.pagebutton-nextprevious li a strong { display: block; font-size: 20px; color: #444; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}

.pagebutton-nextprevious li a span { font-size: 15px; color: #444;  font-family:oswald,Helvetica, arial; margin:0;}

.pagebutton-nextprevious li a:hover span,

.pagebutton-nextprevious li a:hover i { color: #c00; }

.pagebutton-nextprevious li.previous i { float:left; margin-top:15%; margin-left:5%; }

.pagebutton-nextprevious li.next i { float: right;margin-top: 15%;margin-right: 5%; }

.pagebutton-nextprevious li.next i, .pagebutton-nextprevious li.previous i ,

.pagebutton-nextprevious li.next,  .pagebutton-nextprevious li.previous{transition-duration: 0.4s; transition-timing-function: ease-out; }

Jika selesai lanjutkan dengan mencari tag </head> kemudian paste kode dibawah ini diatas tag tersebut

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

Jika di blog sudah terpasang jquery lewati langkah ini

Lalu temukan kode <b:includable id='nextprev'>...</b:includable> dan hapus semua

Lalu ganti dengan kode dibawahini

<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>

</b:if>
</b:if>
</b:includable>

Selanjutnya temukan kode <data:post.body/> lalu paste kode dibawah ini dibawah kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class='pagebutton-nextprevious'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='buttonside-left'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next' title='Artikel Selanjutnya'/>
<b:else/>
<i class='buttonside-left'/><a rel='next'><strong>Next</strong> <span>This is the current newest page</span></a>
</b:if>
</li>

<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='buttonside-right'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous' title='Artikel Sebelumnya'/>
<b:else/>
<i class='buttonside-right'/><a rel='previous'><strong>Previous</strong> <span>This is the current oldest page</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>

Silahkan tempatkan HTMLnya dimana pun yang kawan inginkan

selesai bro and sista...untuk demo bisa lihat animasi dibawah ini ya...

1 Next Previous Sederhana di Blog

Contact Form