Domovská stránka, starší a novější články (tlačítka)

Dnes vám nachystám úpravu spodních tlačítek, kterými se dostanete na domovskou stránku nebo listujete starými / novými články...

Můj návod.

Kopírovat se zdrojem! 

Můžete si opět vybrat více variant. Například mít odkazy jen jako text, text s obrázek, udělat z nich tlačítka a podobně...

Vyhledejte si v šabloně blog-pager a všechno mezi závorkami smažte a nahraďte:

padding: 15px;
margin-top: $(pager.space.top);

Pak vložte pod tyto řádky následující:

.home-link  {
background: #ffffff;
border: 1px solid #FF0066;
box-shadow: 0 0 $(shadow.spread) #084468;
border-radius: 10px;
padding: 10px;
}

#blog-pager-older-link a {
background: #ffffff;
border: 1px solid #FF0066;
box-shadow: 0 0 $(shadow.spread) #084468;
border-radius: 10px;
padding: 10px;
}

#blog-pager-newer-link a {
background: #ffffff;
border: 1px solid #FF0066;
box-shadow: 0 0 $(shadow.spread) #084468;
border-radius: 10px;
padding: 10px;
}

.home-link:hover, #blog-pager-older-link a:hover, #blog-pager-newer-link a:hover  {
background: #FFB591;
color: #FF6600;
}

home-link - domovská stránka
blog-pager-older-link - starší články
blog-pager-newer-link - novější články

background: #ffffff; - pozadí bílé
border: 1px solid #FF0066; - rámeček oranžový
box-shadow: 0 0 $(shadow.spread) #084468; - stín rámečku
border-radius: 10px; - zaoblení rámečku
padding: 10px; - mezera ze všech stran mezi textem a rámečkem

background: #FFB591; - pozadí světle oranžové (po najetí myši)
color: #FF6600; - barva písma (po najetí myši)

Další možností je obyčejný text. Takže z předchozího kroku pod blog-pager vložíte následující a jen si nastavujete barvu textu:

.home-link  {
padding: 10px;
color: #99CCFF;
}

#blog-pager-older-link a {
padding: 10px;
color: #99CCFF;
}

#blog-pager-newer-link a {
padding: 10px;
color: #99CCFF;
}

.home-link:hover, #blog-pager-older-link a:hover, #blog-pager-newer-link a:hover  {
color: #FF6600;
}

A jak si změníte text těchto odkazů? Najděte si v šabloně home-link... Přesněji část podle obrázku:

A <data:newerPageTitle/> si nahradíte vlastním textem... Můžete zvolit cokoli, dokonce můžete vkládat i symboly, takže můžete přidat šipky, nebo co vás napadne:

  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>nové články</a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>staré články</a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'>domů</a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>

nebo třeba

  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>← nové články</a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>staré články →</a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'>domů</a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>

Pro dnešek jen takový krátký návod. Tak co říkáte? :-)