membuat navigasi halaman

widget ini berfungsi untuk membuka halaman belakang pada sebuah blog. Cara kerjanya praktis, anda tidak perlu membuka halaman demi halaman secara urut untuk menuju halaman akhir, cukup dengan melihat angka halaman, klik...maka halaman tersebut akan terbuka.
Mari...kita lihat cara menerapkannya...!!Lihat contoh dibawah ini :





Contoh Digunakan oleh EPG Studio

• Sign ke Blogger dengan ID anda.
• Pilih Tata Letak.
• Pilih Elemen Halaman.
• Pilih Tambah Gadget.
• Pilih HTML/JavaScript.
• Copy kode dibawah ini kemudian masukan pada kolom konten.
• Klik tombol Simpan.
• Letakan widget dibagian bawah postingan blog
• Selesai.

Copy kode dibawah ini (kode yang dgunakan oleh EPG Studio).

---

<style>
.showpageArea {
background:#333 url(http://lh5.ggpht.com/_1j80TgNqd_8/TUVpdnXRmpI/AAAAAAAABf8/Ankp3PTNqa4/s128/wp5.jpg) 0 -50px repeat-x;
font-family:verdana,arial,helvetica;
color: yelow;
font-size:11px;
margin:10px;
padding:8px 20px;
}
.showpageArea a {
color: #333 ;
}
.showpageNum a {
border:1px dotted;
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #333 url(http://lh5.ggpht.com/_1j80TgNqd_8/TUVpdnXRmpI/AAAAAAAABf8/Ankp3PTNqa4/s128/wp5.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
border:1px dotted;
background: #666 url(http://lh5.ggpht.com/_1j80TgNqd_8/TUVpdnXRmpI/AAAAAAAABf8/Ankp3PTNqa4/s128/wp5.jpg) 0 -25px repeat-x;
}
.showpagePoint {
border:1px dotted;
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #06a2b9 url(http://lh5.ggpht.com/_1j80TgNqd_8/TUVpdnXRmpI/AAAAAAAABf8/Ankp3PTNqa4/s128/wp5.jpg) 0 0 repeat-x;
text-decoration: none;
}
.showpageOf {
border:1px dotted;
background: #333 url(http://lh5.ggpht.com/_1j80TgNqd_8/TUVpdnXRmpI/AAAAAAAABf8/Ankp3PTNqa4/s128/wp5.jpg) 0 -50px repeat-x;
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
background: #333 url(http://lh5.ggpht.com/_1j80TgNqd_8/TUVpdnXRmpI/AAAAAAAABf8/Ankp3PTNqa4/s128/wp5.jpg) 0 -50px repeat-x;
text-decoration:none;
border: 1px solid #bbb;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
background: #666 url(http://lh5.ggpht.com/_1j80TgNqd_8/TUVpdnXRmpI/AAAAAAAABf8/Ankp3PTNqa4/s128/wp5.jpg) 0 -25px repeat-x;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:yellow;
}
</style>
<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=12;
var displayPageNum=3;
var firstPageWord = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Kembali';
var downPageWord ='Lanjut';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 0px solid #333; background-" class="showpage"> '+thisNum+' dari '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> </div>

---

Kode yang berwarna kuning dapat anda ganti sesuai dengan kehendak anda :

---

var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'Awal';var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 0px solid #333; background-" class="showpage"> '+thisNum+' dari '+(postNum-1)+': </span>'+html;

---

Selamat mencoba...!!!

Read more: http://epg-studio.blogspot.com/2009/05/membuat-pembuka-halaman-belakang.html#ixzz1zGTPGkLy

Anda Baru saja membaca artikel tentang membuat navigasi halaman dan anda bisa menemukan artikel membuat navigasi halaman ini dengan url http://ghilankmayones.blogspot.com/2012/06/membuat-navigasi-halaman.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel membuat navigasi halaman ini bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link membuat navigasi halaman sumbernya.

Artikel Lain Yang Mungkin Anda Cari: