أخر الاخبار

إضافة سلايد شو إحترافي مقتبس من قالب المحترف نسخة 2018


 منصة بلوجر هي من افضل المنصات لإنشاء مدونة الكترونية بغض النظر عن المحتوى الذي تقدمه وطبعا المدونين   في كل مرة يبحثون عن أشياء جديدة لتطوير مواقعهم و مدوناتهم و في درس اليوم سأعطيكم إضافة يبحث عنه كل عشاق بلوجر ، الا و هي سلايد شو تلقائي و إحترافي يمكن إضافته إلى جميع مدونات بلوجر ، و لكن تابع الموضوع جيدا لتتلعم تركيبها بإحترافية .
. وقبل بداية  الشرح نشير إلى ان هذا اللايد شو تم نشره لأول مرة على موقع نقة ويب 

:يمكنك معاينة السلايد علي الموقع التالي .


  • أولا قم بالبحث عن الوسم ]]></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>
  1. وهناك ثلاث خيارات لعرض السلايدر.
  2.  استبدال "فنون" بإحدى التسميات الموجوده في مدونتك لعرض التدوينات منها فقط . 
  3. استبدال "فنون" ب "recentpost" لعرض آخر الموضوعات . 
  4. استبدال "فنون" ب "randompost" لعرض موضوعات عشوائية .
  5. إلي هنا أكون قد انتهيت من الشرح وإن واجهتك اي مشكلة يمكنك تركها في التعليقات والله الموفق.
تعليقات



حجم الخط
+
16
-
تباعد السطور
+
2
-