středa 17. ledna 2018

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? :-)



Sdílení článku:
Sdílet emailem Sdílet gmailem Sdílet Facebookem Sdílet Googlem Plus Sdílet Twitterem Sdílet Pinterestem Sdílet Tumblrem Sdílet Bloggerem Sdílet Wordpressem Sdílet whatsappem

Autorka článku:

Lucy Lillianne Vždycky mě bavilo hrát si s grafikou, dělat blogy a jejich vzhledy. Nikdy jsem se nepovažovala za nějakého experta a ani nikdy nebudu. To, co sem publikuji jsou věci, které by se mohly někomu do budoucna hodit nebo i mě samotné, pokud bych nějaký postup zapomněla... Každopádně jsem ráda, že sem tam si nějaký článek najde svého čtenáře nebo rovnou uplatnění :-)

štítky

2 komentáře:


  • Tipy pro blogery

    Nápady a postřehy, odkoukané fígle, prostě vše, co by se vám mohlo hodit při práci na vašem vlastním blogu...

  • Moje grafika

    Amatérské pokusy o grafiku, mnohdy vytvořené s obrovským štěstím nebo díky volně stažitelné předchystané práci...

  • Calibre program

    Pár návodů s postupy, které jsem objevila díky experimentům s programem nebo diskuzním fórům na netu. Calibre slouží ke správě elektronických knih...