Hover Efektli Resimli Benzer Yazılar Eklentisi

Hover Efektli Resimli Benzer Yazılar Eklentisi

 

ŞABLONUNUZUN İLK ÖNCE YEDEĞİNE ALINIZ

Blogger 

için benzer yazılar eklentisi google aramalarımda iyi sonuçlar veriyor ve bundan dolayı bende yeni bir benzer yazılar eklentisi ile sizleri tanıştırmak istiyorum ve oldukça şık ve harika olduğunu söyleyebilirim,her blog için uyarmı bilmiyorum ama ben kendim kullandığım için bana uyduğunu söyleyebilirim.Eklenti hover efekti geçişi ile sizleri karşılaştırıyor herhangi bir benzer yazının üzerine gelince sağ taraftan geçiş yapıyor ve o bağlantınıza ait yazınızın bir bölümünü gösteriyor sizlere.Daha önce sizlere paylaşmış olduğum benzer yazılardan bir kaçını tekrar hatırlatayım.

Blogger Yazılı Benzer Yazılar Stilleri

Yeni Stil Benzer Yazılar Eklentisi

1-Şablon Tıklıyoruz > HTML Düzenle > CTRL+F yardımı ile ]]></b:skin> kodunu buluyoruz ve aşağıdaki kodları hemen üstüne yerleştiriyoruz.

<!--Hover Efektli Resimli Benzer Yazılar Eklentisi bloggererdal--> #related_posts h4{font-size:220%;font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;text-transform:capitalize;margin-top:20px} .isirelated h5{text-transform:capitalize;font-size:120%;margin-bottom:3px} #relpost_img_sum img{width:120px;height:120px;border: 2px solid #1d1d1d; border-radius: 5px; background-image:-moz-linear-gradient(top,#ffffff,#eeeeee); background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#eeeeee)); filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#eeeeee); background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffffff),color-stop(1,#eeeeee)); background:-moz-linear-gradient(center top,#fff 0,#eee 100%); -pie-background:linear-gradient(270deg,#ffffff,#eeeeee); -moz-box-shadow:0 0 0 4px rgba(100,100,100,0.1); box-shadow:0 0 0 4px rgba(100,100,100,0.1); -webkit-box-shadow:0 0 0 4px rgba(100,100,100,0.1);} .isirelated{width:300px;z-index:2;padding:5px 8px;background-color:#F3F3F3;border-bottom:2px solid black;position:absolute;top:-70%;left:200px;visibility:hidden;opacity:0;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s} #relpost_img_sum li:hover .isirelated{visibility:visible;opacity:1;left:10px} .isirelated::after{content:"";width:0;height:0;border-width:10px 5px;border-style:solid;border-color:black transparent transparent transparent;position:absolute;top:100%;left:11px} #relpost_img_sum li{list-style:none;width:120px;height:120px;position:relative;float:left;margin-right:5px} .news-text{font-size:90%} #related_posts{height:180px;border: 2px solid #c4c4c4; border-radius: 5px; background-image:-moz-linear-gradient(top,#ffffff,#eeeeee); background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#eeeeee)); filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#eeeeee); background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffffff),color-stop(1,#eeeeee)); background:-moz-linear-gradient(center top,#fff 0,#eee 100%); -pie-background:linear-gradient(270deg,#ffffff,#eeeeee); -moz-box-shadow:0 0 0 4px rgba(100,100,100,0.1); box-shadow:0 0 0 4px rgba(100,100,100,0.1); -webkit-box-shadow:0 0 0 4px rgba(100,100,100,0.1);} <!--Hover Efektli Resimli Benzer Yazılar Eklentisi bloggererdal-->

2-Tekrar CTRL+F yardımı ile </head> kodunu buluyoruz ve aşağıdaki kodları hemen üstüne yerleştiriyoruz.

//<![CDATA[ $(document).ready(function(){ if(!$.browser.msie) $(".glap ul li").hover(function() {$(this).siblings().stop().fadeTo(400,0.4);}, function() { $(this).siblings().stop().fadeTo(400,1); }); }); //]]> <b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> //<![CDATA[ var relnojudul=0;var relmaxtampil=4;var numchars=150;var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(d,c){var b=d.split("<");for(var a=0;a<b.length;a++){if(b[a].indexOf(">")!=-1){b[a]=b[a].substring(b[a].indexOf(">")+1,b[a].length)}}b=b.join("");b=b.substring(0,c-1);return b}function relpostimgcuplik(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];reljudul[relnojudul]=d.title.$t;postcontent="";if("content" in d){postcontent=d.content.$t}else{if("summary" in d){postcontent=d.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in d){postimg=d.media$thumbnail.url}else{postimg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwJO3qUF48KCWdQqc3ZYdU79Xn9QZhtSDg5184Y4jdZkurKAmcJuAqMF5qHWF-MdzjmLqQ-3fKqH5f1Uje0OBNOFvwzXF6TIlhGBYtModgVC9pxWKfAvN-0YlaBQ_vl2w252t4YgJtJMo/s1600/no_image.jpg"}relgambar[relnojudul]=postimg;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relurls[relnojudul]=d.link[a].href;break}}relnojudul++}}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function artikelterkait(){var j=new Array(0);var h=new Array(0);var g=new Array(0);var d=new Array(0);for(var k=0;k<relurls.length;k++){if(!contains(j,relurls[k])){j.length+=1;j[j.length-1]=relurls[k];h.length+=1;h[h.length-1]=reljudul[k];g.length+=1;g[g.length-1]=relcuplikan[k];d.length+=1;d[d.length-1]=relgambar[k]}}reljudul=h;relurls=j;relcuplikan=g;relgambar=d;for(var k=0;k<reljudul.length;k++){var c=Math.floor((reljudul.length-1)*Math.random());var p=reljudul[k];var m=relurls[k];var f=relcuplikan[k];var b=relgambar[k];reljudul[k]=reljudul[c];relurls[k]=relurls[c];relcuplikan[k]=relcuplikan[c];relgambar[k]=relgambar[c];reljudul[c]=p;relurls[c]=m;relcuplikan[c]=f;relgambar[c]=b}var n=0;var a=Math.floor((reljudul.length-1)*Math.random());var e=a;var o;var l=document.URL;while(n<relmaxtampil){if(relurls[a]!=l){o=" <li class='news-title clearfix'>";o+="<a href='"+relurls[a]+"' rel='nofollow' target='_top' title='"+reljudul[a]+"'><img src='"+relgambar[a]+"' /></a>";o+="<div class='isirelated'> <h5> "+reljudul[a]+"</h5> ";o+="<span class='news-text'>"+relcuplikan[a]+" ... </span></div> ";o+="</li> ";document.write(o);n++;if(n==relmaxtampil){break}}if(a<reljudul.length-1){a++}else{a=0}if(a==e){break}}}; //]]></script> </b:if>



3-Tekrar CTRL+F yardımı ile <data:post.body/> kodunu buluyoruz ve aşağıdaki kodları hemen altına yerleştiriyoruz bu kod için bir kaç sonuç çıkabilir siz ikinci bulduğunuz kodun altına uygulayın.

<b:if cond='data:blog.pageType == "item"'> <div id='related_posts'> <p style='color:#111; font-weight: bold; font-size: 22px;font-family: "Trebuchet MS",sans-serif; margin:0px 0px 5px 0px; '> Benzer Yazılar</p> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=40"' type='text/javascript'/> </b:loop> <span class='glap'><ul id='relpost_img_sum'> <script type='text/javascript'>artikelterkait();</script> </ul> </span> </div> </b:if>


Buraya kadar bütün kodları doğru yere yapıştırdıysanız blogunuzda herhangi bir konuya girin ve kontrol edin.
Başka eklenti veya soru sormak isterseniz yorumlardan veya iletişim sayfasından bizleri ulaşabilirsiniz.
KAYNAK: BLOGGERTURKEY