quinta-feira, abril 28, 2011

Numeração de páginas deslizante no Blogger

Outro dia (acho que em um buteco) o Lacuna Cerebral me perguntou se eu não conhecia alguma ferramenta que fizesse a numeração das páginas do Blogger. A princípio não lembrei de nenhuma, mas fiquei de procurar no DicasBlogger, um metablog que acho muito fodástico... Pois bem, procurei e não achei lá, o jeito foi sair e googar. E, googando googando, achei o tuta de um tal "Paginator 3000" que transcrevo abaixo, de autoria do indonésoo Abu Fahran.

E agora, Le Tuta!
Vá em Design > Editar Html...

Deixe a Opção "expandir modelos de widget" DESMARCADA...
Com uma ajudinha do Ctrl+F, encontre o trecho abaixo
 ]]></b:skin>  
...e substitua por este:
 .paginator {  
      margin-top:60px;  
      font-size:1em;  
 }  
 .paginator table {  
      border-collapse:collapse;  
      table-layout:fixed;  
      width:100%;  
 }  
 .paginator table td {  
      padding:0;  
      white-space:nowrap;  
      text-align:center;  
 }  
 .paginator span {  
      display:block;  
      padding:3px 0;  
      color:#fff;  
 }  
 .paginator span strong,  
 .paginator span a {  
      padding:2px 6px;  
 }  
 .paginator span strong {  
      background:#ff6c24;  
      font-style:normal;  
      font-weight:normal;  
 }  
 .paginator .scroll_bar {  
      width:100%;     height:20px;  
      position:relative;  
      margin-top:10px;  
 }  
 .paginator .scroll_trough {  
      width:100%;     height:3px;  
      background:#ccc;  
      overflow:hidden;  
 }  
 .paginator .scroll_thumb {  
      position:absolute;  
      z-index:2;  
      width:0; height:3px;  
      top:0; left:0;  
      font-size:1px;  
      background:#363636;  
 }  
 .paginator .scroll_knob {  
      position:absolute;  
      top:-5px; left:50%;  
      margin-left:-10px;  
      width:20px; height:20px;  
      overflow:hidden;  
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDsTv8Poqn2TuH8P-VZ9Q63Q5lzwcnUJtK71EAZCXHX3wgOcLbvbzd-f3pXz1GokJJ62Zxst6e4tUDRsSycXGTQpH0LHEDZ8b2p0ghxgg1e05VVX4B0Tx_MPrNC27iVTF02rWdM-HPHu8/s1600/slider_knob.gif) no-repeat 50% 50%;  
      cursor:pointer; cursor:hand;  
 }  
 .paginator .current_page_mark {  
      position:absolute;  
      z-index:1;  
      top:0; left:0;  
      width:0; height:3px;  
      overflow:hidden;  
      background:#ff6c24;  
 }  
 .fullsize .scroll_thumb {  
      display:none;  
 }  
 .paginator_pages {  
      width:600px;  
      text-align:right;  
      font-size:0.8em;  
      color:#808080;  
      margin-top:-10px;  
 }  
 ]]></b:skin>  

Depois encontre esse trecho...
 </body>  

... e substitua por este...
 <script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>  
 <script type='text/javascript'>  
 var home_page=&quot;/&quot;;  
 var urlactivepage=location.href;  
 var postperpage=7;  
 var numshowpage=6;  
 </script>  
 <script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>  
 </body>  

Salve o modelo...

E o resultado final é mais ou menos assim:


IPC:
Os códigos-fonte foram inseridos com a ajuda do Code Formatter

Nenhum comentário: