Tips Cara Menampilkan Page Navigasi yang letaknya apada footer bloger

Cara menampilkan Page Navigasi yang letaknya pada footer

Nah sekarang mulai langkah-langkahnya :
1. log in ke akun blogger anda dan pilih layout –> Edit html
2. Cari kode ]]></b:skin>
3. Letakkan Kode CSS ini di atasnya :

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

4. Cari Kode ini :
<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>

5. Masukkan kode ini dibawah </b:section>

&lt;script type=&quot;text/javascript&quot;&gt;

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

var pageCount=5;
var displayPageNum=3;
var firstPageWord = ‘First’;
var endPageWord = ‘Last’;
var upPageWord =’Previous’;
var downPageWord =’Next’;

var labelHtml = ‘&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/’+thisLable+’?&amp;max-results=’+pageCount+’&quot;&gt;’;

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&amp;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&amp;max-results=’+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +’&lt;/a&gt;&lt;/span&gt;’;
}else{
upPageHtml = ‘&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;’+ upPageWord +’&lt;/a&gt;&lt;/span&gt;’;
}
}else{
upPageHtml = ‘&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;’+htmlMap[p]+’&quot;&gt;’+ upPageWord +’&lt;/a&gt;&lt;/span&gt;’;
}

fFlag++;
}

if(p==(thisNum-1)){
html += ‘&amp;nbsp;&lt;span class=&quot;showpagePoint&quot;&gt;&lt;u&gt;’+thisNum+’&lt;/u&gt;&lt;/span&gt;’;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+’1&lt;/a&gt;&lt;/span&gt;’;
}else{
html += ‘&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;’;
}
}else{
html += ‘&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;’+htmlMap[p]+’&quot;&gt;’+ (p+1) +’ &lt;/a&gt;&lt;/span&gt;’;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = ‘&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;’+htmlMap[p]+’&quot;&gt;’+ downPageWord +’&lt;/a&gt;&lt;/span&gt;’;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){
if(!isLablePage){
html = ‘&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;’+ firstPageWord +’ &lt;/a&gt;&lt;/span&gt;’+upPageHtml+’ ‘+html +’ ‘;
}else{
html = ”+labelHtml + firstPageWord +’ &lt;/a&gt;&lt;/span&gt;’+upPageHtml+’ ‘+html +’ ‘;
}
}

html = ‘&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;&quot; class=&quot;showpage&quot;&gt;Page ‘+thisNum+’ of ‘+(postNum-1)+’: &lt;/span&gt;’+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
html += ‘&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;’+htmlMap[htmlMap.length-1]+’&quot;&gt; ‘+endPageWord+’&lt;/a&gt;&lt;/span&gt;’;
}

if(postNum==1) postNum++;
html += ‘&lt;/div&gt;’;

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

if(postNum &lt;= 2){
html =”;
}

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

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =”;
}

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

}
&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-
script&amp;callback=showpageCount&amp;max-results=99999&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

<div style=’text-align:right;font-size:10px;color:000000;margin-top:15px;
display:none;’> <a href=’http://rias-techno-wizard.blogspot.com/2008/07/
page-navigation-hack-for-blogger.html’>Grab this Widget ~ Blogger Accessories</a></div>

6. Untuk Mengganti seberapa banyak angka/page yang muncul, yaitu dengan mengganti
1 : var pageCount = 5; angka 5 sesuai dengan keinginan anda.

7. selesai

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s