İçeriğiniz ne kadar iyi olursa olsun, blog düzenindeki en önemli unsurlardan biri de “İlgili içerik bölümüdür.”
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.
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.
Başlığa Temel CSS ve JavaScript Ekleme
<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 == "item"'>
<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.
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 == "item"'>
<div id='related-posts'>
<b:loop index='labelcount' values='data:post.labels' var='label'>
<script>
var currentURL = '<data:blog.url/>';
</script>
<b:if cond='data:labelcount < 1'>
<script async='async' expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=display_related_posts"' 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:
Sonuç : Şunlar da hoşunuza gidebilir: Demo
Kaynak:https://www.freshtechtips.com/2019/05/related-posts-widget-for-blogger-blogspot.html.
