![]() |
Membagikan Laman Didalam Postingan |
Tempatkan kode ini dibagian CSS atau STYLE.
/* Multiple Page Slide */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 0px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px}
Tempatkan kode ini dibagian postingan HTML bukan
<div class="next-wrap">
<div id="photocons" class="instruction">
<div class="slidecontentWrap">
<div class="slidecontent">
<-- ISI KONTEN DI SINI -->
</div>
<div class="slidecontent">
<-- ISI KONTEN DI SINI -->
</div>
<div class="slidecontent">
<-- ISI KONTEN DI SINI -->
</div>
<div class="slidecontent">
<-- ISI KONTEN DI SINI -->
</div>
<div class="slidecontent">
<-- ISI KONTEN DI SINI -->
</div>
</div>
</div>
<a class="movepg prever">prev</a>
<a class="movepg nexter">next</a>
</div>
<script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script>
NOTICE : Jika anda telah mengisi atau edit konten anda dengan di HTML, maka jangan balik ke Compose, karena kode <a class="movepg prever">prev</a> dan <a class="movepg nexter">next</a> otomatis akan menjadi link default blogger (tidak bisa melanjutkan kelaman berikutnya) karena adanya link tersebut. untuk mengatasinya, anda balik lagi ke HTML, hapus link yang ada di bagian <a class="movepg prever">prev</a> dan <a class="movepg nexter">next</a> terus publish lagi. SELESAI
Semoga Bermanfaat.