كلمة ف صوره

موضوع هام لكل محبي السلايد شو

السلام عليكم ورحمة الله وبركاته , متابعي مدونة محترفي التدوين الكرام
, موضوعنا هو كيفية وضع سلايد شو داخل مدونتك بشكل احترافي وسلسل جدا مثل ما هو بداخل هذه الصورة :- 

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

/* ============= 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> ثم قم بوضع الأكواد التالية فوقة مباشرة.

<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/AVvXsEj98iYsJL4R8zkFPZ4PNPa_mVL05ccD9jagn4cvO_tE3dCRiXmXpsTfONBHcalCA9urJD-4oIt-CaEsWceWxDGznoWCq8BgEQ0pnZAtdLdLuqVFwNLlxvCYDGQtg8yQtvuLN8R4SfrIvHQ/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>

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

<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> <br /> <div dir="rtl" style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #242526; font-family: "Droid Arabic Naskh", "Segoe UI", Tahoma; font-size: 15.5px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: right; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; transition: all 0.3s ease-out 0s; white-space: normal; widows: 2; word-spacing: 0px;" trbidi="on"> <h4 style="background: rgb(247, 247, 247); border-left: 7px solid rgb(55, 176, 109); border-radius: 5px; border-right: 7px solid rgb(55, 176, 109); box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; box-sizing: border-box; font-family: LevonFont, "Segoe UI", Tahoma !important; font-size: 15.5px; font-weight: 400; line-height: 1.5em; margin: 10px 0px; padding: 10px 15px; text-align: right; transition: all 0.3s ease-out 0s;"> وهناك ثلاث خيارات لعرض السلايدر.</h4> <br /> <ol style="box-sizing: border-box; counter-reset: li 0; font-family: amni8-font, tahoma; font-size: 15.5px; font-weight: normal; list-style: none; margin: 6px 0px 0px; padding: 0px; text-align: right; transition: all 0.3s ease-out 0s;"> <li style="background: rgba(245, 245, 245, 0.58); box-shadow: rgba(0, 0, 0, 0.16) 15px 9px 7px -12px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px; box-sizing: border-box; font-family: "Droid Arabic Naskh", "Segoe UI", Tahoma !important; font-size: 15.5px; list-style: none; margin: 0px 0px 8px 15px !important; padding: 6px 30px 8px 7px !important; position: relative; text-indent: 14px; transition: all 0.3s ease-out 0s;"> استبدال "فنون" بإحدى التسميات الموجوده في مدونتك لعرض التدوينات منها فقط . </li> <li style="background: rgba(245, 245, 245, 0.58); box-shadow: rgba(0, 0, 0, 0.16) 15px 9px 7px -12px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px; box-sizing: border-box; font-family: "Droid Arabic Naskh", "Segoe UI", Tahoma !important; font-size: 15.5px; list-style: none; margin: 0px 0px 8px 15px !important; padding: 6px 30px 8px 7px !important; position: relative; text-indent: 14px; transition: all 0.3s ease-out 0s;">استبدال "فنون" ب "recentpost" لعرض آخر الموضوعات . </li> <li style="background: rgba(245, 245, 245, 0.58); box-shadow: rgba(0, 0, 0, 0.16) 15px 9px 7px -12px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px; box-sizing: border-box; font-family: "Droid Arabic Naskh", "Segoe UI", Tahoma !important; font-size: 15.5px; list-style: none; margin: 0px 0px 8px 15px !important; padding: 6px 30px 8px 7px !important; position: relative; text-indent: 14px; transition: all 0.3s ease-out 0s;">استبدال "فنون" ب "randompost" لعرض موضوعات عشوائية .</li> </ol> <h3 style="background: rgb(238, 238, 238); border-bottom: 5px solid rgb(55, 176, 109); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; box-sizing: border-box; font-family: LevonFont, "Segoe UI", Tahoma !important; font-size: 19px; font-weight: 400; line-height: 1.5em; margin: 9px 0px; padding: 6px 15px; text-align: center; transition: all 0.3s ease-out 0s;"> إلي هنا أكون قد انتهيت من الشرح وإن واجهتك اي مشكلة يمكنك تركها في التعليقات والله الموفق.</h3> </div> </form> </div> </center> </div>

وهناك ثلاث خيارات لعرض السلايدر.

1.  استبدال "فنون" بإحدى التسميات الموجوده في مدونتك لعرض التدوينات منها فقط . 
2. استبدال "فنون" ب "recentpost" لعرض آخر الموضوعات . 
3. استبدال "فنون" ب "randompost" لعرض موضوعات عشوائية .

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