Web Günlüğü

Blogger yazı içerisinde ilgili yazılar nasıl gösterilir

Bazı haber ve teknoloji sitelerinde gördüğüm, benim gibi bir çok kişinin de fark etmiş olacağı üzere yazı içerisinde ilgili yazı, ilginizi çekebilir, bunu da okuyabilirsiniz, ayrıca oku gibi bir eklenti mevcut.(Wordpress için also read plugin diye tabir ediliyor.) Acaba blogger için böyle bir eklenti yapılmış mıdır diye araştırırken bir blogger ipuçları sitesinde : arlinadzgn.com yakın zamanda hazırlanmış bir eklentinin paylaşıldığını gördüm. Kendi bloğumda test edip bu yazıyla paylaşmak istedim. Eklenti tabi ki öyle üstün yeteneği olan, bir yapay zekaya sahip, yazı içeriğine göre benzer yazı başlıklarını göstermiyor. Sadece herhangi bir yazıya eklenmiş etikete göre ilgili yazı başlıklarını gösteriyor. Tabi yazıya eklenen o etikete daha önce başka bir yazı eklenmişse.

</head> öncesi eklenmesi gereken css kodu :

<style type='text/css'>
.alsoread{background:#ffeaa7;color:#000;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border-left:4px solid #d63031;transition:all .3s}
.alsoread .content .text{margin-right:5px}
.alsoread .content{padding:10px 15px}
.alsoread .content a{color:#000;text-decoration:none;line-height:1.5em}
.alsoread .content a:hover{color:#111;text-decoration:underline}
</style>
</b:if>

<data:post.body/> sonrasına eklenmesi gereken kod

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
(function() {var jumlah = 4;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1);
for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'alsoread';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})();
var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}}
function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx}
function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false}
//]]>
</script>
  <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:view.isPost'>
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>
      </b:if>
    </b:loop>
  </b:if>
<script type='text/javascript'>
//<![CDATA[
(function alsoread() {var text = 'Also read :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.alsoread');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})();
//]]>
</script>
</b:if>

Kod içerisinde belirginleştirilmiş yerler
1* Yazı içerisinde kaç adet ilgili yazı başlığı gösterilecekse isteğe göre ayarlanabilir.
2* Yazı içeriğinin bulunduğu kapsayıcı div'e ait class'ı belirtmekte örneğin Not : özelleştirilmiş temalarda bu class değişkenlik gösterebilir.
3* Yazı başlığından önce gelen ifade. Ayrıca oku, bunu da okuyabilirsiniz, ilginizi çekebilir, ilgili yazı gibi.