zaterdag 18 januari 2014

meer lezen button

een 'meer lezen' button in plaats van een standaard tekst.? dat kan.! en ik ga ja vandaag daarbij helpen. de 'meer lezen' button, ook wel 'read more', 'klik hier voor meer', etc. je kunt er van maken wat je zelf wilt.!

het gaat om zoiets als op bovenstaande foto. zorg ervoor dat je zelf eerst een afbeelding zoekt of maakt via paint bijvoorbeeld. ik heb de mijne zelf gemaakt in hetzelfde lettertype als mijn header.
01. ga naar je dashboard en klik in het linker menu op sjabloon.
02. klik op html bewerken.
03. druk op ctrl + f, dan verschijnt er rechtsbovenin een zoekbalk. plak hierin onderstaande code en druk op enter.
 
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
04. hij gaat naar de code toe waarnaar je hebt gevraagd. de eerste regel van de code is gecentreerd. dan ga je de code bewerken.
 
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
 
het met lichtroze gecentreerde in de code vervang je voor;
<img src="hierdelinkvanjeafbeelding"/>b
05. ga naar een site waar je afbeeldingen kunt uploaden, bijvoorbeeld tinypic of imageshack. zelf heb ik tinypic gebruikt. klik op bladeren en zoek je meer lezen button die je in het begin hebt gemaakt. als je je afbeelding hebt gevonden klik je op openen en dan op nu uploaden!
06. dan duurt het een aantal seconden en dan krijg je het volgende te zien. kopiëer de directe link. dan plak je de directe link op de plaats van het met lichtroze gecentreerde tekst. 
<img src="hierdelinkvanjeafbeelding"/>b
07. als je dat allemaal hebt gedaan klik je op sjabloon opslaan en dan heb je een 'meer lezen' button.


» alle tutorials zijn vanuit blogger gedaan, het kan dus zijn dat het op een andere site het niet werkt. hopelijk vonden jullie het een duidelijke uitleg. zijn er dingen die jullie graag uitgelegd willen zien.?  

23 opmerkingen:

Bedankt voor het achterlaten van een reactie ♥
Ik neem zo snel mogelijk een kijkje op jouw pagina.

  1. Handig dat je zulke tutorials geeft. Je legt het heel duidelijk uit. Maar ik denk dat er ook veel mensen zijn die een andere platform gebruiken, ik in ieder geval wel... :)

    BeantwoordenVerwijderen
    Reacties
    1. aan de uitleg heb je dan niet veel, maar misschien wel wat aan de html code.? denk dat dat hetzelfde blijft xx

      Verwijderen
  2. Handig! Gebruik ook Blogger dus ga eens even kijken

    BeantwoordenVerwijderen
  3. Handig! Ik wist dit al, en heb dit ook al een tijdje veranderd op mijn blog, hihi :)

    BeantwoordenVerwijderen
  4. Goed uitgelegd, ook al had ik ook al een zelfgemaakte read more button :), wel erg handig voor mensen die er nog geen een hebben!

    x

    BeantwoordenVerwijderen
  5. Wat goed uitgelegd, had dit zelf al meerdere keren geprobeerd maar kwam er maar niet uit. Je bent een engel!

    BeantwoordenVerwijderen
  6. Heel handig zeg! Ik denk alleen dat ik hier niet zoveel aan heb :(. Dit is blogger en geen wordpress helaas. Maar voor anderen heb je het super uitgelegd! xx

    BeantwoordenVerwijderen
  7. Wat handig! Zelf heb ik gewoon de automatische, die je bij elk bericht in moet voegen via het 'bericht maken'-ding in Blogger, maar dit is nog leuker! :)

    BeantwoordenVerwijderen
  8. Wat duidelijk uitgelegd! Was er maar een boek dat zo duidelijk was over het veranderen en aanpassen van je lay-out, dat zou echt mijn reddende engel zijn! Onwijs bedankt! Liefs, Stella.

    BeantwoordenVerwijderen
  9. Handig dat je dat deelt! Ik gebruik zelf wordpress en daar is het een standaard button binnen het schrijven van een nieuw bericht. x

    BeantwoordenVerwijderen
  10. Handig zeg! Je hebt het heel duidelijk uitgelegd!

    BeantwoordenVerwijderen
  11. Super goede en duidelijke uitleg, alleen zit ik zelf op wordpress dus is het anders!

    BeantwoordenVerwijderen
  12. Daar gaan mensen vast wat aan hebben! Die gebruikte ik ook altijd toen ik nog bij Blogger zat :)

    Love,

    Rowan


    Personal Style Blog WWW.REDREIDINGHOOD.COM

    BeantwoordenVerwijderen
  13. In WordPress ziet ie er gelukkig al automatisch, maar wel een hele handige tutorial!

    BeantwoordenVerwijderen
  14. Super handig, ik ga daar maar eens aan werken dit weekend!

    BeantwoordenVerwijderen
  15. Wat een super handig artikel!! Heel fijn! x

    BeantwoordenVerwijderen
  16. De code doet het bij mij niet! Dan zegt ie 0 van 0 ofzo! .x

    BeantwoordenVerwijderen
    Reacties
    1. oh, dat is raar. wanneer/waar zegt 'ie dat precies.? xx

      Verwijderen
  17. Hoi!
    Wat een handige post! Maar ik heb een klein probleempje; ik geef dus de directe link in van mijn afbeelding op de plaats die je zei, ik sla het sjabloon op, maar op de plaats waar de afbeelding hoort te staan, staat nu die letterlijke link van de afbeelding. En niet het plaatje zelf. Het is wel zo dat als je op die link klikt je wordt doorgestuurd naar het hele bericht.
    Heb jij de oplossing? :D
    Alvast bedankt!
    Elena

    BeantwoordenVerwijderen
    Reacties
    1. hi.!

      wat raar, ik zou zo niet weten wat er mis is gegaan. heb je de code volledig overgenomen dus ook wat na het roze gecentreerde nog komt.?

      als het nog niet lukt mag je me ook wel even mailen.!

      ♥ xx liefs Amy

      Verwijderen