Yazı Ortasına İlgili Yazılar Kodu Ekleme

Share:
YAYIN-İÇİNE-İLGİLİ-YAZILAR-EKLEME

  Blogger kullanıcıları için geliştirilmiş ve seo için önemli bir kodlama. Yazılarınızın ortasında verdiğiniz etiketlere göre otomatik sıralanan ilgili yazılar kodu çok hoşunuza gidecek.Hem sayfada geçirilen süre için olumlu bir gelişme hemde diğer sayfalara yönlendirerek trafik artırıcı bir yöntem olarak görüyorum. Ekleyeceğiniz 3 kod ile sorunsuz çalıştığını söyleyebilirim. Burada dikkat etmeniz gereken nokta blog sayfanızın yedeğini almaktır. Çünkü 3. kodu eklerken vereceğim kod ile değiştireceksiniz. Yanlış değişiklik yapma ihtimaline karşı bir önlem almış olursunuz.

1. Aşama: Tema/ HTML'yi Düzenle yolunu takip ederek </head> kodunu aratıp hemen üstüne aşağıdaki kodu ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>//<![CDATA[var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}//]]></script></b:if>

2. Aşama: Aynı kod alanında ]]></b:skin> kodunun hemen üstüne aşağıdaki kodu eklemenizdir. Eğer çalışmazsa </style> kodunun üstüne de yapıştırabilirsiniz. 3 alternatif şeklinde ilgili yazıları gösterebilirsiniz. İlk alternatif kodu hemen aşağıdaki olup örnek görsel eklenmiştir.

/* Related Post Style 1 */.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

 1. 
örnek-ilgili-yazılar

/* Related Post Style 2 */.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
.related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

 2. 
örnek-ilgili-yazılar

/* Related Post Style 3 */.related-simplify{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:100%;border:6px double #fff;}
.related-simplify ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#f1c40f;}
.related-simplify a{color:#fff;font-size:17px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#fff;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

 3. 


örnek-ilgili-yazılar

3. Aşama: Beğendiğiniz ilgili yazılar kodunu ekledikten sonra aynı alanda son olarak <data:post.body/> kodunu aratarak aşağıdaki kod ile değiştiriyoruz. Bu kodu arattığınızda birden fazla bulabilirsiniz. Deneme yanılma yoluyla doğru yeri bulacağınızdan blog sayfanızın yedeğini almayı unutmayın. Doğru yeri bulmak için temanızda kullandığınız paylaş veya benzer yazılar eklentilerini takip edebilirsiniz. Verdiğim kod onların üstlerinde olacaktır.

<div expr:id='&quot;post1&quot; + data:post.id'/><div class='related-simplify'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/></b:if></b:loop></b:if><h4>İlgili Yazılar</h4><script type='text/javascript'>removeRelatedDuplicates();printRelatedLabels();</script></div><div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div><script type='text/javascript'>var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵

12 yorum:

  1. Merak ettiğim bir özellikti bu. teşekkürler :)

    YanıtlaSil
  2. Ellerinize Sağlık Hocam Teşekkür ederim.

    YanıtlaSil
  3. Bunu kullanmayı düşünüyordum. Bakalım belki bloğumdakinden vazgeçip bunu denerim. Teşekkürler paylaşım için :-bd

    YanıtlaSil
    Yanıtlar
    1. Oldukça faydalı bir eklenti. İşine yaradıysa ne güzel

      Sil
  4. Güzel bir paylaşım elinize sağlık.

    YanıtlaSil
  5. Bildirim çanı ve bildirimler içinde yazı yazarmısınız? rica etsem :)

    YanıtlaSil
    Yanıtlar
    1. Tabi olabilir. İlerleyen zamanlarda bu konu ile alakalı yazı hazırlamaya çalışırım.

      Sil
  6. Doğuş Hakan Yılmaz vermiş olduğun bilgiler için teşekkür ederim fakat ben başka bir şey soracağım. Footer kısmanda Dmca Protected yazılı kilit simgesi var. Bu sayfa için ne anlam teşkil ediyor biz de sayfamıza koymalı mıyız? Hatta bunun için ayrı bir yazı bile yazılabilir. Teşekkür ederim şimdiden

    YanıtlaSil
    Yanıtlar
    1. Kısaca web site içerik koruma sistemi..Sayfalarınıza koymanız iyi olur tabi..Bir yazı hazırlarım bu konuda. Teşekkürler

      Sil

YORUM YAPARAK KATKIDA BULUNABİLİRSİNİZ...

1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösterin.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat edin.
3) Kullandığınız üslubun sizi yansıttığını unutmayın.
4) Yorum yaparken link eklemeyin.