Logo

hej alle, i dag skal vi til at lære, hvordan du tilføjer side navigation bar med numre på blogspot blogs,

Jeg er sikker på, at de fleste af jer har en masse indlæg og standard blogger måde at navigere mellem de nye indlæg og gamle indlæg er kedeligt. hvad nu hvis dine besøgende ønsker at læse for din ældste indlæg?
skal han holde klikke på "ældre indlæg", No
Du bør anvende denne hack til din skabelon, er det en af de mest nyttige bloggeren tricks nogensinde.

så lad os se hvordan det skal gøres.

Forsigtig : Please backup din skabelon (Download Full skabelonen), inden foretage nogen ændringer.

Trin 1: Tilføje CSS-koden.

Log ind på din Blogger-konto og gå til,
Dashboard>> Layout>> Rediger html.
Og finde følgende kode.

]]></b:skin>

Og netop før tilføjer den næste kode

.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; }

Find den næste kode Eller nogle lignende kode

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

Og efter </ b: sektion> Tag tilføje den næste kode.

<script type='text/javascript'> var home_page_url = location.href; var pageCount=10; var displayPageNum=6; var upPageWord ='Previous'; var downPageWord ='Next'; function showpageCount(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= ''; var upPageHtml =''; var downPageHtml ='';     for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; 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+'&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){ 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 += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;'; }else{ if(p==0){ 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++; } } } if(thisNum&gt;1){ html = ''+upPageHtml+' '+html +' '; } html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages ('+(postNum-1)+')&lt;/span&gt;'+html; if(thisNum&lt;(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += '&lt;/div&gt;'; 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; } } function showpageCount2(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var isLablePage = thisUrl.indexOf(&quot;/search/label/&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 labelHtml = '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;'; var thisUrl = home_page_url; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(title!=''){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!='') postNum++; htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&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){ upPageHtml = labelHtml + 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 += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;'; }else{ if(p==0){ html = labelHtml+'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++; } } } if(thisNum&gt;1){ if(!isLablePage){ html = ''+upPageHtml+' '+html +' '; }else{ html = ''+upPageHtml+' '+html +' '; } } html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages ('+(postNum-1)+')&lt;/span&gt;'+html; if(thisNum&lt;(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += '&lt;/div&gt;'; 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; } } </script> <script type='text/javascript'> var thisUrl = home_page_url; if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){ if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){ var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;)); }else{ var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;)); } } var home_page = &quot;/&quot;; if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){ if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){ document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;') }else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;') } } </script>

Og klik "Gem skabelon"
I ovenstående kode, du kan kun redigere fire linjer for at tilpasse din navigationspanel

var pageCount=<font color="#3366FF"><strong>10</strong></font>;

I denne kode Antal 10 kontrollere antallet af stillinger pr side, kan du ændre det til at vælge, hvor mange stillinger pr side, du ønsker at vise.
Bemærk: Dette nummer værdi skal være den samme med i din Blogger-konto-indstillinger
Indstillingerne kan findes ved at gå til Dashboard>> Opsætning>> Formatering>> Vis>> 10 stillinger

var displayPageNum=<strong><font color="#3300FF">6</font></strong>;

Antal 6 her kontrollere antallet af sider, som vil blive vist i navigationslinjen.

var upPageWord ='<strong>Previous</strong>'; var downPageWord ='<strong>Next</strong>';

Hvis du ønsker at ændre sproget eller bare ændre det til nogen ting, bedes du ændre Forrige for eksempel til Ældre

Denne blogger trick min give nogle problemer, hvis du bruger etiketter på dine indlæg, og til at løse problemer, du har til at anvende det næste skridt for din skabelon.

1. Tilføj Label gadget til din skabelon ved at gå til Layout>> sideelementer>> Tilføj gadgets>> Vælg Labels og føje den til din skabelon.

2. gå til, Dashboard>> Layout>> Rediger html.
Og finde følgende kode

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

Og erstatte den med følgende kode.

<<script type='text/javascript'> var lblname = &quot;<data :label.name/>&quot;; lblname2 = encodeURIComponent(lblname); var feedlink = &#39;/search/label/&#39; + lblname2+&#39;?&amp;max-results=10&#39;; document.write(&#39;&lt;a href=&quot;&#39; + feedlink + &#39;&quot;&gt;&#39;+lblname+&#39;&lt;/a&gt;&#39;); </script> <span id="preserveb39753c3bafc4fa48ec9aa9ca35d2882" class="wlWriterPreserve"><script type='text/javascript'> var lblname = "<data :label.name/>"; lblname2 = encodeURIComponent(lblname); var feedlink = '/search/label/' + lblname2+'?&max-results=10'; document.write('<a href="' + feedlink + '">'+lblname+'</a>'); </script></span>

Og klik "Gem skabelon"
Vi er færdig.

At se, hvordan det ser ud se denne demo blog