Cari Artikel Blog Ini

Total Tayangan Laman

MEMBUAT PEMBUKA HALAMAN BELAKANG (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...!!!

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
3 Comments

3 komentar :

gusti&hana mengatakan...

wahhh...,boleh nih di ambil,hehehehe...
sukses ya bang....

Salafy Student mengatakan...

Wahh... ini dia yang saya cari cari...
terima kasih ya kang..
Sukses Selalu..
Wassalam... :D

Denpal 06-12-01 Banjarmasin mengatakan...

Terimakasih ilmunya, sudah dicoba Sukses.

Poskan Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!