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

الاثنين، 17 أبريل، 2017

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

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



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


معاينة 

صور للسلايد



شرح التركيب



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


  • الأن قم بالبحث عن الوسم هذا</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>


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


<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>

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

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


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


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

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

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

    رائع اخي استمر اريد طريقة تركيب هذه الاضافة
    https://b.top4top.net/p_472o3qvg1.png

    هههههههه
    لقد كتبت عنها موضوع اليوم سوف أنشرها غدا

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

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