Sebelum memulai jangan lupa menyimpan templatenya secara penuh y! dengan cara
Layout---> Edit HTML---> Download Full Template
nah sekarang Letakkan kode CSS dibawah ini tepat diatas </head>
<style type="text/css">
.fadecontentwrapper{
position: relative;
width: 350px;
height: 250px;
border: 5px solid maroon;
overflow: hidden;
}
.fadecontent{
position: absolute;
background: white;
padding: 10px;
visibility: hidden;
width: 330px;
}
.fadecontenttoggler{
width: 350px;
border: 5px solid maroon;
border-top-width: 0;
overflow: hidden;
}
.fadecontenttoggler a{
text-decoration: none;
border-right: 2px solid maroon;
padding: 0 5px;
float: left;
display: block;
font-weight: bold;
color: black;
}
.fadecontenttoggler a:hover{
background: #C03021;
color: white;
}
.fadecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}
.fadecontenttoggler a.prev, .fadecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
color: black;
}
.fadecontenttoggler a.prev:hover, .fadecontenttoggler a.next:hover{
color: white;
background: black;
}
.fadecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
background: #C03021;
color: white;
}
</style>
NB: kode berwarna hijau dapat diganti dengan ukuran lebar dan tinggi tab yang diinginkan, sedangkan kode berwarna oranye merupakan lebar dari tab yang sedang ditampilkan (halaman tab) dan kode ungu merupakan warna latar dari tab.
Kemudian tambahkan kode javascript pertama dibawah ini juga tepat diatas </head>
<script src='http://ad4msan.freevar.com/ad4msanquery.js' type='text/javascript'/>
Kemudian satu lagi kode javascript tepat dibawah kode javascript yang pertama
<script type='text/javascript'>
var fadecontentviewer={
csszindex: 100,
fade:function($allcontents, togglerid, selected, speed){
var selected=parseInt(selected)
var $togglerdiv=$("#"+togglerid)
var $target=$allcontents.eq(selected)
if ($target.length==0){ //if no content exists at this index position (ie: stemming from redundant pagination link)
alert("No content exists at page number "+selected+"!")
return
}
if ($togglerdiv.attr('lastselected')==null || parseInt($togglerdiv.attr('lastselected'))!=selected){
var $toc=$("#"+togglerid+" .toc")
var $selectedlink=$toc.eq(selected)
$("#"+togglerid+" .next").attr('nextpage', (selected<$allcontents.length-1)? selected+1+'pg' : 0+'pg')
$("#"+togglerid+" .prev").attr('previouspage', (selected==0)? $allcontents.length-1+'pg' : selected-1+'pg')
$target.css({zIndex: this.csszindex++, visibility: 'visible'})
$target.hide()
$target.fadeIn(speed)
$toc.removeClass('selected')
$selectedlink.addClass('selected')
$togglerdiv.attr('lastselected', selected+'pg')
}
},
setuptoggler:function($allcontents, togglerid, speed){
var $toc=$("#"+togglerid+" .toc")
$toc.each(function(index){
$(this).attr('pagenumber', index+'pg')
})
var $next=$("#"+togglerid+" .next")
var $prev=$("#"+togglerid+" .prev")
$next.click(function(){
fadecontentviewer.fade($allcontents, togglerid, $(this).attr('nextpage'), speed)
return false
})
$prev.click(function(){
fadecontentviewer.fade($allcontents, togglerid, $(this).attr('previouspage'), speed)
return false
})
$toc.click(function(){
fadecontentviewer.fade($allcontents, togglerid, $(this).attr('pagenumber'), speed)
return false
})
},
init:function(fadeid, contentclass, togglerid, selected, speed){
$(document).ready(function(){
var faderheight=$("#"+fadeid).height()
var $fadecontents=$("#"+fadeid+" ."+contentclass)
$fadecontents.css({top: 0, left: 0, height: faderheight, visibility: 'hidden'})
fadecontentviewer.setuptoggler($fadecontents, togglerid, speed)
setTimeout(function(){fadecontentviewer.fade($fadecontents, togglerid, selected, speed)}, 100)
$(window).bind('unload', function(){ //clean up
$("#"+togglerid+" .toc").unbind('click')
$("#"+togglerid+" .next", "#"+togglerid+" .prev").unbind('click')
})
})
}
}
</script>
setelah melakukan langkah di atas jangan lupa di save templatenya.
langkah selanjutnya tinggal memasukan kode di bawah di halaman blog. Pilih add HTML kemudian masukan kode dibawah ini...
<div id="whatnewstoggler" class="fadecontenttoggler">
<a href="#" class="toc">Page 1</a>
<a href="#" class="toc">Page 2</a>
<a href="#" class="toc">Page 3</a>
dst...
</div>
<a href="#" class="toc">Page 1</a>
<a href="#" class="toc">Page 2</a>
<a href="#" class="toc">Page 3</a>
dst...
</div>
<div id="whatsnew" class="fadecontentwrapper">
<div class="fadecontent">
Content 1
</div>
<div class="fadecontent">
Content 2
</div>
<div class="fadecontent">
Content 3
</div>
</div>
<script type="text/javascript">
//SYNTAX: fadecontentviewer.init("maincontainer_id", "content_classname", "togglercontainer_id", selectedindex, fadespeed_miliseconds)
fadecontentviewer.init("whatsnew", "fadecontent", "whatnewstoggler", 0, 400)
</script>
NB: kode hijau merupakan nama judul tab dan jumlah tab kolom tab yang kita inginkan, sedangkan kode oranye merupakan isi dari halaman tab dan kode ungu merupakan waktu efek fadenya semakin besar maka fadenya semakin lambat (dalam mili second)
Untuk melihat contohnya sobat bisa liat pada tab blog gw di sudut kiri bawah thanks!!
Bagi yang ingin copy paste jangan lupa di sertai back link ke situs ini dan sumber.
