Cara Membuat Next-Previous Buttons Simple di Bawah Postingan Hanya Menampilan Judul

Tombol Next-Previous Buttons ini bisa dibilang sama dengan Tombol Next-Previous Navigasi pada Home Page yang terdapat dibawah postingan. Tujuan dari pemasangan Next-Previous ini adalah agar pengunjung lebih mudah dan leluasa menjelajahi seluruh isi blog anda. Selain untuk memudahkan pengunjung, Tombol Next-Previous ini memudahkan pengunjung untuk melihat Artikel sebelumnya atau selanjutnya tanpa harus kembali ke home page. Untuk Tombol Next-Previous kali ini hanya menampilkan judul saja, fungsinya sama yaitu memancing pengunjung untuk melihat artikel sebelumnya dan artikel selanjutnya.

Baca Juga :

Beginilah Cara Membuat Link Aktif pada Komentar Blogger

Menurut -master seo, Secara logika memasang tombol next-previous ini cukup berhubungan dengan SEO karena jika Anda mengganti next-previous dengan judul postingan, sesudah atau sebelumnya. Mungkin ada pengunjung yang tertarik untuk membaca dan mengklik judul tersebut, otomatis jumlah pageviews akan bertambah.

Screenshoot :

Cara Membuat Next-Previous dibawah Postingan Hanya Menampilkan Judul saja

Cara Membuat Next-Previous Buttons Simple di Bawah Postingan Hanya Menampilan Judul

Cara Pertama :

1. Buka Blogger - Kemudian login.

2. Dashboard - Template.

3. Edit HTML.

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>

2. Copy&paste kode berikut ini, dan letakkan diatas kode ]]></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; }

3. Jika sudah? Pasang Font berikut ini, jika sudah memasangnya silakan langkah ini di lewati saja.
4. Copy&paste kode berikut ini, dan letakkan diatas </head> atau <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'/>

5. Temukan lagi kode <b:includable id='nextprev'>...</b:includable>

Sebelumnya kode tersebut, seperti dibawah ini!

<b:includable id='nextprev'>
  <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:includable>

6. Silakan Anda ganti dengan kode berikut ini.-
7. Copy&paste kode berikut ini, dan Temukan kode <b:includable id='nextprev'> lalu ganti dengan kode dibawah 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. Jika sudah, Temukan kode <data:post.body/>
9. Copy&Paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>

|Wajib Baca :

Kode ini biasanya lebih dari satu, silakan anda pilih yang kedua/ketiga. Anda juga bisa meletakan kode berikut ini diatas Related Post atau dibawah tombol share-buttons
(Jika memasangnya)

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

Demikianlah Tutorial Blogger kali ini, bila terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat postingan anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Next-Previous Buttons Simple di Bawah Postingan Hanya Menampilan Judul

Andriyansyah28 January 2017 at 00:33
Kalau judulnya tidak tampil itu gimana ya?
mizipediacom20 August 2017 at 14:45
thanks gan, work kodenya.
KINIPEDIA1 December 2017 at 13:17
mantab
Unknown20 December 2017 at 16:37
Terbaik
Palz25 January 2018 at 10:41
Terimakasih Cekgu :D
Nako8 March 2018 at 03:47
untuk itu next page sesuai nomor urut posting nah klw agar next previw'a sesuai nomor urut label gmna ya gan.. bohon di bls gan..
Teguh De19 June 2018 at 12:11
Tutorialnya mudah diikuti, namun di Blog saya hasilnya kurang lengkap. Ada bagian yang tidak muncul. Semua sudah saya ikuti dengan seksama. www.sekaaringidep.blogspot.com. Mohon dicroscek. Dan Terima kasih.
Alif Meylinda21 July 2018 at 14:38
Mungkin saudara bisa membenahi penggunaan bahasa sesuai EYD agar tidak membingungkan. Saya sudah mencoba dan ternyata di blog saya tetap tidak ada tombol next dan previous.
Dava23 July 2021 at 13:22
Thanks bang

Work kodenya
Anonymous13 March 2022 at 12:44
Cara Membuat Next-Previous Buttons Simple Di Bawah Postingan Hanya Menampilan Judul - Maycyber- >>>>> Download Now

>>>>> Download Full

Cara Membuat Next-Previous Buttons Simple Di Bawah Postingan Hanya Menampilan Judul - Maycyber- >>>>> Download LINK

>>>>> Download Now

Cara Membuat Next-Previous Buttons Simple Di Bawah Postingan Hanya Menampilan Judul - Maycyber- >>>>> Download Full

>>>>> Download LINK

Cara Membuat Next-Previous Buttons Simple di Bawah Postingan Hanya Menampilan Judul

13 Responses to "Cara Membuat Next-Previous Buttons Simple di Bawah Postingan Hanya Menampilan Judul"