إضافة سلايد شو إحترافي الإصدار الثاني

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

وقبل الولوج إلي الشرح يمكنك معاينة السلايد علي الموقع التالي .

معاينة

أولا قم بالبحث عن الوسم ]]></b:skin> ثم قم بوضع الأكواد التالية فوقة مباشرة.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051

/* ============= sliderwebponto ============= */#sliderwebponto h2.title{display:none}.recent-slider{position:relative;float:right;width:25%;margin-left:10px;margin-bottom:10px;box-shadow:0 0 5px 0 rgba(0,0,0,0.294);background:#fff;border:3px solid #fff}.recent-slider:first-child{float:right;width:48%;margin-left:10px;margin-bottom:0}.recent-slider:nth-child(3),.recent-slider:nth-child(5){margin-left:0}.recent-slider:first-child .slidep-img{height:435px}.recent-slider .slidep-img{display:block;background-size:cover;width:100%;height:210px}.recent-slider .slider-bottom{position:absolute;bottom:5%;padding:0 15px}.recent-slider .slider-bottom .slider-title a{color:#fff;tex-decoration:none;line-height:29px;font-size:20px}.recent-slider .slider-bottom .slider-title{display:block;margin-bottom:5px}.recent-slider .slider-bottom .ssummary{font-size:13px;color:#c7c7c7}.recent-slider .slider-bottom .tagslider{border-radius:20px;background:#fff;padding:0 10px;text-decoration:none;font-size:12px;margin-bottom:5px;color:#0b0b0a;display:inline-block}.recent-slider:first-child .slider-bottom{bottom:3%}.recent-slider:first-child .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;background:rgba(19,106,138,0.67);background:-webkit-linear-gradient(to right,#267871,#136a8a);background:linear-gradient(to right,#267871,#136a8a)}.recent-slider:nth-child(2) .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;background:#4776E6;background:-webkit-linear-gradient(to right,#8E54E9,#4776E6);background:linear-gradient(to right,#8E54E9,#4776E6)}.recent-slider:nth-child(3) .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;background:#FF8008;background:-webkit-linear-gradient(to right,#FFC837,#FF8008);background:linear-gradient(to right,#FFC837,#FF8008)}.recent-slider:nth-child(4) .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;background:#1D976C;background:-webkit-linear-gradient(to right,#93F9B9,#1D976C);background:linear-gradient(to right,#93F9B9,#1D976C)}.recent-slider:nth-child(5) .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;background:#ee0979;background:-webkit-linear-gradient(to right,#ff6a00,#ee0979);background:linear-gradient(to right,#ff6a00,#ee0979)}.recent-slider .slider-thumb a:before{opacity:.77}@media screen and (max-width : 1024px) {/* CSS CODE HERE FOR TABLETS ---*/.recent-slider:first-child{width:45%}.recent-slider{width:26.4%}@media (min-width: 992px) and (max-width: 1199px){.recent-slider{width:24.9%}}}@media screen and (max-width : 768px) {/* CSS CODE HERE FOR SMALL TABLETS ---*/.recent-slider{width:49%}.recent-slider:first-child .slidep-img{height:400px}.recent-slider .slidep-img{height:220px}.recent-slider .slider-bottom .tagslider,.list-post .recent-list:first-child .list-content .psummary{font-size:11px}.recent-slider .slider-bottom .slider-title a{font-size:15px}.recent-slider .slider-bottom .ssummary{font-size:12px}.recent-slider:first-child{width:100%;margin-bottom:10px}}@media screen and (max-width : 640px) {/* CSS CODE HERE FOR IPHONE ---*/.recent-slider{width:49%}}@media screen and (max-width : 480px) {/* CSS CODE HERE FOR SMARTPHONES ---*/.recent-slider{width:100%}}@media screen and (max-width : 320px) {/* CSS CODE HERE FOR SMALL MOBILES ---*/.recent-slider:first-child .slidep-img{height:280px}}

ثانيا: قم بالبحث عن الوسم </body> ثم قم بوضع الأكواد التالية فوقة مباشرة.

123456

<script type='text/javascript'>//<![CDATA[$("#sliderwebponto .widget").each(function(){var e=$(this),t=e.find(".widget-content").text(),l=t.split("/"),i=l[0],r=l[1],n=Math.floor(Math.random()*i+1);if(t.match("recentpost"))var o="/feeds/posts/default?alt=json-in-script&max-results="+i;else if(t.match("randompost"))var o="/feeds/posts/default?alt=json-in-script&orderby=updated&start-index="+n+"&max-results="+i;else var o="/feeds/posts/default/-/"+r+"?alt=json-in-script&max-results="+i;$.ajax({type:"GET",url:o,dataType:"jsonp",success:function(e){for(var t="<ul class='webponto-post'>",l="",i=0;i<e.feed.entry.length;i++){for(var r=e.feed.entry[i],n=r.title.$t,o=0;o<r.link.length;o++){if("replies"==r.link[o].rel&&"text/html"==r.link[o].type){r.link[o].title,r.link[o].href}if("alternate"==r.link[o].rel){var f=r.link[o].href;break}}var p,h=r.content.$t,u=$("<p>").html(h).text(),m=u.substring(0,170)+"...",v=r.category[0].term;try{p=0==i?r.media$thumbnail.url.replace("s72-c","w550-h420-c").replace("default","hqdefault"):r.media$thumbnail.url.replace("s72-c","w280-h220-c").replace("default","hqdefault")}catch(g){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),p=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ehEaCwOgF1lCbcsJCQ_yJ82UTdS7d7J4_HZ6QrlTtk9j94WMiILvwGQij50IQZylqYYlRhyphenhyphenSWr-vhSJV_mvmv8DxBAgm4eC1FEv-e_9EDkY6LKErJb1cK7vxyPQMyMNL0OR39J-_o2g/s1600/90.jpg"}l+='<li class="recent-slider"><div class="slideto">',l+='<div class="slider-content">',l+='<div class="slider-thumb"><a href='+f+'><img class="slidep-img" src="'+p+'" title="'+n+'" alt="'+n+'"/></a></div>',l+='<div class="slider-bottom">',l+='<a class="tagslider" href="/search/label/'+v+'">'+v+"</a>",l+='<div class="slider-title"><a class="slider-titlea" href='+f+">"+n+"</a></div>",0==i&&(l+='<p class="ssummary">'+m+"</p>"),l+="</div>",l+="</div></div></li>"}l+="</ul>",t+=l,$("#HTML418 .widget-content").html(t)}})});//]]></script>

ثالثا ومع الكود الأخير وهو الكود المسؤل عن إظهار السلايد في المكان الذي تريدة ويمكنك وضعة في اي مكان تريد ان يظهر به السلايد .

1234567891011121314151617181920

<b:if cond='data:blog.url == data:blog.homepageUrl'><div class='container'><div class='fw-widget'><b:section class='sliderwebponto' id='sliderwebponto' maxwidgets='1'><b:widget id='HTML418' locked='true' title='سلايدر' type='HTML'><b:widget-settings><b:widget-setting name='content'>5/فنون</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. استبدال "فنون" ب "recentpost" لعرض آخر الموضوعات . 
3. استبدال "فنون" ب "randompost" لعرض موضوعات عشوائية .

إلي هنا أكون قد انتهيت من الشرح وإن واجهتك اي مشكلة يمكنك تركها في التعليقات والله الموفق.