Blogger responsive dikey resimli benzer yazılar eklentisi

Mobil uyumlu harika blogger responsive resimli dikey ilgili benzer yazılar eklentisi ile blog ziyaretçilerinizi bloğunuzda daha fazla sayfa gezmesini sağlayın. Daha önce Blogger resimli ilgili benzer yazılar eklentisi yatay versiyonunu vermiştik. Şimdiki benzer yazılar eklentisi dikey şeklinde görünüme sahiptir.

 Yabancı blogger responsive temalarda gördüğünüz "Related Post" yani ilgili yazılar eklentisinin özelliği tamamen duyarlı (responsive) olmasıdır.

Blogger responsive dikey ilgili yazılar eklentisi ekle:

Aşağıdaki kodları ctrl+f yardımı ile ]]> kodunun hemen üzerine gelecek şekilde ekleyin.

/* netbilen Related post */
.related-post { margin: 15px 0; font-size : 13px; background : #fff; border:1px solid #ccc; color : #999; }
.related-post h4{font-size:14px;margin:0 0 .5em;background:#76b9e7;color:#fff;padding:14px 20px 14px 75px;font-weight:normal;position:relative;font-family:Oswald,Arial,Sans-Serif;text-transform:uppercase}
.related-post h4:before{content:"\f074";font-family:fontAwesome;font-size:22px;font-style:normal;background-color:#297FB8;color:#fff;top:0;left:0;padding:9px 20px;position:absolute}
.related-post-style-2, .related-post-style-2 li { margin : 0; padding : 0; list-style : none; } .related-post-style-2 li { padding : 10px; border-top : 1px solid #ecf0f1; overflow : hidden; }
.related-post-style-2 li:first-child { border-top : none; } .related-post-style-2 .related-post-item-thumbnail { width : 50px; height : 50px; padding : 0; float : left; margin : 2px 10px 0 0;} 
.related-post-style-2 .related-post-item-title { font-family : "Oswald", Verdana, Sans-Serif; font-size : 110%; } .related-post-style-2 .related-post-item-summary { color : #555; display : block; overflow : hidden; } 
.related-post-style-2 .related-post-item-more { display : none; }

Ardından temanızda görülmesini istediğiniz yere aşağıdaki kodları ekleyin.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;ilgili yayınlar&lt;/h4&gt;&quot;,
      numPosts: 5,
      summaryLength: 120,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 50,
      noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU3OMN8R4ltk7W9-IHX-nKzI6nEPE7aXcIhDZIXPVwm_7tHho_yhx5VW0-XAKPexBkZWn0xVsL3aQ88zsVgF_cOLuO_HYsLj0MNzCplApDS2vRhmHYShxua0v8nvZbVlJKbQ1GCbL5DiU/s120-c/laptop-icon3.png&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;&quot;,
      widgetStyle: 2,
      callBack: function() {}
  };
</script>
  <script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>ilgili yayınlar:</h4>",widgetStyle:1,homePage:"/",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
  </b:if>