Bir Blogger Blogunda Özel İlgili Yayınlar Bölümü Nasıl Eklenir

İçeriğiniz ne kadar iyi olursa olsun,  blog düzenindeki en önemli unsurlardan biri de " İlgili içerik bölümüdür."  Blog gönderisin...

...

İçeriğiniz ne kadar iyi olursa olsun, blog düzenindeki en önemli unsurlardan biri de "İlgili içerik bölümüdür." 

Blog gönderisinin çevresinde benzer veya eşleşen içerik girişleri sunmadığınız sürece, ziyaretçilerden ilgi çekici ve çok sayfalı oturumlar bekleyemezsiniz. 

Arama motorları, ziyaretçilerin içeriğe göz atmak için daha fazla zaman harcadıkları siteleri sıralamayı da tercih eder. 

Bugün, Google'ın Blogger platformu tarafından desteklenen bir blogda özel ilgili yayınlar bölümünü entegre etmeyi öğreneceğiz. Bu bölüm, tek gönderi sayfalarında gönderinin en altında görünecektir. Entegrasyonundan sonra, sayfa görüntüleme sayısındaki artışa kesinlikle şahit olacaksınız. Entegrasyonu denemeden önce Blogger şablonunuzun yedeğini alın. Daha iyi bir strateji, önce TEST amaçlı bir blogda test etmek olabilir. 

Unutmayın, blogunuz yalnızca birkaç gönderiyle yeniyse, ilgili içerik bölümü beklendiği gibi çalışmayabilir. Bu nedenle, blog da kusursuz çalışması için yeterli yayın olduğundan emin olun.

Css'nin temellerini biliyorsanız, ilgili yayınlar bölümünün genel görünümünü blog temasıyla eşleşecek şekilde kolayca özelleştirebilirsiniz.


Blogger şablonunuza bağlı olarak, oluşturma kodunun ilgili gönderi bölümünün görünmesini istediğiniz yere yerleştirilmesini değiştirmeniz gerekebilir. Bu basit bir ekleme ve test alıştırmasıdır.

Uyarı: Uygulamaya başlamadan önce: Kesinlikle bloğunuzun yedeğini alın. Bu makaleye benzer  daha önceden bir kod ekledi iseniz o kadları kaldırın. Öyle başlayın.

Yazıyı birkaç kez okuyarak özümlemenizi tavsiye ederim. Sakin olun ve ne yaptığınızı bilerek anlatılanları adım adım uygulayın. Blog yedeğiniz olduğu sürece çekinmeden çalışın. Hatalı yapsanızda yılmayın tekrar deneyin. Kesinlikle başaracaksınız. Gözünüzde fazla büyütmeyin.

Başlığa Temel CSS ve JavaScript Ekleme

Şablonun yedeğini aldıktan sonra, Blogger kontrol paneliniz de Tema → Tıkla ok işareti → HTML'yi düzenle satırını açın.

Aşağıda belirtilen tüm kod parçacıkları </head> şablonun içindeki etiketten hemen önce eklenmelidir. Yerleşim, aşağıdaki göründükleri sırayla olmalıdır.

Her şeyden önce, ilgili içerik bölümüne temel stili uygulayan aşağıdaki CSS kurallarını ekleyin.

<style>
#related-posts{
    float:center;
    text-transform:none;
    height:100%;
    padding-top:20px;
    padding-left:5px;
    font-size:15px;
    border-top:1px solid #ddd;
    margin-top:25px
}
#related-posts h2{
    font-size:25px;
    text-transform:none;
    letter-spacing:0em;
    color:#555;
    font-family:Georgia,sans-serif;
    margin-bottom:.7em;
    margin-top:0em;
    padding-top:0em
}
#related-posts a{
    font-family:Georgia,serif;
    text-align:center;
    border-right:1px dotted #DDD;
    color:#2361A1;
    padding:10px 10px 0 10px!important;
    min-height:250px
}
#related-posts a:hover{
    background-color:#E5E5E5
}
</style>

Daha önce de belirtildiği gibi, ilgili gönderi girişlerinin tasarımını ve düzenini ayarlamak için bu CSS kurallarını kolayca değiştirebilir ve genişletebilirsiniz. Css'ye aşina değilseniz, orijinal kuralları sağlam tutun.

Ve bu CSS kurallarının hemen altına aşağıdaki JavaScript kodunu ekleyin. İşleyişi için gerekli olan bu.

JavaScript kodu:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var post_thumbnail_width = 180;
var post_thumbnail_height = 120;
var max_related_entries = 6;

function escapeRegExp(string){return string.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function replaceAll(str,term,replacement){return str.replace(new RegExp(escapeRegExp(term),"g"),replacement)}function display_related_posts(json_feed){for(var defaultnoimage="https://i.ibb.co/yS6JvBh/no-image.jpg",post_titles=new Array,title_num=0,post_urls=new Array,post_thumbnail_url=new Array,relatedpoststitle=(window.location.href,"You might also like:"),border_color="#DDDDDD",i=0;i<json_feed.feed.entry.length;i++){var feed_entry=json_feed.feed.entry[i];post_titles[title_num]=feed_entry.title.$t;try{post_thumbnail_url[title_num]=feed_entry.media$thumbnail.url}catch(error){s=feed_entry.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d?post_thumbnail_url[title_num]=d:"undefined"!=typeof defaultnoimage?post_thumbnail_url[title_num]=defaultnoimage:post_thumbnail_url[title_num]="https://i.ibb.co/yS6JvBh/no-image.jpg"}for(var k=0;k<feed_entry.link.length;k++)"alternate"==feed_entry.link[k].rel&&(post_urls[title_num]=feed_entry.link[k].href,title_num++)}var random_entry=Math.floor((post_titles.length-1)*Math.random()),iteration=0;if(post_titles.length>0){var rp_heading=document.createElement("h2"),textnode=document.createTextNode(relatedpoststitle);rp_heading.appendChild(textnode),document.getElementById("related-posts").appendChild(rp_heading);var rp_container=document.createElement("div");rp_container.setAttribute("style","clear: both;"),rp_container.setAttribute("id","rp-container"),document.getElementById("related-posts").appendChild(rp_container)}for(;iteration<post_titles.length&&20>iteration&&max_related_entries>iteration;)if(post_urls[random_entry]!=currentURL){var rp_anchor=document.createElement("a");0!=iteration?rp_anchor.setAttribute("style","text-decoration:none;padding:10px;float:left;border-left: none "+border_color+";"):rp_anchor.setAttribute("style","text-decoration:none;padding:10px;float:left;"),rp_anchor.setAttribute("id","rp-anchor-"+iteration),rp_anchor.setAttribute("href",post_urls[random_entry]),document.getElementById("rp-container").appendChild(rp_anchor);var rp_img=document.createElement("img");rp_img.setAttribute("style","width:"+post_thumbnail_width+"px;height:"+post_thumbnail_height+"px; border:1px solid #CCCCCC;"),rp_img.setAttribute("id","rp-img-"+iteration);var pin=String(post_thumbnail_url[random_entry].match(/\/s72-c\//));post_thumbnail_url[random_entry]=replaceAll(post_thumbnail_url[random_entry],pin,"/w"+post_thumbnail_width+"-h"+post_thumbnail_height+"-p/"),rp_img.setAttribute("src",post_thumbnail_url[random_entry]),rp_img.setAttribute("alt","Matched post excerpt thumbnail in the post footer."),document.getElementById("rp-anchor-"+iteration).appendChild(rp_img);var rp_para=document.createElement("div");rp_para.setAttribute("style","width:"+post_thumbnail_width+"px; height:"+post_thumbnail_height+"px;border: 0pt none ; margin: auto; padding-top: 18px; line-height:1.6;"),rp_para.setAttribute("id","rp-para-"+iteration);var textnode=document.createTextNode(post_titles[random_entry]);rp_para.appendChild(textnode),document.getElementById("rp-anchor-"+iteration).appendChild(rp_para),iteration++,random_entry<post_titles.length-1?random_entry++:random_entry=0}else iteration++,random_entry<post_titles.length-1?random_entry++:random_entry=0;post_urls.splice(0,post_urls.length),post_thumbnail_url.splice(0,post_thumbnail_url.length),post_titles.splice(0,post_titles.length)}
/*]]>*/
</script>
</b:if>

Şimdi, burada JavaScript kodunun başında görebileceğiniz 3 önemli değişkene dikkat etmeniz gerekiyor. Bunların 3'ü de ilgili gönderiler bölümünün önemli niteliklerini değiştirmenize yardımcı olur.

İlgili içerik bölümündeki her giriş, gönderiden seçilen küçük resmi ve gönderinin başlığını içerir. Küçük resim genellikle gönderiye dahil edilen ilk görüntüdür.

Değişkenlere atanan sayısal değerler post_thumbnail_widthpost_thumbnail_height  küçük resmin genişliğini ve yüksekliğini kontrol eder. Bu sayısal değerler piksel olarak kullanılır kod içindeki değerler. Bu sayısal değerleri gereksinimlerinize göre değiştirebilirsiniz.

Profesyonel İpucu: En iyi sonuçlar için genişlik ve yükseklik küçük resim değerlerini eşit tutun veya genişliği yükseklikten %20 ila %30 daha büyük tutun.

Temanızın içerik bölümünün genişliğine bağlı olarak, bu değişkenlerin her ikisini de kullanarak küçük resim boyutunu ayarlamanız gerekebilir. Blogunuzdaki küçük resim boyutunu denemekten çekinmeyin.

Üçüncü değişkenmax_related_entries, bu bölümde istediğiniz en fazla girdi sayısını denetler. Varsayılan değer, bu bölümde en fazla 6 ilgili gönderi girdisi alınmasını sağlar. Gereksinimlerinize göre bu değeri artırabilir veya azaltabilirsiniz.

Örnek bir ilgili gönderiler bölümünün nasıl görünebileceği aşağıda açıklanmıştır.

Burada, bu bölümde izin verilen maksimum giriş sayısı 6'dır ve küçük resmin genişliği yükseklikten daha büyüktür. Aynı bölüm, daha küçük ve kare küçük resimler ve satır başına 4'ü olmak üzere en fazla 8 giriş içerebilir.

Her şey blogunuzdaki mevcut 3 değişkeni nasıl kullandığınıza bağlıdır.

Artık ilgili yayınlar bölümü için temel CSS ve JavaScript'i entegre ettiğimize göre, son ve en önemli adımı tamamlamanın zamanı geldi.

Bölüm Oluşturma Kodunu Doğru Yerde Yürütme

Tüm kurulumu tamamlamak için bir şey daha kaldı. Başlıkta stil oluşturma ve oluşturma koduna sahip olsak da, ilgili gönderiler bölümünün mizanpaj içinde istenen yerde görünmesi için şablonun içinde doğru yerde çağırıp yürütmemiz gerekir. Bundan sonra yapacağımız şey bu.

Şablonunuza ve mevcut durumuna bağlı olarak, son yürütme kodu aşağıda belirtilen iki bloktan birine yerleştirilebilir. Şablonun HTML kodu içinde aşağıdaki iki satırı bulun. Not: Blogger eski şablonlarında bu satırları bulabiliyorsunuz.Ancak Blogger yeni şablonları kullanıyorsanız hemen bu satırların hemen altında verdiğim kod satırı arayın.

Eski blogger şablonlarında aranacak kod satırları:

• Satır 1: <div class='post-footer-line post-footer-line-2'>
• Satır 2: <div class='post-footer-line post-footer-line-3'>

Yeni blogger şablonlarında aranacak kod satırları:

<div class='post-footer'>

Şimdi, son kodun bu satırlardan birinin hemen altına yerleştirilmesi gerekiyor. Soru, şablonunuzda hangi satırı seçeceğinizdir? Bu basit bir test meselesi.

Önce kodu ilk satırın altına yapıştırın ve şablonu kaydedin. Bölümün olmasını istediğiniz yerde iyi ve iyi görünüp görünmediğini görmek için blog gönderilerinden birini açın.

Değilse, ilk satırın altındaki kodu kaldırın ve ikinci satırın altına yapıştırın. Bir kez daha web sayfasını yenileyin ve ilgili içerik bölümünün yerleşimine bakın. Ve burada, yukarıda belirtilen satırlardan birinin altına eklenmesi gereken son kod parçacığı.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop index='labelcount' values='data:post.labels' var='label'>
<script>
  var currentURL = &#39;<data:blog.url/>&#39;;
</script>
<b:if cond='data:labelcount &lt; 1'>
<script async='async' expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=display_related_posts&quot;' type='text/javascript'/></b:if></b:loop>
</div><div style='clear:both'/>
</b:if>

Genel olarak, satırlardan biri herhangi bir sorun olmadan amaca hizmet eder. 

Kullanıcılar bu bölümün stilini ve düzenini tamamen özelleştirebilir.

You might also like:

Bu satırları kendi dilinize göre değiştirin. Şablon kodlarını açın ve en üst satıra tıklayın, Bilgisayardan CTRL+F tuşlarını kullanarak aramayı açın. Bu satırı 

" You might also like:" yapıştırıp enter çekin bulun ve satırları istediğiniz kelimeler ile değiştirin.

Sonuç : Şunlar da hoşunuza gidebilir: Demo

Kaynak:https://www.freshtechtips.com/2019/05/related-posts-widget-for-blogger-blogspot.html.