Membuat navigasi postingan seperti wordpress
Kembali lagi Saya berbagi sebuah CSS hasil backup-an yakni Navigasi pada laman postingan yang selama ini saya gunakan. Sebelum mencoba hal-hal baru, saya membackup dulu agar nantinya bisa saya gunakan lagi di lain waktu.
Navigasi ini bisa di katakan mirip dengan Navigasi postingan pada ordpress, meskipun ga mirip-mirip amat sih. Tapi lumayan lah.
Navigasi ini adalah perpaduan antara CSS dengan sedikit sentuhan Jquery yang mampu menampilkan judul postingan Berikutnya dan judul postingan Sebelumnya. Untuk lebih jelasnya, berikut penampakannya,
Langkah penerapannya,
Jquery
Jika template kamu sudah terpasang Jquery, tahap ini bisa di lewati, jika belum, tempatkan kode ini sebelum kode </head> atau setelah kode <head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>
Font
Untuk Font saya menggunakan font Oswald.
Tempatkan kode CSS font ini di bawah kode <head> pada template.
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
Jika pada template kamu sudah menggunakan font Oswald, langkah ini bisa di lewati.
CSS navigasinya
Ini lah CSS navigasinya. Letakkan kode CSS ini antara <b:skin><![CDATA[ dengan ]]></b:skin> atau antara <style> dengan </style> pada template.
.navigasi {
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),inset 0 15px 17px rgba(255,255,255,0.5),inset 0 -5px 12px rgba(0,0,0,0.05);
margin:20px auto 10px;
overflow:hidden;
padding:0;
border:solid 1px #EEE;
}
.navigasi li.next {
float:right;
padding:0;
background-color:transparent;
margin:0;
}
.navigasi li.next a {
padding-left:24px;
}
.navigasi li.previous {
margin:0 -2px 0 0;
float:left;
border-right:1px solid #BBB;
padding:0;
background-color:transparent;
}
.navigasi li.previous a {
padding-right:24px;
}
.navigasi li.next:hover,
.navigasi li.previous:hover {
color:#483D8B;
}
.navigasi li {
width:50%;
display:inline;
float:left;
text-align:center;
}
.navigasi li a {
position:relative;
min-height:50px;
display:block;
padding:15px 40px;
outline:none;
text-decoration:none;
}
.navigasi li i {
color:#bbb;
font-size:24px;
}
.navigasi li a strong {
display:block;
font-size:26px;
color:#bbb;
letter-spacing:0.5px;
font-weight:bold;
text-transform:uppercase;
font-family:"Oswald",sans-serif;
}
.navigasi li a span {
font-size:15px;
color:#666;
font-family:"Oswald",sans-serif;
}
.navigasi li a:hover span,
.navigasi li a:hover i {
color:#0066B3;
}
.navigasi li.previous i {
float:left;
margin:30px 0 auto 5px;
}
.navigasi li.next i {
float:right;
margin:30px 5px auto 0;
}
.navigasi li.next i,
.navigasi li.previous i,
.navigasi li.next,
.navigasi li.previous {
transition-duration:0.4s;
transition-timing-function:ease-out;
}
.fa fa-chevron-right {
padding-right:0 !important;
}
Ikon pada navigasinya
Untuk ikonnya, saya menggunakan Font Awesome.
Kode HTML
Untuk kode HTMLnya, letakan kode di bawah ini di bawah <data:post.body/> atau tempatkan di bawah perintah Readmore jika kamu menggunakan auto-Readmore pada blog.
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><ul class='navigasi'><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>Tidak Tersedia</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>Prev</strong> <span>Tidak Tersedia</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 h2.post-title').text()+'</span>');},"html"); $.get(olderLink.attr('href'), function (data2) { olderLink.html('<strong>Prev</strong> <span>'+$(data2).find('.post h2.post-title').text()+'</span>');},"html");})(jQuery);
//]]>
</script></b:if></b:if>
Simpan template dan lihat hasilnya.
0 komentar:
Post a Comment
Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.