1 Next Previous Sederhana di Blog

1 Next Previous Sederhana di Blog

1 Next Previous Sederhana di Blog

infoalya.com

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...
infoalya.com


Share On:

You Might Also Like:

This Is The Newest Post
Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed
This Is The Newest Post

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×