السلام عليكم ورحمة الله تعالى وبركاته
اقدم لكم اضافة جديدة هي اضافة مواضيع ذات صلة تنزلق عند تمرير الماوس عليهايعتبر هذا الكود من الاضافات ذات رونق و جمال يضفيها على مدونتك
من خاصيتها عند تمرير الماوس على صورة الموضوع تنزلق الى الاعلى ليظهر مختصرالموضوع قبل كل شيء شاهد الاضافة على هذه المدونة و ان اعجبتك تفضل لفهم طريقة وكيفية تركيبها
1 لوحة التحكم في مدونتك
2 القالب
3 تحرير html
4 بإستخدام مفتاح الاختصارF+ctrl قم بالبحث عن الرمز
]]></b:skin>
5 قم بإضافة الكود الآتي فوقه مباشرة :/* مواضيع ذات الصلة ----------------------------------------------- */ #related_posts { line-height:1.4em; margin-bottom:25px; } #related_posts ul, #related_posts li { list-style:none; padding:0; margin:0; } #related_posts li { width:175px; float:right; height:150px; overflow:hidden; } #related_posts .inner { padding:0 5px; } #related_posts h4, .comments > h4 { border-bottom:1px solid #D5D5D5; } #related_posts .gmbrrltd { display:block; overflow:hidden; height:140px; padding:4px; border:1px solid #D5D5D5; } #related_posts .gmbrrltd, #related_posts .date { -webkit-transition:margin-top 0.7s ease; -moz-transition:margin-top 0.7s ease; -ms-transition:margin-top 0.7s ease; -o-transition:margin-top 0.7s ease; transition:margin-top 0.7s ease; } #related_posts .gmbrrltd img { width:100%; height:100%; } #related_posts .inner strong { font-size:120%; line-height:1.3em; display:block; overflow:hidden; max-height:54px; padding:0 4px; } #related_posts p { margin:10px 0 0; padding:0 4px; position:static; } #related_posts a { text-decoration:none; } #related_posts li:hover .gmbrrltd, #related_posts li:hover .date { margin-top:-150px; } #related_posts .jcarousel-container { padding:10px 0; } #related_posts .jcarousel-prev, #related_posts .jcarousel-next { top:-34px; } #related_posts .jcarousel-prev { right:40px; } #related_posts .jcarousel-next { right:5px; } #related_posts .loadingxx { width:100%; } /* مواضيع ذات الصلة ----------------------------------------------- */
</head>
7 أضف الكود التالي فوقه مباشرةً/* مواضيع ذات الصلة ----------------------------------------------- */ <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 == "item"'>
<data:post.body/>
9 أضف الكود التالي أسفله مباشرةً<div id='related_posts'/>
<script class='jshilang' type='text/javascript'>
relatedPostsWidget();
</script><br/>
<b:if cond='data:blog.pageType == "item"'>
فوقه هذا الرمز يمكن ان يتوفر في مدونتك متكرر ولكن لن تجد اسفله مرة واحدة سوى الرمز
<data:post.body/>
اذا لم تجده قم بالبحث عن الرمز
<b:if cond='data:blog.pageType == "item"'>
ثم اضفه بعد
<data:post.body/>
أتمنى أن يكون شرحي مفيدا و مفهوما والسلام عليكم.
شبكة عدناني فيها الكثير والكثير من اطيب الكلام
و أجمل القصص و أروع المواضيع، نعمل جادين لتقديم ما يفيد ،
ستجدون في صفحتنا خيرا كثيرا إن شاء الله :
0 التعليقات :
إرسال تعليق