Blogger Eski Tip Özel Temaya İlgili Yazılar Eklentisi Nasıl Eklenir?

Blogger İçin "Bunlarda İlginizi Çekebilir Yayınlar Eklentisini" eski tip özel blogger temanıza ekleyebilirsiniz. Lütfen ilgili a...

Blogger İçin "Bunlarda İlginizi Çekebilir Yayınlar Eklentisini" eski tip özel blogger temanıza ekleyebilirsiniz. Lütfen ilgili adımları takip edin.

Blogunuza yazdığınız yayınların altında “Related Posts” Benzer yazılar veya Bunlarda ilginizi çekebilir yeni resimli yayınlar eklentisi ekleyebiliriz. “Bunlarda ilginizi çekebilir” eklenti kurulumundan sonra hiçbir siteye üye olmanıza, isteğimiz dışında gelişen reklamların gösterimine boyun eğmeden, kodlar üzerinde istediğiniz ayarları yaparak kullanabileceksiniz.

Arkadaşlar Türkiye de hiçbir blogger kendisi kod yazmaz. Bu gerçeği öncelikle bilmenizi isterim. Kimin hangi kodu nereden aldığını nasıl kullandığını ve kod içine backlink almak için neler yaptığını çok iyi bilen biriyim.

Buradaki amacımız özgür düşünceler altında blogger kullanıcılarının daha güzel şeyler elde edebilmesi ve bunları yaparken de elimizden geldiğince kodlar hakkında bilgi sahibi olarak ne yaptığını bilmesine yardımcı olmaktır.

Şu anda bu kodları kendimde kullanıyorum.

Eklentiyi incelemek için, blogumun herhangi bir yazı sayfasını açıp yazı altında “İlgili Yazılar” ismi altında görebilirsiniz. Eklentiyi kendi blog’unuz da kullanmak için aşağıdaki adımları takip etmeniz yeterli olacaktır.

Önemli açıklama : Aşağıda verilen kodlar, Blogger şablonları üzerinde çalışır ve Dinamik Görünümler dışında özelleştirme kabul etmez. Özel bloglar da çalışmaz. Kodlar Github da barındırılmakta olup lisanslanmıştır. Kodların açık verilmesinin amacı dilediğiniz özelleştirmeyi yapabilmeniz içindir.

İlgili yayınlar eklentisi neler yapmaz :

1. Blog ana sayfanızda görülmez ve “Devamını oku” bağlantısı engellemez.
2. İlgili olmayan mesajları öneri olarak getirmez.
3. Herhangi bir hesaba kaydolmanız gerekmez.
4. Hiçbir geri bağlantı ve marka içermez.
5. Okuyucu kitlenize reklam vermez.

Diğer özellikler :

İlgili yayınlar eklentisi ile neler yapabilirsiniz :

1. Resim boyutunu ayarlayabilirsiniz.
2. Resim galerisinin başlık ismini, H1..H3 etiketlerini kullanarak değiştirebilirsiniz.
3. Resim galerisi sayısını temanızın genişliğine göre değiştirebilirsiniz.
4. CSS ile aranız iyi ise dilediğiniz yeri özelleştirebilirsiniz.

Teknik özellikler :

1. Eklentinin çalışabilmesi için yazı etiketi gereklidir.
2. Kodlar, yazı mesajları arasındaki ilişkiyi sağlaması etiketlere dayalıdır.
3. Etiketleriniz yazılarda görülmesi gerekir. Etiketlerinizi gizledi iseniz eklenti çalışmaz. İyi bir şekilde organize edilmiş etiketleme sistemi ile blog en iyi şekilde çalışır.
4. Blogger’ın resim barındırma sistemi ile en iyi şekilde çalışır.

İlgili Yazılar Related Posts eklenti kurulum aşamaları :

1. Öncelikle, Blogunuzun yedeğini alın. "Çok Önemli"
2. Blogger kumanda paneline giriş yapın.
3. Şablon kodlarınızı açın. İmleci kod içinde bir yere tıklayın ve CTRL + F arama özelliği ile, </body> etiketini arama kutusuna yapıştırın, Enter'e tıklayın. Sarı ile vurgulanan etiketi bulun. Resmi inceleyin.

4. Aşağıda verilen kodları eksiksiz kopyalayın ve yukarıda verilen etiketin hemen üstüne yapıştırın.

<!-- BEGIN CODE IT PRETTY RELATED POSTS GALLERY CODE -->
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style>
 .related-posts {
 width: 100%;
 margin: 2em 0;
 float: left;
 }
 .related-posts ul li {
 list-style: none;
 margin: 0 5px;
 float: left;
 text-align: center;
 border: none;
 }
 </style>
 <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
 <script>
 //<![CDATA[
 $(document).ready(function() {
 //CODE OPTIONS
 var maxSearched = 500;
 var minimum = 3;
 var maximum = 4;
 var imageSize = 145;
 var roundImages = false;
 var relatedTitle = true;
 var labelInTitle = false;
 var relatedTitleText = "<h2>Bunlarda ilginizi çekebilir :</h2>";
 var defaultImage = "";
 var campaignTracking = false;
 var campaignSource = "";
 var campaignMedium = "";
 var campaignName = "";
 var postLabels = $('.post-labels a');
 var insertBefore = $('.post-footer');
 //END CODE OPTIONS - DO NOT EDIT BELOW THIS LINE
 var labels=[];var label;var alternateLabel;var minposts=minimum-1;if(postLabels.length===1){label=postLabels.text().trim()}else if(postLabels.length>1){$(postLabels).each(function(){labels.push($(this).text().trim())});label=labels[Math.floor(labels.length*Math.random())];var labelLocation=labels.indexOf(label);if(labelLocation===labels.length-1){alternateLabel=labels[labelLocation-1]}else{alternateLabel=labels[labelLocation+1]}}if(label!==undefined){var title=$(".entry-title").text().trim();var labelCount=0;var alternateLabelCount=0;var matches=[];var url=$('link[rel="alternate"][title*="Atom"]').eq(0).attr("href");$.ajax({url:url,data:{"max-results":maxSearched,alt:"json-in-script"},dataType:"jsonp",success:function(e){$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){labelCount++}if($.inArray(alternateLabel,r)!==-1){alternateLabelCount++}}});if(labelCount<=minposts&&alternateLabelCount>=minposts){label=alternateLabel}$.each(e.feed.entry,function(t,n){if(e.feed.entry[t].category!==undefined){var r=[];for(var i=0;i<e.feed.entry[t].category.length;i++){r.push(e.feed.entry[t].category[i].term)}if($.inArray(label,r)!==-1){var s=e.feed.entry[t].title.$t.trim();if(s!==title){var o;for(var u=0;u<e.feed.entry[t].link.length;u++){if(e.feed.entry[t].link[u].rel==="alternate"){o=e.feed.entry[t].link[u].href}}var a;if(e.feed.entry[t].media$thumbnail!==undefined){a=e.feed.entry[t].media$thumbnail.url.split(/s72-c/).join("s"+imageSize+"-c")}else{a=defaultImage}if(matches.length<maxSearched&&campaignTracking===false){matches.push('<li><a href="'+o+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}else if(matches.length<maxSearched&&campaignTracking===true){matches.push('<li><a href="'+o+"?utm_source="+campaignSource+"&utm_medium="+campaignMedium+"&utm_campaign="+campaignName+'"><img src="'+a+'" alt="'+s+'" nopin="nopin">'+s+"</a></li>")}}}}});if(matches.length>=minimum){if(relatedTitle===true&&labelInTitle===true){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+' <span class="related-term">'+label+"</span></h5><ul></ul></div>")}else if(relatedTitle===true&&labelInTitle===false){insertBefore.before('<div class="related-posts"><h5>'+relatedTitleText+"</h5><ul></ul></div>")}else{insertBefore.before('<div class="related-posts"><ul></ul></div>')}matches.sort(function(){return.5-Math.random()});for(var t=0;t<maximum;t++){$(".related-posts ul").append(matches[t])}}insertBefore.css("clear","both");$(".related-posts ul li").css({"max-width":imageSize,"border":"none","padding":"0"});if(roundImages===true){$(".related-posts ul li img").css({"width":imageSize,"height":imageSize,"border-radius":"50%"})}else{$(".related-posts ul li img").css({"max-width":imageSize,"height":"auto"});}}})}
 });
 //]]>
 </script>
 </b:if>
 <!-- END CODE IT PRETTY RELATED POSTS GALLERY CODE -->

5. Kod yapıştırma işiniz bittiğinde, hata olasılığını kontrol etmek için “Şablonu Önizleme” yapın.

Şu anda ana sayfanızda Benzer yazılar resimli galerinin görülmediğini inceleyin. Ana sayfada resimli galeriyi görürseniz hata yaptınız demektir. Değişikleri geri alarak baştan başlayın. Hata yoksa Şablonunuzu kaydedin.

6. Ekranın üst kısmında “Blog’u görüntüle” butonuna tıklayarak herhangi bir yazınızı açın alt kısma inin ve yaptığınız işlemi kontrol edin. Herşey iyi görülüyorsa bitirdiniz demektir.

Sorunları giderme :

Eğer resim galerisini görmüyorsanız, yazınızda en az bir etiket olduğundan emin olun. Unutmayın, yazınızda etiketler görünür olmalıdır. Etiketler yazınızda görüntülenmiyorsa bu kodlar çalışmaz. Yazı sayfanızda en az bir etiket olmalı ve bu etikete bağlı en az 3 mesaj yoksa, galeri resimleri varsayılan ayarlarla görülmez. Kod içinde "minimum = 3" değerini düşürerek etikete bağlı mesajları görülür yapabilirsiniz. “ Resim galerisi etikete göre eşleşir” Özelleştirme :

1. “Code Options” Yukarıda verilen kod içindeki satırları özelleştirme. Bu kod satırında farklı uygulamalar da yapabiliriz. Ancak biz gerekli olanları kullanacağız.

2. var relatedTitleText : “Bunlarda ilginizi çekebilir” metin satırındaki ismi değişebilirsiniz. Tırnaklara dikkat etmeyi unutmayın silinmesin.
3. Önemli : Kodlar içinde “jquery.min js” script kod satırı bulunmaktadır. Blog temanıza eklediğiniz bir eklenti içinde jquery kodlarını kullanıyorsanız aşağıda resimde belirtilen satırı silin. jquery kod kullanmıyorsanız satır içindeki kodları ellemeyin. Aynı kod veya farklı sürüm kodlardan çakışma olmaması için sadece bir tanesini kullanabilirsiniz. Bu satırdaki anlatıma dikkat etmenizi öneririm.