سلايد شو احترافى يعرض اخر المواضيع بشكل تلقائى #4

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

معاينة السلايد

معاينة 

صورة للسلايد

شرح التركيب

1. قم بالبحث عن الوسم التى هذا]]></b:skin>ثم ضع فوقه الكود التالى .

#feature-post-section{max-height:370px;overflow:hidden;padding:0px;margin:0 auto;}
.featured-posts a{color:#fff;}
.featured-posts a:hover{color:#fff;text-decoration:underline;}
.main-post.featured-posts a{margin:0;font-size:18px}
.featured-posts .col-post{float:right;position:relative;overflow:hidden;}
.featured-posts .secondary-post{width:34.4%;margin:0;}
.featured-posts .secondary-post:nth-child(odd){margin:3px 0 0 0}
.featured-posts .main-post{width:65.2%;padding:0;margin:0 0 0 3px}
.featured-posts span{padding:8px;color:#fff;font-size:12px;font-style:normal;top:0;right:0;z-index:2;position:absolute}
.featured-posts span.lebb{background:#e74c3c;visibility:hidden;opacity:0;top:-20px;transition:all .3s}
.featured-posts .main-post:hover span.lebb,.featured-posts .secondary-post:hover span.lebb{visibility:visible;opacity:1;top:0;}
.featured-posts img{height:100%;transition:transform 0.35s ease 0s;-moz-transition:transform 0.35s ease 0s;-o-transition:transform 0.35s ease 0s}
.featured-posts .main-post img{height:360px;width:100%;object-fit:cover}
.featured-posts .secondary-post img{height:175px;object-fit:cover;width:100%}
.featured-posts .main-post:hover img,.featured-posts .secondary-post:hover img{transform:scale(1.1)}
.featured-posts header{position:absolute;bottom:0;left:0;padding:20px;width:100%;z-index:2}
.featured-posts h4{font-size:15px;line-height:1.3;}
.featured-posts header h3,.featured-posts header h4{font-weight:400}
.featured-posts span.vignette{background-color:transparent;position:absolute;overflow:hidden;margin:0;padding:0;height:100%;top:0;left:0;right:0;bottom:0;transition:background 0.3s linear,opacity 0.3s linear}
.featured-posts span.vignette:before{content:'';width:100%;height:100%;position:absolute;z-index:1;top:0;background:linear-gradient(to bottom,rgba(0,0,0,0.1) 0%,rgba(0,0,0,.7) 100%);opacity:0.5;transition:background 0.3s linear,opacity 0.3s linear}
.featured-posts .main-post span.vignette:before{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#9e06cd 100%)}
.featured-posts .secondary-post span.vignette:before{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#dc2a02 100%)}
.featured-posts .secondary-post:nth-child(odd) span.vignette:before{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#005f87 100%)}
.featured-posts .main-post:hover span.vignette:before,.featured-posts .secondary-post:hover span.vignette:before{opacity:.9;}

1. الأن مع تانى كود وهو الذى سوف يعمل على ظهور السلايد
2. تقوم بوضعه كما تريد فى مدونتك وبالمكان الذى تريدها
3. ويمكنك وضعه فو هذا الوسمpost-wrapperليكون فوق المواضيع فى مدونتك

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r<s.length;r++)-1!=s[r].indexOf(">")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)}function sliderpost(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length;for(var t=0;t<maxpost;t++){var r,i,n=e.feed.entry[t],l=n.category[0].term,o=n.title.$t;if(t==e.feed.entry.length)break;for(var m=0;m<n.link.length;m++)if("alternate"==n.link[m].rel){i=n.link[m].href;break}for(var m=0;m<n.link.length;m++)if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){r=n.link[m].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var h=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<h.length;u++)if(parseInt(f)==h[u]){f=p[u];break}if(0==t){var v='<div class="main-post col-post"><a href="'+i+'"><span class="lebb">'+l+'</span><span class="vignette"></span><img src="'+img[t]+'" height="350" width="640" alt=""></img></a><header><h3 class="entry-title"><a href="'+i+'" title="">'+o+"</a></h3></header></div>";document.write(v)}else{var v='<div class="ripplelink secondary-post col-post" style="margin-right:0"><span class="lebb">'+l+'</span><span class="vignette"></span><a class="hover_play_small" href="'+i+'"><img src="'+img[t]+'" height="200" width="320"></img></a><header><h4><a href="'+i+'">'+o+"</a></h4></header></div>";document.write(v)}j++}}imgr=new Array,imgr[0]="http://alm2sel.com/wp-content/uploads/2016/05/%D9%84%D8%A7-%D9%8A%D9%88%D8%AC%D8%AF-%D8%B5%D9%88%D8%B1%D8%A9.jpg",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numpost="3";
//]]>
</script>
<div class='ct-wrapper' id='feature-post-section'>
<div class='featured-posts padding clearfix'>  
<script type='text/javaScript'>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/?max-results=&quot;+featured_numpost+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=sliderpost\&quot;&gt;&lt;\/script&gt;&quot;);
</script>                                
</div>
</div>
</b:if>
</b:if>

1. السلايد يظهر فقط فى الصفحة الرئيسية 
2. اذا تريده فى جميع الصفحات أحذف اول واخر وسمين فى الكود 
3. وبعد وضعك للكود سوف تقوم بحفظ القالب ومبروك عليك 

وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله

المصدر عالم المدون