Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu

2/23/2017
Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu

Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu - Blog sayfalarında kullanılan ilgili yayınlar (makale) widget'ini biliyorsunuz. Bu widget ile blog yayınlarınızın içerisinde sadece link vererek küçük bağlantılar şeklinde blog yayınlarınızın arasında etikete uygun yayın başlıklarının bir dizi şeklinde görünmesi özelliğini paylaşıyoruz.

Bir önceki yazımızda buna benzer faklı bir yayın paylaşmıştık "Blog Yayınları İçerisine Adsense Reklemları Ekleme" fakat bu biraz daha farklı bir eklenti.

Bu yazımızda blog yayınları arasında ilgili yayın bağlantıların görünmesini sağlayarak hem blogunuzun iç bağlantılarının kalitesini artırarak blogunuzun bağlantılarını iyileştirme amaçlanmıştır. Böylece blogunuz güçlü iç bağlantılara sahip olarak blogunuzun ziyaretçi sayını da artırmış oluyorsunuz. Şim bu özellikleri blogunuzda uygulamak için aşağıdaki adımları takip edin.

Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Nasıl Kurulur?


1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Şablon kodları sayfasında CTRL+F yardımı ile </head> kodunu bulun ve aşağıdaki javaScript kodunu </head> kodunun bir satır üzerine ekleyin.

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

2- Aşağıdaki CSS kodunu ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin.

Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu

Örnek Widget İlgili Yayınlar Stil 1
/* İlgi Yayınlar Widget CSS */
.rtd-str{position:relative;padding:0;margin:15px auto;width:100%;}
.rtd-str h4{background:#9e9e9e;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #9e9e9e}
.rtd-str ul{margin:0;padding:0}
.rtd-str 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}
.rtd-str ul li:nth-child(odd){background:#fefefe}
.rtd-str ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.rtd-str ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#ff5722;overflow:hidden;transition:all .3s}
.rtd-str ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.rtd-str a{color:#00bcD4;font-size:13px;margin:0 0 0 30px;}
.rtd-str a:hover{color:#03a1b5;text-decoration:underline}
.rtd-str 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)}}

Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu

Örnek Widget İlgili Yayınlar Stil 2


/* İlgi Yayınlar Widget CSS 2 */
.rtd-str{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
.rtd-str h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
.rtd-str ul{margin:0;padding:0}
.rtd-str ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.rtd-str ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:#ff5722;overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.rtd-str ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
.rtd-str a{color:#00bcD4;font-size:14px;margin:0 0 0 30px;}
.rtd-str a:hover{color:#03a1b5;}
.rtd-str ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.rtd-str{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.rtd-str h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.rtd-str a{font-size:14px;margin:0}.rtd-str a:hover{color:#03a1b5}
.rtd-str ul li{padding:5px 0}
.rtd-str ul li:before,.rtd-str ul li:hover:before{display:none}}
Blogunuzda Font Awesome icon yazı simgesinin kurulu olduğunu kontrol edin.
3- Aşağıdaki HTML kodu eklemek için blogunuzun şablon kodları sayfasında <data:post.body/> kodunu bulun ve aşağıdaki HTML kod ile bu kodu değiştirin. Blogunuzda birden fazla <data:post.body/> kodu olabilir, doğru kodu bulmak için tek tek deneyin.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='rtd-str'>
<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=rtd_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Benzer Konular</h4>
<script type='text/javascript'>
removertdDuplicates();
printrtdLabels();
</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>

4- Son olarak blogunuzu kontrol ederek şablonu keydedin.


Bu yayınımızda ilgili yayın bağlantılarını blog yayınları arasında gösterilmesini anlattık. Bu uyguluma blog okuyucularını asla rahatsız etmez, diğer yayın bağlatılarının da ziyaretçilere görünmesi ile blog içi dolaşımını artırır. Böylece bir blog için faydalı olan bir eklentiyi daha sizlerle paylaştık ve bu bilgilerin blogunuz için çok faydalı olacağını düşünüyorum.

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

2 yorum

çalışmıyor bu kodlar

Cevap

Kodları kontrol ettim örnek sayfadaki ile aynı herhangi bir problem yok.

Cevap