اضافة اداة مواضيع ذات صلة بشكل جديد منزلق عند تمرير الموس عليها

سلام عليكم ورحمة الله وببركته اهلا وسهلا بكم زوار موقعي الاعزاءاليوم نقدم لكم اضافة بشكل جديد ورائعة جدا تساعدك في تطوير قالب موقعك وتمنح جمالية للموقع وكذلك تسمح له بلبقاء لوقت اكثر

طريقة التركيب1 لوحة التحكم في مدونتك
2 القالب
3 تحرير html
4 بإستخدام مفتاح الاختصارF+ctrl قم بالبحث عن الرمز

  ]]></b:skin>

 5 قم بإضافة الكود الآتي فوقه مباشرة :

/* مواضيع ذات الصلة ----------------------------------------------- */ #related_posts {

line-height:1.4em;

margin-bottom:25px;
}

#related_posts li {
#related_posts ul,

padding:0;
list-style:none;
margin:0;
}


float:right;
#related_posts li {
width:175px;
height:150px;

padding:0 5px;
overflow:hidden;
}
#related_posts .inner {
}
#related_posts h4,

#related_posts .gmbrrltd {
.comments > h4 {
border-bottom:1px solid #D5D5D5;
}
display:block;

#related_posts .gmbrrltd,
overflow:hidden;
height:140px;
padding:4px;
border:1px solid #D5D5D5;
}

-moz-transition:margin-top 0.7s ease;
#related_posts .date {
-webkit-transition:margin-top 0.7s ease;

transition:margin-top 0.7s ease;
-ms-transition:margin-top 0.7s ease;
-o-transition:margin-top 0.7s ease;
}

font-size:120%;
#related_posts .gmbrrltd img {
width:100%;
height:100%;
}
#related_posts .inner strong {

margin:10px 0 0;
line-height:1.3em;
display:block;
overflow:hidden;
max-height:54px;
padding:0 4px;
}
#related_posts p {

#related_posts li:hover .gmbrrltd,
padding:0 4px;
position:static;
}
#related_posts a {
text-decoration:none;
}
#related_posts li:hover .date {

#related_posts .jcarousel-next {
margin-top:-150px;
}
#related_posts .jcarousel-container {
padding:10px 0;
}
#related_posts .jcarousel-prev,
top:-34px;
}

width:100%;
#related_posts .jcarousel-prev {
right:40px;
}
#related_posts .jcarousel-next {
right:5px;
}
#related_posts .loadingxx {
}


/* مواضيع ذات الصلة ----------------------------------------------- */ 

6 ابحث عن الرمز 

</head>

7 أضف الكود التالي فوقه مباشرةً

1

/* مواضيع ذات الصلة ----------------------------------------------- */ <script type='text/javascript'>//<![CDATA[ //Ajax Related Post by www.madad2.com function relatedPostsWidget(a){(function(e){var f={blogURL:"",maxPosts:5,maxTags:5,maxPostsPerTag:5,containerSelector:"#related_posts",tags:null,loadingText:"",loadingClass:"loadingxx",relevantTip:"",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],rlt_summary:100,ShowDate:true,relatedTitle:"مواضيع ذات الصلة:",readMoretext:"المزيد...",rlpBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",rlt_thumb:200,recentTitle:"مواضيع ذات الصلة:",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var k=0,b=null,g=null;if(!f.containerSelector){document.write('<div id="related_posts"></div>');f.containerSelector="#related_posts"}var c=function(x,r){k++;if(x.feed.entry){for(var w=0;w<x.feed.entry.length;w++){var m=x.feed.entry[w];var o,p,C,q,B,n,t,A,v,y,z="";for(var u=0,s=m.link.length;u<s;u++){if(m.link[u].rel=="alternate"){z=m.link[u].href;break}}o=("content" in m)?m.content.$t:("summary" in m)?m.summary.$t:"";var l=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;q=e("<div></div>").append(o.replace(l,""));B=q.find("img");if("media$thumbnail" in m){p=m.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+f.rlt_thumb+"-c");if(m.media$thumbnail.url.indexOf("img.youtube.com")!=-1){p=m.media$thumbnail.url.replace("default","0")}}else{if(B.length!=0){p=B[0].src}else{p=f.rlpBlank}}o=o.replace(/<\S[^>]*>/g,"");if(o.length>f.rlt_summary){o=o.substring(0,f.rlt_summary)}C=m.title.$t;y=m.published.$t.substring(0,10);n=y.substring(0,4);t=y.substring(5,7);A=y.substring(8,10);v=f.MonthNames[parseInt(t,10)-1];if(location.href.toLowerCase()!=z.toLowerCase()){i(z,C,p,o,n,A,v)}}}if(k>=f.tags.length){g.attr("class","");e("#related-posts-loadingtext",b).remove();if(f.maxPosts>0){e("li:gt("+(f.maxPosts-1)+")",g).remove()}}};var i=function(q,u,w,m,y,v,x){var r=e("li",g);for(var p=0,l=r.length;p<l;p++){var t=e("a",r.eq(p));var s=j(t);if(t.attr("href")==q){h(t,++s);for(var o=p-1;o>=0;o--){var n=e("a",r.eq(o));if(j(n)>s){if(p-o>1){r.eq(o).after(r.eq(p))}return}}if(p>0){r.eq(0).before(r.eq(p))}return}}g.append('<li><div class="inner"><a class="jdlunya" href="'+q+'" title="'+(f.relevantTip?f.relevantTip.replace("\d",1):"")+'"><span class="gmbrrltd"><img alt="'+u+'" src="'+w+'"/></span><strong>'+u+"</strong></a><p>"+m+'<a title="'+u+'" href="'+q+'">'+f.readMoretext+"</a>"+(f.ShowDate===true?'<span class="date"><strong>'+v+"</strong><span>"+x+"</span><span>"+y+"</span></span>":"")+"</p></div></li>")};var j=function(l){var m=parseInt(l.attr("score"));return m>0?m:1};var h=function(l,m){l.attr("score",m);if(f.relevantTip){l.attr("title",f.relevantTip.replace("\d",m))}if(f.postScoreClass){l.attr("class",f.postScoreClass+m)}};var d=function(){if(f.containerSelector!="#related_posts"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="related_posts"></div>').appendTo(l)}else{b=e(f.containerSelector)}if(!f.tags){f.tags=[];e('a[rel="tag"]:lt('+f.maxTags+")").each(function(){var o=e.trim(e(this).text().replace(/\n/g,""));if(e.inArray(o,f.tags)==-1){f.tags[f.tags.length]=o}})}if(f.tags.length==0&&!f.recentTitle){return}if(f.tags.length==0){e("<h4><span>"+f.recentTitle+"</span></h4>").appendTo(b)}else{if(f.relatedTitle){e("<h4><span>"+f.relatedTitle+"</span></h4>").appendTo(b)}}if(f.loadingText){e('<div id="related-posts-loadingtext">'+f.loadingText+"</div>").appendTo(b)}g=e("<ul "+(f.loadingClass?'class="'+f.loadingClass+'"':"")+"></ul>").appendTo(b);if(f.tags.length==0){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/default?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}else{for(var n=0,m=f.tags.length;n<m;n++){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/default/-/"+f.tags[n]+"?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}}};d();e(window).bind("load",function(){setTimeout(function(){var l;var m;var n=e(f.containerSelector);if(e(window).width()<479){l=1;m=n.width()/l}else{if(e(window).width()<980){l=2;m=n.width()/l}else{if(e(window).width()<1030){l=3;m=n.width()/l}else{l=4;m=n.width()/l}}}e("ul",n).jcarousel({easing:"easeInOutQuint",animation:800,auto:4,wrap:"last",scroll:l,setupCallback:function(o){o.reload()},reloadCallback:function(p){var o=Math.floor(p.clipping()/m);p.options.scroll=o;p.options.visible=o}})},3000)})})(jQuery)}; //]]> </script>/* مواضيع ذات الصلة ----------------------------------------------- */ 

أتي لأخر إضافة والتي يخطأ فيها الكثير..
8 قم بالبحث عن الرمز 

<data:post.body/> 

وسوف يظهر لك على الشكل  التالي:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

9 أضف الكود التالي أسفله مباشرةً

1

<div id='related_posts'/>  <script class='jshilang' type='text/javascript'>  relatedPostsWidget(); </script><br/>

أكرر لا تضف الكود السابق حتى تجد الرمز

<b:if cond='data:blog.pageType == &quot;item&quot;'>

فوقه هذا الرمز يمكن ان يتوفر في مدونتك متكرر ولكن لن تجد اسفله مرة واحدة سوى الرمز 

<data:post.body/>

 اذا لم تجده قم بالبحث عن الرمز 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

ثم اضفه بعد 

<data:post.body/>

 أتمنى أن يكون شرحي مفيدا و مفهوما والسلام عليكم.