إضافة مواضيع ذات الصلة لمدونة بلوجر نمط حديث مع الصور المصغرة
السلام عليكم ورحمة الله وبركاته
شرح بسيط لتركيبها اسفل كل تدوينة في مدونات بلوجر مع تأثيرات خاصة ويمكنك تخصيصها لمدونتك بسهولة شاهد الصورة التالية وهي الإضافة التي نتحدث عنها
مشاهدة مثال حي من هنا
كيفية تركيبها
أولا أذهب إلى لوحة التحكم في مدونتك >> القالب >> تحرير html
ثم بإستخدام مفتاح الاختصار ctrlوf قم بالبحث عن الرمز ]]></b:skin>
شاهد هذه الصورة لمعرفة كيفية البحث عن الرموز في قالب مدونتك.
بعد العثور على الرمز ]]></b:skin> أضف الكود التالي فوقه مباشرةً
/* مواضيع ذات الصلة ----------------------------------------------- */ #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>
ثم أضف الكود التالي فوقه مباشرةً
<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>
قم بالبحث عن الرمز <data:post.body/> وسوف يظهر لك على الشكل التالي:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
أضف الكود التالي أسفله مباشرةً
<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/> أتمنى أن تكون مفيددة حقاً
إلى اللقاء
السلام عليكم اولا شكرا علي المجهود والمعلومات، واتمني ان اجد لديكم ما ابحث عنه بارك الله فيكم
حيث اني ابحث عن كيفية اضافة صندوق الاعجاب الخاص بالفيس بوك وايضا صندوق سجل بريدك الالكتروني لتتابع احدث الموضوعات ، وصندوق التعليقات من الزوار ، وصندوق تقيم الموقع ، هل يوجد لديكم هذا ؟ وعموما انا ببحث في موقعكم والله الموفق
شكرا مرة ثانية
أهلاً وسهلاً بك أخ أسامة,
نعم يمكنك العثور على كل ماطلبته هنا إن شاء الله فقط أختر التسمية بلوجر من أقسام المدونة ثم أ[حث فيها او يمكنك إستخدام مربع البحث
أتمنى لك التوفيق شكراً جزيلاً لك.
دائمآ ممبدع أشكرك كتير على الاضافة
شكراً جزيلاً لك أتمنى أن أكون عند حسن ظنك
هحاول اطبق الدرس مع العلم انا عملتها اكثر من عشر مرات وما نجحت معى من مواقع اخرى اتمنى ان تكون هنا صحيحة وتنجح معى
ودى المدونة
www.devised1.tk
للاسف لم تنجح معى
لانك لم تضف الأكواد في مكانها الصحيح أقرأ ماهو اسفل الموضوع ثم قم بتطبيقه وسوف تنجح
اخي العزيز لم تنجح الطريقة معي على الرغم من كل المحاولات
www.sama-new.blogspot.com
جرب هذه الطريقة عزيزي
http://www.madad2.com/2015/05/Add-related-posts-on-Blogger.html