Blogger blogunuzda, yazı içine resimli benzer yazılar eklentisi eklemek ister misiniz? Bu yazımızda paylaştığımız "Resimli Benzer Yazılar Eklentisi", yazının ortasında çıkar. Blogunuza eklemek için yapmanız gerek tek şey aşağıdaki adımları sırasıyla uygulamak.
1. Blogger Kumanda Paneli > Şablon > HTML'yi Düzenle yolunu takip edin.
2. Açılan pencerede CTRL+F yapın ve çıkan arama kutucuğuna </head> yazıp enter tuşuna basın.
3. Bulunan kodun hemen üstüne aşağıdaki kodları ekleyin :
<style> #related-posts { float: left; width: 650px; border-bottom: 1px solid #ddd; height: 290px; } #related-posts h2 { margin-top: 50px; border-bottom: 0px; border-top: 1px solid #ddd; padding-top: 20px; margin-bottom: 10px; margin-left: 3px; color: #666; font-size: 16px; } </style> <b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvFGcJYAJlJkOoNPPMcWtMS9rmE0xOaUlfDxzxbBn88Sf_OyMii5Aet4rBZ-Kpb3r7h4_ZoJ6_mE-Va2Q-xngyWWV8u2acDa9rTRb25TAoU2hcLlVxvuIYjG4mmlyWRfRMuRx3vWZVwCXl/s1600/no_image.jpg"; var maxresults=3; var splittercolor="#fff"; var relatedpoststitle="Related Articles:"; </script> <script type='text/javascript'> //<![CDATA[ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; try {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;} catch (error){ s=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); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvFGcJYAJlJkOoNPPMcWtMS9rmE0xOaUlfDxzxbBn88Sf_OyMii5Aet4rBZ-Kpb3r7h4_ZoJ6_mE-Va2Q-xngyWWV8u2acDa9rTRb25TAoU2hcLlVxvuIYjG4mmlyWRfRMuRx3vWZVwCXl/s1600/no_image.jpg";} } if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"..."; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; } } } } function removeRelatedDuplicates_thumbs() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains_thumbs(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp3.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3[tmp3.length - 1] = thumburl[i]; } } relatedTitles = tmp2; relatedUrls = tmp; thumburl=tmp3; } function contains_thumbs(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels_thumbs(current) { var splitbarcolor; if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD"; for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==current)||(!relatedTitles[i])) { relatedUrls.splice(i,1); relatedTitles.splice(i,1); thumburl.splice(i,1); i--; } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>'); document.write('<div style="clear: both;"/>'); while (i < relatedTitles.length && i < 20 && i<maxresults) { document.write('<a style="text-decoration:none;padding:5px;float:left;'); if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"'); else document.write('"'); document.write(' href="' + relatedUrls[r] + '"><img style="width:200px;height:120px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>'); i++; if (r < relatedTitles.length - 1) { r++; } else { r = 0; } } document.write('</div>'); relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length); } //]]> </script> </b:if>
4. Daha sonra yine CTRL+F yapın ve <data:post.body/> kodunu bulun.
<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div></b:if>
Bu kodları ekleyip şablonu kaydettikten sonra "Resimli Benzer Yazılar Eklentisi" çalışacaktır.
Şablon'da kod değişikliği yapmadan önce "Şablon Yedeği"nizi alın. Hiçbir sorumluluk kabul etmiyoruz. / Lütfen yorum atmayı unutmayınız. / Bir sorunuz varsa yorum bölümünü kullanabilirsiniz.