Membuat next page link pada blogger | Kumpulan artikel dan berita unik berwawasan

Membuat next page link pada blogger

Diposting oleh effendy [ Blog tips ] 0 komentar »

Banyak yang mengatakan next page link hanya muncul pada wordpress tetapi kali ini akan saya beritahukan cara agar link next-prev dapat terpampang di bagian bawah halaman,yaitu dengan menambah beberapa code javascript pada template anda,lihat pada sreenshot :

Langsung saja dech..langkah-langkahnya adalah :

Login ke blogger dan akses ke "Layout" lalu ke "edit HTML".
Temukan code :
Lalu tambahkan kode di bawah ini tepat diatasnya :

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;<br /> }<br /> <br /> .showpageArea a {border: 1px solid #505050;<br /> color: #000000;font-weight:normal;<br /> padding: 3px 6px !important;<br /> padding: 1px 4px ;margin:0px 4px;<br /> text-decoration: none;<br /> }<br /> .showpageArea a:hover {<br /> font-size:11px;<br /> border: 1px solid #333;<br /> color: #000000;<br /> background-color: #FFFFFF;<br /> }<br /> <br /> .showpageNum a {border: 1px solid #505050;<br /> color: #000000;font-weight:normal;<br /> padding: 3px 6px !important;<br /> padding: 1px 4px ;margin:0px 4px;<br /> text-decoration: none;<br /> <br /> }<br /> .showpageNum a:hover {<br /> font-size:11px;<br /> border: 1px solid #333;<br /> color: #000000;<br /> background-color: #FFFFFF;<br /> <br /> }<br /> .showpagePoint {font-size:11px;<br /> padding: 2px 4px 2px 4px;<br /> margin: 2px;<br /> font-weight: bold;<br /> border: 1px solid #333;<br /> color: #fff;<br /> background-color: #000000;<br /> <br /> }<br /> <br /> .showpage a:hover {font-size:11px;<br /> border: 1px solid #333;<br /> color: #000000;<br /> background-color: #FFFFFF;<br /> <br /> }<br /> .showpageNum a:link,.showpage a:link {<br /> font-size:11px;<br /> padding: 2px 4px 2px 4px;<br /> margin: 2px;<br /> text-decoration: none;<br /> border: 1px solid #0066cc;<br /> color: #0066cc;<br /> background-color: #FFFFFF;}<br /> <br /> .showpageNum a:hover {font-size:11px;<br /> border: 1px solid #333;<br /> color: #000000;<br /> background-color: #FFFFFF;<br /> }<br />

Maka akan terlihat seperti ini :

Lalu temukan juga :

Nah sekarang tambahkan kode di bawah ini tepat di bawah

<script type="text/javascript"><br /> <br /> function showpageCount(json) {<br /> var thisUrl = location.href;<br /> var htmlMap = new Array();<br /> var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";<br /> var isLablePage = thisUrl.indexOf("/search/label/")!=-1;<br /> var isPage = thisUrl.indexOf("/search?updated")!=-1;<br /> var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";<br /> thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;<br /> var thisNum = 1;<br /> var postNum=1;<br /> var itemCount = 0;<br /> var fFlag = 0;<br /> var eFlag = 0;<br /> var html= '';<br /> var upPageHtml ='';<br /> var downPageHtml ='';<br /> <br /> var pageCount=5;<br /> var displayPageNum=3;<br /> var firstPageWord = 'First';<br /> var endPageWord = 'Last';<br /> var upPageWord ='Previous';<br /> var downPageWord ='Next';<br /> <br /> var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';<br /> <br /> for(var i=0, post; post = json.feed.entry[i]; i++) {<br /> var timestamp = post.published.$t.substr(0,10);<br /> var title = post.title.$t;<br /> if(isLablePage){<br /> if(title!=''){<br /> if(post.category){<br /> for(var c=0, post_category; post_category = post.category[c]; c++) {<br /> if(encodeURIComponent(post_category.term)==thisLable){<br /> if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){<br /> if(thisUrl.indexOf(timestamp)!=-1 ){<br /> thisNum = postNum;<br /> }<br /> <br /> postNum++;<br /> htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;<br /> }<br /> }<br /> }<br /> }//end if(post.category){<br /> <br /> itemCount++;<br /> }<br /> <br /> }else{<br /> if(title!=''){<br /> if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){<br /> if(thisUrl.indexOf(timestamp)!=-1 ){<br /> thisNum = postNum;<br /> }<br /> <br /> if(title!='') postNum++;<br /> htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;<br /> }<br /> }<br /> itemCount++;<br /> }<br /> }<br /> <br /> for(var p =0;p< htmlMap.length;p++){<br /> if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br /> if(fFlag ==0 && p == thisNum-2){<br /> if(thisNum==2){<br /> if(isLablePage){<br /> upPageHtml = labelHtml + upPageWord +'</a></span>';<br /> }else{<br /> upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';<br /> }<br /> }else{<br /> upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';<br /> }<br /> <br /> fFlag++;<br /> }<br /> <br /> if(p==(thisNum-1)){<br /> html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';<br /> }else{<br /> if(p==0){<br /> if(isLablePage){<br /> html = labelHtml+'1</a></span>';<br /> }else{<br /> html += '<span class="showpageNum"><a href="/">1</a></span>';<br /> }<br /> }else{<br /> html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span><br /> <br /> ';<br /> }<br /> }<br /> <br /> if(eFlag ==0 && p == thisNum){<br /> downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';<br /> eFlag++;<br /> }<br /> }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br /> }//end for(var p =0;p< htmlMap.length;p++){<br /> <br /> if(thisNum>1){<br /> if(!isLablePage){<br /> html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';<br /> }else{<br /> html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';<br /> }<br /> }<br /> <br /> html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;<br /> <br /> if(thisNum<(postNum-1)){<br /> html += downPageHtml;<br /> html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';<br /> }<br /> <br /> if(postNum==1) postNum++;<br /> html += '</div>';<br /> <br /> if(isPage isFirstPage isLablePage){<br /> var pageArea = document.getElementsByName("pageArea");<br /> var blogPager = document.getElementById("blog-pager");<br /> <br /> if(postNum <= 2){<br /> html ='';<br /> }<br /> <br /> for(var p =0;p< pageArea.length;p++){<br /> pageArea[p].innerHTML = html;<br /> }<br /> <br /> if(pageArea&&pageArea.length>0){<br /> html ='';<br /> }<br /> <br /> if(blogPager){<br /> blogPager.innerHTML = html;<br /> }<br /> }<br /> <br /> }<br /> </script><br /> <br /> <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script><br /> <br /> <div style=’text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;’><a href=’http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html’>Grab this Widget ~ Techie Blogger</a></div>

Selamat mencoba

Lihat juga part 2

Artikel terkait :

Blog tips

0 komentar

Posting Komentar