Hvordan lage pagination med //

[sinols]

Hei

Lurer på hva CSS koden for denne stilen er:

Eksempel:

Older Posts

Newer Posts

Når begge vises:

Older Posts // Newer Posts

 

[SEOMannen]

Litt usikker på hva du mener, men gjør et forsøk:

HTML kode:

<ul id="navigasjon">
	<li><a rel="prev" href="#">Older Posts</a> //</li>
	<li><a rel="next" href="#">Newer Posts</a></li>
</ul>

CSS

#navigasjon ul {
		width: 100%;
		float: left;
		margin: 0 0 3em 0;
		padding: 0;
		list-style: none
	}
#navigasjon ul li {
		float: left
		}

 

[sinols]

Se her ja! Litt usikker på hvor jeg skal sette det inn; dette er kodene:

HTML

{blockagination}
<nav class="pagination"
{blockreviousPage}
<div class="prev">
<a href="{PreviousPage}"> {lang:newer posts} </a>
</div>
{/blockreviousPage}

{block:NextPage}
<div class="next">
<a href="{NextPage}"> {lang: older posts} </a>
</div>
{/block:NextPage}
</nav>
{/blockagination}

CSS:

.pagination {
display: block;
clear: both;


Skal fungere akkurat slik som hos trent, se nederst hvor du finner "older posts" Articles | Trent Walton

 

[SEOMannen]

Kanskje dette virker!

Hei,

Prøve med dette (bytt ut med eksisterende kode (ta vare på den hvis det feiler :

{block:Pagination}
<ul id="navigasjon">
	{block:PreviousPage}
	<li><a rel="prev" href="{PreviousPage}">{lang: older posts}</a> //</li>
	{/block:PreviousPage}
	{block:NextPage}
	<li><a rel="next" href="{NextPage}">{lang:newer posts}</a></li>
	{/block:NextPage}
</ul>
{/block:Pagination}

Copy/paste denne koden til din CSS-fil:

#navigasjon ul {
		width: 100%;
		float: left;
		display:block;
		margin: 0 0 3em 0;
		padding: 0;
		list-style: none
	}
#navigasjon ul li {
		float: left
		}

Tror du har bytta på {lang: older posts} og {lang:newer posts}. Jeg har retta på det i forslaget.

PS: Har ikke testet så blir litt i blinde

 

[sinols]

Funket ikke:

Dette funker litt; men tydeligvis ikke på android/explorer: Funker i chrome.


CSS:

.pagination {
display: block;
clear: both;
}

.pagination a {}

.pagination a:hover { color: {color:Link Hover}; }

.pagination .prev,
.pagination .jump,
.pagination .next { display: inline-block; }

.pagination .prev,
.pagination .jump,
.pagination .next:before { content: "/"; }


HTML

{blockagination}
<nav class="pagination"
{blockreviousPage}
<div class="prev">
<a href="{PreviousPage}"> {lang:newer posts} </a>
</div>
{/blockreviousPage}

{block:NextPage}
<div class="next">
<a href="{NextPage}"> {langlder posts} </a>
</div>
{/block:NextPage}
</nav>
{/blockagination}


Forslag til at det funker "universalt"?
Altså, deleren mellom linkene: // skal bare synes når begge funksjonene vises: (next och prev)

 

[Tonny Kluften]

prev vil vel alltid vises hvis man ikke er på førstesiden? Kan du ikke bare la // være en del av ordet i koden? altså "// prev".

Eller <li><a rel="next" href="#"> // Forrige side </a></li>

Ooops, next vil ikke vises på siste side...

 

[sinols]

CSS

.tumblr-quote { font-style: italic; }

HTML

{block:Quote}
<!-- QUOTE -->
<div class="tumblr-quote">
<div class="quote {Length}">" {Quote} "</div>
{block:Source}<div class="copy">&mdash; {Source}</div>{/block:Source}
</div><!-- /.tumblr-quote -->
{/block:Quote}

Hvordan få "copy" til och være på samme linje som selve quoten? slik:

" Throughout life people will make you mad, disrespect you and treat you bad. Let God deal with the things they do, cause hate in your heart will consume you too. " — Will Smith