Blogkészítési Tippek XV. - Kapcsolodó cikkek

Sokat mondtam és máig tartom, nagyon fontos, hogy a látogatóidat minél tovább a blogodon tartsd. Ehhez rengeteg eszköz áll a rendelkezésedre. Olyanok mint a "Legolvasottabb modul" a link ajánlás, hivatkozás egy másik cikkre és hasonlók. Most azonban egy olyan eszközt mutatok amely az első beállítás után teljesen automata és biztos, hogy a látogatóknak is tetszeni fog. Ez pedig a "Kapcsolodó cikkek" modul.

Ez a modul megjeleníti a cikkeid alatt az ahhoz kapcsolódó egyéb cikkeket. Ráadásul dizájnos is hiszen egy képet is mutat az olvasónak ami - ha a cím esetleg csődöt mond - biztosan kedvet csinál majd a kattintáshoz.

Mint minden, ez is bonyolultnak tűnhet, de higgyétek el, korántsem az.

1.) Először is menjetek a bloggeretek kezelő felületére és kattintsatok a Sablon - HTML szerkesztése gombokra.

2.) A megjelenő html kódban kattints akárhova és nyomd meg a Ctrl+F billentyűkombinációt. Ekkor felugrik egy kereső.

3.) A keresővel keress rá az alábbi kódrészletre:

</head>

4.) Ha ez meg van, akkor illeszd be az alábbi kódot a </head> fölé közvetlenül.

<!--Itt kezdődik a Kapcsolódó cikkek modul scriptje-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' /> </b:if> <!--Itt ér véget a Kapcsolódó cikkek modul scriptje-->

 Megjegyzés:
- ha meg akarod változtatni a modul méretét írd át a pirossal kiemelt részeket.
- ha meg akarod változtatni a kapcsolódó cikkek címének méretét írd át a kék részt.
- ha szeretnéd, hogy a kapcsolódó cikkek modul megjelenjen a főoldalon is, akkor távolítsd el a rózsaszínnel kijelölt szövegeket a kódból.

5.) Keress rá az alábbi kódrészletre: (ha kettőt találsz, akkor a másodikra lesz szükséged)

<div class='post-footer'>

6.) Ha ez meg van,  akkor közvetlenül a <div class='post-footer'> rész fölé másold be az alábbi kódot:

<!-- Kapcsolódó cikkek modul kezdődik-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Kapcsolódó cikkek:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://mylifefactory.blogspot.com/2015/10/kapcsolodo-cikkek.html" rel="nofollow" >Kapcsolódó cikkek modul</a></div>
</b:if>
<!-- Itt ér véget a kapcsolódó cikkek modul-->

 Megjegyzés:
- a pirossal jelölt részeknél jelölheted meg, hogy hány cikket szeretnél megjelentetni a modulodban.
- a kékkel kijelölt rész átírásával tudod a modul címét változtatni.

6.) Mentsd el a munkádat és nézd meg az eredményt a blogodon. Példát a működésre egyelőre ennek a cikknek az alján láthatsz.

Változás!

Ha esetleg nem látni a mentés után a blogodon a modult annak két oka lehet.
1. Nincs elég cikk a blogodon, vagy nem jó címkéket adtál meg nekik így nem tartja a rendszer egymáshoz kapcsolódónak őket.
2. lehet, hogy nálad máshova kell berakni az iménti hosszú kódot.

Ebben az esetben keresd meg ezt a kódsort:

<b:includable id='postQuickEdit' var='post'>

Ha meg van, a hosszú kódot az efelett lévő </b:includable> rész fölé kell bemásolnod. Valahogy így:

 Így már biztosan jónak kell lennie. Jó munkát!