１／８７ ship

Enter the number of pages on Blogger !


Enter the number of pages on Blogger!

Posted by Tenebrae

Older Posts
","

"with the number of pages: definitely impact, will enable a more intuitive navigation and quick blog. Initially proposed by Mohamed Rias , this change has been reported with some adjustments by
Iole ( whom I thank for having been helpful
one evening some time ago - do you remember when you're dead tired and just before turning off PC you realize that the blog is all busted? Here was one of those nights). The
propose again to my turn, with some small change. This appesentirà not significantly change the loading of the blog, and I intend to do it as soon as possible on this blog. As always, I will refer to the template Minima , but there should be no major problems on any other template.
Step 1 - Code for customizing colors
Go to Layout-> Edit HTML
, and look for these lines of code (to start):

/ * Variable
definitions ====================

Just below
, paste this:

type = "color" default = "# ccc" value = "# ffdfbf" >

type = "color" default = "# 000" value = "# CC0000">

  
  
  
  And save the template. In  Layout-> Fonts and Colors , you will already have the ability to customize the colors of links to pages that will insert: 
 

Step 2 - CSS code to define the appearance of links to

Return to Layout-> Edit HTML , and look for this line of code (CTRL + F

the browser):




]]>

Immediately above, paste this :

. showpageArea
{margin-top: 12px;

margin-bottom: 10px;

}
.showpageArea a {

font-size: 12px;

 font-weight: normal;    
  text-align: center;    
 
 text-decoration: none;    
 
 border: 1px $pagefwcolor solid;    
 
 color: $pagefwcolor;   
 
 padding: 3px;    
 
 margin-left: 5px;    
 
 background: $pagebgcolor;    
 
 }
 
 .showpageArea a:hover {    
 
 font-size: 12px;    
 
 font-weight: normal;    
 
 text-align: center;    
 
 text-decoration: none;    
 
 border: 1px $pagebgcolor solid;    
 
 color: $pagebgcolor;    
 
 padding:  3px;    
 
 margin-left: 5px;    
 
 background: $pagefwcolor;    
 
 }
 
    
 
 .showpageNum a {    
 
 font-size: 12px;    
 
 font-weight: normal;    
 
 text-align: center;    
 
 text-decoration: none;    
 
 border: 1px $pagefwcolor solid;    
 
 color: $pagefwcolor;    
 
 padding: 3px;    
 
 margin-left: 5px;    
 
 background: $pagebgcolor;    
 
 }
 
    
 
 .showpageNum a:hover {    
 
 font-size: 12px;    
 
 font-weight: normal;    
 
 text-align: center;    
 
 text-decoration: none;    
 
 border: 1px $pagebgcolor solid;     
 
 color: $pagebgcolor;    
 
 padding: 3px;    
 
 margin-left: 5px;    
 
 background: $pagefwcolor;    
 
 }    
 
 .showpagePoint {    
 
 font-size: 12px;    
 
 font-weight: normal;    
 
 text-align: center;    
 
 text-decoration: none;    
 
 border: 1px $pagebgcolor solid;    
 
 color: $pagebgcolor;    
 
 padding: 3px;    
 
 margin-left: 5px;    
 
 background: $pagefwcolor;    
 
 }
 
 .showpageTot {    
 
 font-size: 12px;    
 
 font-weight: normal;    
 
 text-align: center;    
 
 text-decoration: none;    
 
 color: white;} 
 
 
 
 
 
 
 and save your changes. 
 
  

Step 3 - Entering your Javascript

Go to Layout-> Page Elements , and add an element of type HTML / Javascript

(here the element is inserted under the section of the post, but you can add it anywhere).

Within the (let untitled) paste this Javascript code:




showpageCount function (json) {
was thisUrl = location.href; was htmlMap = new Array ();
was isFirstPage = thisUrl.substring (thisUrl.length-5, thisUrl.length) == ". Com /";

 was isLablePage = thisUrl.indexOf ("/ search / label /")!=- 1;   
  PageCount var = 5; 
  
 
 
 
     
 
 
 displayPageNum var = 3; 
 
 

The first is the number of posts that will appear on every page : in this case is
5. To get a better effect, I suggest to put the same number of posts that have already been displayed, and you can change (but do not need it) from Layout-> Page Elements , click on Edit
section of the post:



The second indicates how many links to pages appear . Leaving 3, is the result:

After pasting the code, save the item and move it below the area of \u200b\u200b post : A Then saved and displayed the blog to see the effect. All done!





Warning!





Changing
queries the blog feed, so it may take a few minutes before the "notice" of the new post
You can edit the Javascript to change font size and generally the appearance of links to customize the colors
going
Layout-> Fonts and Colors



After an evaluation of the points above,
Tell us about any issue si presenti
.