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

الثلاثاء، 16 مايو، 2017

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

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


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

صورة للسلايد



شرح التركيب

  • قم بالبحث عن الوسم التى هذا]]></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:&#39;&#39;;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;}


  • الأن مع تانى كود وهو الذى سوف يعمل على ظهور السلايد
  • تقوم بوضعه كما تريد فى مدونتك وبالمكان الذى تريدها
  • ويمكنك وضعه فو هذا الوسم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>


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


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

لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق


شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

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

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر