منصة بلوجر هي من افضل المنصات لإنشاء مدونة الكترونية بغض النظر عن المحتوى الذي تقدمه وطبعا المدونين في كل مرة يبحثون عن أشياء جديدة لتطوير مواقعهم و مدوناتهم و في درس اليوم سأعطيكم إضافة يبحث عنه كل عشاق بلوجر ، الا و هي سلايد شو تلقائي و إحترافي يمكن إضافته إلى جميع مدونات بلوجر ، و لكن تابع الموضوع جيدا لتتلعم تركيبها بإحترافية .
. وقبل بداية الشرح نشير إلى ان هذا اللايد شو تم نشره لأول مرة على موقع نقة ويب
:يمكنك معاينة السلايد علي الموقع التالي .
- أولا قم بالبحث عن الوسم ]]></b:skin> ثم قم بوضع الأكواد التالية فوقة مباشرة.
#recenpo .widget-content{font-family:inherit }.recentsp-Webponto .Webponto-post{float:right;overflow:hidden;margin:0;padding:0}.Webponto-post .recent-box{float:right;width:41%;position:relative;margin-bottom:11px}.Webponto-post .recent-box:first-child{width:58%;margin-left:11px}.Webponto-post .recent-box:first-child .magp-thumb img{background-size:cover;width:100%;height:499px}.magp-thumb img{background-size:cover;width:100%;height:244px}.recent-box .mag-content{position:absolute;bottom:2%;padding:0 17px;right:0}.recent-box .mag-content .postwriter,.recent-box .mag-content .magp-date{display:inline-block}.Webponto-post .post-title .magp-title{font-weight:700;text-shadow:1px 1.732px 0 rgba(0,0,0,0.086);color:#fff;font-size:18px;-webkit-transform:matrix(1.04943167426545,0,0,1,0,0);-moz-transform:matrix(1.04943167426545,0,0,1,0,0);-ms-transform:matrix(1.04943167426545,0,0,1,0,0);transform:matrix(1.04943167426545,0,0,1,0,0);margin:0 10px}.Webponto-post .mag-bottom .psummary{color:#c4c4c4;font-family:inherit ;line-height:21px;margin-bottom:2px;font-size:15px}.Webponto-post .recent-box .magp-thumb a:before{content:'';position:absolute;width:100%;height:100%;background:-moz-linear-gradient(top,rgba(31,31,31,0.26) 0%,rgba(31,31,31,0.59) 100%);background:-webkit-linear-gradient(top,rgba(31,31,31,0.26) 0%,rgba(31,31,31,0.59) 100%);background:linear-gradient(to bottom,rgba(31,31,31,0.14) 0%,rgba(31,31,31,0.39) 100%);background:-o-linear-gradient(to bottom,rgba(31,31,31,0.14) 0%,rgba(31,31,31,0.39) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#421f1f1f',endColorstr='#961f1f1f',GradientType=0)}.Webponto-post .post-title .magp-title:before{content:'';background:#ff8400;display:inline-block;width:10px;height:10px;margin-left:10px}.Webponto-post .magp-date .post-date{color:#dedede;font-size:14px}.Webponto-post .magp-date .post-date:before,.Webponto-post .postwriter .writer-p:before{content:'\f073';display:inline-block;font-family:fontawesome;margin-left:5px;color:#ff8400}.Webponto-post .postwriter .writer-p{color:#dedede;font-size:14px}.Webponto-post .postwriter{margin-left:10px}.Webponto-post .postwriter .writer-p:before{content:'\f007'}@media screen and (max-width : 768px) {.recentsp-Webponto{float:right;display:none}}
- ثانيا: قم بالبحث عن الوسم </body> ثم قم بوضع الأكواد التالية فوقة مباشرة.
<script type='text/javascript'>//<![CDATA[$("#recenpo .widget").each(function(){var t=$(this).find(".widget-content").text(),e=t.split("/"),l=e[0],i=e[1],r=Math.floor(Math.random()*l+1);if(t.match("recentpost"))var n="/feeds/posts/default?alt=json-in-script&max-results="+l;else n=t.match("randompost")?"/feeds/posts/default?alt=json-in-script&orderby=updated&start-index="+r+"&max-results="+l:"/feeds/posts/default/-/"+i+"?alt=json-in-script&max-results="+l;$.ajax({type:"GET",url:n,dataType:"jsonp",success:function(t){for(var e="<ul class='Webponto-post'>",p="",o=0;o<t.feed.entry.length;o++){var f,h;for(l=(f=t.feed.entry[o]).title.$t,i=0;i<f.link.length;i++)if("replies"==f.link[i].rel&&"text/html"==f.link[i].type&&(r=f.link[i].title,n=f.link[i].href),"alternate"==f.link[i].rel){var m=f.link[i].href;break}try{h=0==o?f.media$thumbnail.url.replace("s72-c","w600-h400-c").replace("default","hqdefault"):f.media$thumbnail.url.replace("s72-c","w400-h200-c").replace("default","hqdefault")}catch(t){s=f.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),h=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://3.bp.blogspot.com/-qnLm52EsvBE/VDkrZ46TWXI/AAAAAAAAAsM/tiJ36WiboU4/w600-h400-c/90.jpg"}p+='<li class="recent-box"><div class="recento">',p+='<div class="magp-thumb"><a href="'+m+'" target ="_top"><img class="magp-img" src="'+h+'" title="'+l+'" alt="'+l+'"/></a></div>';var u=f.author[0].name.$t,v=f.published.$t,g=f.content.$t;p+='<div class="mag-content">',p+='<div class="post-title"><a class="magp-title" href='+m+' target ="_blank">'+l+"</a></div>",p+='<div class="mag-bottom">',p+='<p class="psummary">'+$("<p>").html(g).text().substring(0,150)+"...</p>",p+='<div class="postwriter"><a href='+f.author[0].uri.$t+' class="writer-p">'+u+"</a></span></div>";for(var x=[1,2,3,4,5,6,7,8,9,10,11,12],k=["01","02","03","04","05","06","07","08","09","10","11","12"],A=v.split("-")[2].substring(0,2),w=v.split("-")[1],y=v.split("-")[0],j=0;j<x.length;j++)if(parseInt(w)==x[j]){w=k[j];break}p+='<div class="magp-date"><a href="'+m+'" class="post-date"> '+A+"/"+w+"/"+y+"</s></div>",p+="</div>",p+="</div></div></li>"}e+=p+="</ul>",$("#HTML784 .widget-content").html(e)}})});//]]></script>
- ثالثا ومع الكود الأخير وهو الكود المسؤل عن إظهار السلايد في المكان الذي تريدة ويمكنك وضعة في اي مكان تريد ان يظهر به السلايد .
<b:if cond='data:blog.url == data:blog.homepageUrl'><div class='recentsp-Webponto'><div class='container'><b:section class='no-items' id='recenpo' maxwidgets='1' showaddelement='no'><b:widget id='HTML784' locked='true' title='سلايد شو' type='HTML' version='1'><b:widget-settings><b:widget-setting name='content'>3/فنون</b:widget-setting></b:widget-settings><b:includable id='main'><div class='widget-content'><data:content/></div><b:include name='quickedit'/></b:includable></b:widget></b:section></div></div></b:if>
- وهناك ثلاث خيارات لعرض السلايدر.
- استبدال "فنون" بإحدى التسميات الموجوده في مدونتك لعرض التدوينات منها فقط .
- استبدال "فنون" ب "recentpost" لعرض آخر الموضوعات .
- استبدال "فنون" ب "randompost" لعرض موضوعات عشوائية .
- إلي هنا أكون قد انتهيت من الشرح وإن واجهتك اي مشكلة يمكنك تركها في التعليقات والله الموفق.