Relaterade poster automatiskt i varje inlägg

Vill du ha en automatiskt skapad ”relaterade poster” i varje inlägg kan du enkelt skapa en sådan. Se på något av mina inlägg längst ner hur resultatet kommer att bli. Relaterade poster ger dina besökare någonstans att ta vägen efter att de läst ett intressant inlägg och kommit till slutet av det. Så inte bara ser din blogg mer professionell ut, det kan inbringa att dina läsare stannar längre och läser mer av dina artiklar.

Hitta det här kodstycket

</head>

Lägg till det här kodstycket före.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3wNGEOxKG6Ytyx3S9lu6x2vnC2uqUpm3rPNJ6OSvKfag_eWyLbagvuVj5QoscKduRWg9YOhrdCiqA3-n5gxqW7b5J5RGeqkmOasnKYMUnziFkFh_xwjp_IK6puExct6i39pkztnt8tAI/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>

Den rödmarkerade URL:en är om du skulle vilja lägga till en egen liten bild, t.ex. din favicon, annars kommer en standardiserad RSS-flödes bild dyka upp. Klicka här för att se vilken bild jag menar.

Sedan letar du upp det här kodstycket

<data:post.body/>.

Det kan även se ut så här om du har en annorlunda mall (template)

<div class='post-body>

Eller såhär:

<data:post.body/>

Lägg till det här kodstycket efter

<b:if cond='data:blog.pageType == "item"'> <div id="related-posts"> <font face='Arial' size='3'><b>Gillar du inlägget? Läs gärna: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if>

Den röda texten är den som kommer stå over inläggen och den kan du ändra som du vill. Den röda siffran 5 är maximalt antal inlägg som kommer att visas.

Nu är det klart.

Lärt dig något om hur man skapar, designar och tjänar pengar på din blogg eller hemsida? Gillar du inlägget får du gärna Twittra, gilla på Facebook, posta på Pusha, länka eller kommentera inlägget.