Script Keren Untuk Menampilkan Halaman Dalam BOX (Prev-Next)

Mungkin Anda pernah melihat sebuah situs atau blog terdapat kotak berisi tulisan dan atau disertai gambar. Dibawah box itu ada tombol untuk loncat ke halaman berikutnya serta tombol next dan previous.

Hasil dari widget ini akan seperti yang pernah Anda lihat itu. Disini Anda bisa membuatnya tampil secara otomatis dengan menggunakan feed post. Akan tetapi untuk tutorial kali ini baru saya share untuk yang manual saja dulu.

Silahkan Anda modifikasi sendiri jika perlu ada yang ditambahkan dan berikut kode sumbernya.
jQuery Eksternal
<script type="text/javascript" src="http://britha.com/Upload/MyFile/jquery-1.2.2.pack.js"></script>
HTML
<div id="divkontan" class="fadekonten_wrap">

<div class="fadekonten">
<h4>Cara Blokir Email Tertentu pada Form Input</h4>
Tutorial kali ini masih serupa dengan yang saya bagikan beberapa saat yang lalu. Bedanya dengan yang ini, Anda bisa mengontrol lebih spesifik untuk email yang dimasukkan.<br /><br />
Setting utama untuk javascript ini terletak pada bagian larangMail. Bisa Anda lihat kode-kode yang seperti ini:<br />
<a href="http://www.kangsigit.com/2015/12/cara-blokir-email-tertentu-pada-form.html">&raquo; Baca selengkapnya..</a>
</div>

<div class="fadekonten">
<h4>Widget Hitung Mundur Tahun Baru 2016 di Blog</h4>
Ini adalah artikel kedua dengan topik yang sama dari tulisan saya pada mei, 2015 dengan judul Membuat Countdown Timer Menjelang Tahun Baru 2016 (Hitungan Mundur)
<br /><br />
Karena menurut saya widget ini banyak dicari oleh sebagian besar blogger yang peduli terhadap tahun baru, maka saya lakukan repost disini.<br />
<a href="http://www.kangsigit.com/2015/12/pasang-widget-hitung-mundur-tahun-baru.html">&raquo; Baca selengkapnya..</a>
</div>

</div>

<div id="whatnewstoggler" class="fadetoggler">
<a href="#" class="prev">Prev </a>
<a href="#" class="toc">Halaman 1</a> <a href="#" class="toc">Halaman 2</a> <a href="#" class="toc">Halaman 3</a>
<a href="#" class="next"> Next</a>
</div>
JavaScript
/*******
** Get more script: http://www.kangsigit.com **
   *************************************************
*****/
var loadKonten={
csszindex: 100,
fade:function($kontenmu, abcd, selected, speed){
var selected=parseInt(selected)
var $loaded=$("#"+abcd)
var $target=$kontenmu.eq(selected)
if ($target.length==0){ //jika ada konten yang ada di posisi indeks ini (yaitu: berasal dari link pagination berlebihan)
alert("Untuk sementara, konten di halaman "+(selected+1)+" tidak tersedia!") //Ini akan muncul jika halaman class="fadekonten" tidak disediakan
return
}
if ($loaded.attr('lastselected')==null || parseInt($loaded.attr('lastselected'))!=selected){
var $toc=$("#"+abcd+" .toc")
var $selectedlink=$toc.eq(selected)
$("#"+abcd+" .next").attr('nextpage', (selected<$kontenmu.length-1)? selected+1+'pg' : 0+'pg')
$("#"+abcd+" .prev").attr('previouspage', (selected==0)? $kontenmu.length-1+'pg' : selected-1+'pg')
$target.css({zIndex: this.csszindex++, visibility: 'visible'})
$target.hide()
$target.fadeIn(speed)
$toc.removeClass('selected')
$selectedlink.addClass('selected')
$loaded.attr('lastselected', selected+'pg')
}
},

setuptoggler:function($kontenmu, abcd, speed){
var $toc=$("#"+abcd+" .toc")
$toc.each(function(index){
$(this).attr('pagenumber', index+'pg')
})

var $next=$("#"+abcd+" .next")
var $prev=$("#"+abcd+" .prev")
$next.click(function(){
loadKonten.fade($kontenmu, abcd, $(this).attr('nextpage'), speed)
return false
})
$prev.click(function(){
loadKonten.fade($kontenmu, abcd, $(this).attr('previouspage'), speed)
return false
})
$toc.click(function(){
loadKonten.fade($kontenmu, abcd, $(this).attr('pagenumber'), speed)
return false
})
},

init:function(fadeid, contentclass, abcd, selected, speed){
$(document).ready(function(){
var faderheight=$("#"+fadeid).height()
var $fadekontens=$("#"+fadeid+" ."+contentclass)
$fadekontens.css({top: 0, left: 0, height: faderheight, visibility: 'hidden'})
loadKonten.setuptoggler($fadekontens, abcd, speed)
setTimeout(function(){loadKonten.fade($fadekontens, abcd, selected, speed)}, 100)
$(window).bind('unload', function(){ //clean up
$("#"+abcd+" .toc").unbind('click')
$("#"+abcd+" .next", "#"+abcd+" .prev").unbind('click')
})
})
}
}

loadKonten.init("divkontan", "fadekonten", "whatnewstoggler", 0, 400)
CSS Style
h4 {margin: 10px 0;} /*Style ini tidak wajib digunakan*/

.fadekonten_wrap{
position: relative;
width: 500px;
height: 250px; /* Tinggi ditetapkan untuk mengatur ketinggian konten terbesar yang ditampilkan*/
border: 3px solid #001080;
overflow: hidden;
}

.fadekonten{
position: absolute;
background: white;
padding: 10px;
visibility: hidden;
width: 330px;
}

.fadetoggler{
width: 500px;
border: 3px solid #001080;
border-top-width: 0;
overflow: hidden;
font-size: 13px;
font-family: sans-serif;
}

.fadetoggler a{ /*style untuk setiap link navigasi dalam toggler*/
text-decoration: none;
border-right: 2px solid maroon;
padding: 0 5px;
float: left;
display: block;
font-weight: bold;
color: black;
}

.fadetoggler a:hover{
background: #C03021;
color: white;
}

.fadetoggler a.toc{ /*style untuk link individu toggler (halaman 1, halaman 2, dll). ".toc" otomatis dihasilkan! */
}

.fadetoggler a.prev, .fadetoggler a.next{ /*style untuk "prev" dan "next" link toggler. ".prev" dan ".next" otomatis dihasilkan! */
color: black;
}

.fadetoggler a.prev:hover, .fadetoggler a.next:hover{
color: white;
background: black;
}

.fadetoggler a.selected{ /*style untuk halaman yang dipilih Link toggler. ".selected" otomatis dihasilkan! */
background: #C03021;
color: white;
}

URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini