Bagi para blogger, membuat Widget navigasi Next - Previous dengan judul posting di blog merupakan hal yang sangat penting. Biasanya penempatannya ada di atas atau di bawah Related Post atau Data Post Body.
Widget ini di rasa sangat penting dikarenakan dapat memudahkan pengunjung untuk melihat artikel yang lalu atau selanjutnya tanpa harus kembali ke home page blog.
 |
| Next Previous |
1. Buka Blogger -> lanjut login!
2. Masuk Dashboard -> Template -> Edit HTML.
3. Temukan kode ]]></b:skin>
4. Copy-paste kode berikut ini, dan lettakan diatas kode ]]></b:skin>
/* Widget By SM */
.SM-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd; margin-bottom: 10px; overflow:hidden; padding:0px;}
.SM-pager li.next { height:114px; float: right; padding:0px; background:none; margin:0px;}
.SM-pager li.next a { padding-left: 24px; }
.SM-pager li.previous { height:114px;margin:0px -2px 0px 0px; float: left; border-right:1px solid #ddd; padding:0px; background:none;
}
.SM-pager li.previous a { padding-right: 24px; }
.SM-pager li.next:hover, .SM-pager li.previous:hover {background:#576269; }
.SM-pager li { width: 50%; display: inline; float: left; text-align: center; }
.SM-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.SM-pager li i { color: #ccc; font-size: 18px; }
.SM-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.SM-pager li a span { font-size: 15px; color: #666; font-family:oswald,Helvetica, arial;margin:0px;}
.SM-pager li a:hover span,
.SM-pager li a:hover i { color: #ffffff; }
.SM-pager li.previous i { float:left;margin-top:15%; margin-left:5%; }
.SM-pager li.next i { float: right;
margin-top: 15%;
margin-right: 5%; }
.SM-pager li.next i, .SM-pager li.previous i ,
.SM-pager li.next, .SM-pager li.previous{
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }
.fa-chevron-right {padding-right:0px;}
5. Jika sudah, pasang Jqueri Java Script. Temukan dan Cari kode <head>. Copy-Paste kode berikut ini, dan letakkan bawah kode <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'/>
6. Kemudian cari kode <data:post.body/> . Biasanya kode ini lebih dari satu, letakan saja yang kedua atau yang ketiga.
Cara Alternatif : Temukan kode <div class='post-footer'> . Letakkan kode berikut ini di atasnya.
Atau bisa juga dengan meletakkan dibawah atau diatas Related Post.
7. Copy-Paste kode berikut ini, dan letakkan dibawah kode yang disebutkan diatas.
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<ul class='SM-pager'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' />
<b:else/>
<i class='fa fa-chevron-right'/><a ><strong>Next</strong> <span>You are viewing Most Recent Post</span></a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' />
<b:else/>
<i class='fa fa-chevron-left'/><a ><strong>Previous</strong> <span>You are viewing Last Post</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></b:if>
8. Simpan Template! Nah, sekarang silahkan cek postingan sobat, apakah sudah ada Next - Previousnya? Jika sudah, berarti sobat berhasil melewati rintangan yang maha berat, hehehe...
Namun jika tidak berhasil, jangan ragu-ragu untuk bertanya di kolom komentar, sebisa mungkin Mang Admin akan menjawab semampunya.
Demikian cara membuat Widget navigasi Next - Previous dengan judul posting yang cukup mudah ini, semoga bermanfaat.
Selamat mencoba!
Tidak ada komentar:
Posting Komentar