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 :
4. Copy&paste kode berikut ini, dan letakkan diatas </head> atau <head>
Sebelumnya kode tersebut, seperti dibawah ini!
7. Copy&paste kode berikut ini, dan Temukan kode <b:includable id='nextprev'> lalu ganti dengan kode dibawah ini.
9. Copy&Paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>
|Wajib Baca :
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
Baca Juga :
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 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>
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; }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'/>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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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>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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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>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)
(Jika memasangnya)
<b:if cond='data:blog.pageType == "item"'>
<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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>
