إضافة مواضيع ذات الصلة لمدونة بلوجر نمط حديث مع الصور المصغرة
السلام عليكم ورحمة الله وبركاته
اليوم سوف أشرح لكم كيفية تركيب مواضيع ذات الصلة او مقالات ذات الصلة كما ترغبون في تسميتهاشرح بسيط لتركيبها اسفل كل تدوينة في مدونات بلوجر مع تأثيرات خاصة ويمكنك تخصيصها لمدونتك بسهولة شاهد الصورة التالية وهي الإضافة التي نتحدث عنها
مشاهدة مثال حي من هنا
كيفية تركيبها
أولا أذهب إلى لوحة التحكم في مدونتك >> القالب >> تحرير 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/> أتمنى أن تكون مفيددة حقاً
إلى اللقاء
ليست هناك تعليقات:
إرسال تعليق