Praktek ini akan membahas penerapan tombol NEXT and PREVIOUS, tombol ini biasanya berada di bawah artikel, tombol ini terkadang hanya berupa tombol NEXT and PREVIOUS saja, ada juga yang menyertakan judul artikel yang menjadi tujuan tombol tersebut seperti pada gambar berikut :
Itulah sekilas gambaran praktek yang akan kita terapkan di blog anda, jika anda sudah paham mari simak praktek berikut step by step :
Pertama : Masuk ke Blogger > Template
Kedua : Backup template anda terlebih dahulu untuk menghindari kekeliruan saat penerapan
Ketiga : Pilih (Edit HTML)
Keempat : Copy kata berikut ]]> </ b: skin> kemudian Tekan
Ctrl + F dan tekan kontrol Ctrl V dan tekan Enter
kalau sudah ketemu sisipkan kode di bawah ini di atas kode yang kita cari tadi yaitu ]]></:skin> :
.mbt-pager {
border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd; margin-bottom: 10px; overflow:hidden; padding:0px;}
.mbt-pager
li.next { float: right; padding:0px; background:none; margin:0px;}
.mbt-pager
li.next a { padding-left: 24px; }
.mbt-pager
li.previous { margin:0px -2px 0px 0px; float: left; border-right:1px solid #ddd; padding:0px;
background:none;
}
.mbt-pager
li.previous a { padding-right: 24px; }
.mbt-pager
li.next:hover, .mbt-pager li.previous:hover
{background:#333333; }
.mbt-pager li {
width: 50%; display: inline; float: left; text-align: center; }
.mbt-pager li a
{ position: relative; min-height: 77px; display: block; padding: 15px 46px
15px; outline:none; text-decoration:none;}
.mbt-pager li i
{ color: #ccc; font-size: 18px; }
.mbt-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;}
.mbt-pager li a
span { font-size: 15px; color: #666;
font-family:oswald,Helvetica, arial; margin:0px;}
.mbt-pager li
a:hover span,
.mbt-pager li
a:hover i { color: #ffffff; }
.mbt-pager
li.previous i { float:left; margin-top:15%; margin-left:5%; }
.mbt-pager li.next
i { float: right;
margin-top:
15%;
margin-right:
5%; }
.mbt-pager
li.next i, .mbt-pager li.previous i ,
.mbt-pager
li.next, .mbt-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;}
Kelima : Tambahkan font Oswald. Cari kode <head> dan sisipkan kode berikut
tepat di bawahnya :
<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'/>
Catatan : Jika template anda sudah terpasang kode di atas lewatkan saja.
Keenam: kita akan menambahkan kode HTML yang akan menempatkan posisi halaman di bagian bawah posting blog anda, caranya cari kode <data:post.body/> dan paste kode HTML berikut tepat di bawahnya :
<b:if cond='data:blog.pageType
== "item"'>
<b:if cond='data:blog.pageType
!= "static_page"'>
<ul class='mbt-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"'
rel='next'/>
<b:else/>
<i class='fa
fa-chevron-right'/><a rel='next'><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"'
rel='previous'/>
<b:else/>
<i class='fa
fa-chevron-left'/><a
rel='previous'><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 h3.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function
(data2) {
olderLink.html('<strong>Previous</strong>
<span>'+$(data2).find('.post
h3.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
</b:if></b:if>
Terahir : Save dan lihat hasilnya.
sekian praktek kali ini semoga bermanfaat.
0 komentar:
Post a Comment