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

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

.

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

معاينة 

صور للسلايد

شرح التركيب

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

#post-mag > li:nth-child(2) {width: 49%;margin-right: 3.333px;}
#post-mag > li:nth-child(5) {width: 49%;margin-right: 3.333px;}
#post-mag > li:nth-child(3) {float: left;}
#post-mag > li:nth-child(6) {float: left;}
#post-mag > li:nth-child(9), #post-mag > li:nth-child(10), #post-mag > li:nth-child(11) {display: none;}
#post-mag > li:nth-child(7), #post-mag > li:nth-child(8) {display: none;}
img.slider-image {width: 100%;height: 100%;transform: scale(1.4);}
p.slider-title {margin-bottom: 5px;}
.content-info {bottom: 0;position: absolute;z-index: 99999;padding: 20px;display: block;background-image: -webkit-linear-gradient(transparent ,rgba(0, 0, 0, .88));background-image: -moz-linear-gradient(transparent ,rgba(0, 0, 0, .88));background-image: linear-gradient(transparent ,rgba(0, 0, 0, 1));width: 93%;}
.slider-title a {color: #fff;font-size: 17px;font-family: Neo;text-shadow: 0 0 3px rgba(0, 0, 0, 0.88);}
span.postlabel {color: #fff;background: #2980b9;position: absolute;top: -10%;padding: 2px 4px;font-size: 13px;border-radius: 1px;font-family: Neo;}
span.postda:before {content: "\f017";font-family: fontawesome;margin-left: 4px;display: inline-block;float: right;margin-top: 2px;color: #fff;}
span.postda, .postau {color: #dcdcdc;font-family: Neo;font-size: 12px;float: right;}
span.postau {float: right;margin-left: 11px;}
span.postau:before {content: "\f007";font-family: fontawesome;margin-left: 4px;display: inline-block;margin-top: 2px;color: #fff;}
#post-mag li {height: 250px;overflow: hidden;position: relative;width: 25%;float: right;margin: 1px;}
.slideshow {width: 100%;margin: 11px auto;overflow: hidden;}
.content-info {bottom: 0;position: absolute;z-index: 99999;padding:25px 5px 5px 5px;display: block;
background-image: -webkit-linear-gradient(transparent ,rgba(0, 0, 0, .88));background-image: -moz-linear-gradient(transparent ,rgba(0, 0, 0, .88));background-image: linear-gradient(transparent ,rgba(0, 0, 0, 1));width: 100%;}

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

<script type='text/javascript'>
  //<![CDATA[
// Post By Label Script
function slider(e){document.write('<ul id="post-mag">');for(var t=0;10>t&&"0"!=e.feed.entry.length;t++){for(var a=e.feed.entry[t],i=a.title.$t,l=0;l<a.link.length;l++)if("alternate"==a.link[l].rel){var s=a.link[l].href,n=e.feed.entry[t].author[0].name.$t,r=e.feed.entry[t].category[0].term,o=e.feed.entry[t].published.$t,p=o.split("-")[2].substring(0,2),c=o.split("-")[1],f=o.split("-")[0],m=c+" "+p+", "+f;break}if(void 0==a.media$thumbnail){var u=a.content.$t.indexOf("video/");if(-1!=u)var v=(Number(u+6),"http://www.dailymotion.com/thumbnail/video/"+d);else var v="http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s500/picture_not_available.png"}else var v=a.media$thumbnail.url.replace("s72-c","s500").replace("default","hqdefault");document.write("<li><a title='"+i+"' href='"+s+"'><img class='slider-image' src='"+v+"' alt='"+i+"' title='"+i+"'/></a><div class='content-info'><p class='slider-title'><a href='"+s+"'>"+i+"</a><div class='postmainfo'><span class='postau'>"+n+"</span><span class='postda'>"+m+"</span></div><span class='postlabel'>"+r+"</span></div></li>")}document.write("</ul>")}
  //]]>
</script>

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

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='mag-slider1'>
<script src='/feeds/posts/default?alt=json-in-script&amp;callback=slider&amp;max-results5' type='text/javascript'/>
</div>
</b:if>

1. الأن عليك حفظ القالب ومبروك عليك السلايد الجديد

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

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

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