Cara Membuat Next - Previous Button di Bawah Artikel Blog #1


Cara Membuat Tombol Next-Prev di Bawah Artikel Blog #1



SCREENSHOT :
Cara Membuat Next - Previous Button di Bawah Artikel Blog

Langkah - langkah :
1. Login ke Akun Blogger milik sobat

2. Pilih Tema atau Template

3. Edit HTML

4. Cari kode ]]</b:skin> atau </style>
    Gunakan CTRL + F untuk mempermudah pencarian

5. Copy kode CSS di bawah ini, kemudian letakkan di atas ]]</b:skin> atau </style>
/* Next-Previous Design MayCyber-Download */
.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; }
6. Pasang Font JQUERY di bawah ini tepat di antara tag <head> dan </head>

<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'/>
7. Cari lagi kode <b:includable id='nextprev'> 

Atau agar mempermudah, lihat kode yang seperti ini :

<b:includable id='nextprev'> 
<div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'>
...
...
...
...
</div> <div class='clear'/>
</b:includable>


Silahkan ganti kode tersebut dengan kode d
bawah ini

<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>
8. Cari Lagi Kode <data:post.body/>

Catatan : 
Biasanya kode ini lebih dari satu, pilih yang kedua atau yang ketiga, atau sesuai dengan selera sobat.

9. Copy Script di bawah ini letakkan di bawah  <data:post.body/>

<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>
10. Simpan


Itulah cara Membuat Tombol Selanjutnya dan Sebelumnya di Bawah Artikel Blog , Jika ada yang kurang paham, silahkan tanyakan di komentar atau hubungi kami.

Semoga Artikel ini Bermanfaat.
Salam.

sumber: MAYCYBER-DOWNLOAD


0 Response to "Cara Membuat Next - Previous Button di Bawah Artikel Blog #1"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel