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

السلايد شو (slideshow) هو اضافة من اضافات بلوجر، وهو شبيه بالسلايد الموجود في قالب رواسب، الذي يعطي لمسة جمالية للمدونة، وقد تطرقنا في دروس سابقة عن كيفية اضافة سلايد شو لمدونات بلوجر، وايضا قد قدمنا لكم سلايد شو متجاوب مع الاجهزة الذكية، وفي هذه التدوينة سنقدم لكم كيفية اضافة سلايد شو تلقائي لمدونات بلوجر يعرض اخر المواضيع، الى الشرح، كما يمكنك معاينة السلايد شو من الروابط الموجودة في الاسفل.
سلايد شو احترافى تلقائى slideshow
سلايد شو احترافى تلقائى

كيفية تركيب واضافة سلايد شو لمدونات بلوجر:

- قم بالبحث عن هذا الوسم التالي.
]]></b:skin>
عند ايجاده قم بوضع الكود التالى فوقه (اعلاه).
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:390px}
#slides li{width:50%;height:100%;position:absolute;display:none;}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1) {
  right: 0;
  top: 0;
  border-left: 10px solid rgba(226, 226, 226, 1)!important;
  height: 390px;
}
#slides li:nth-child(2) {
  right: 50%;
  width: 25%;
  height: 50%;
  border-left: 10px solid rgba(226, 226, 226, 1)!important;
  border-bottom: 10px solid rgba(226, 226, 226, 1)!important;
}
#slides li span.dy {
  display: inline-block!important;
}
#slides li:nth-child(3) {
  right: 75%;
  width: 25%;
  height: 50%;
  border-bottom: 10px solid rgba(226, 226, 226, 1)!important;
}
#slides li:nth-child(4) {
  right: 50%;
  top: 50%;
  width: 25%;
  height: 50%;
  border-left: 10px solid rgba(226, 226, 226, 1)!important;
}
#slides li:nth-child(5) {
  right: 75%;
  top: 50%;
  width: 25%;
  height: 50%;
}
#slides li h4 {
  overflow: hidden;
  bottom: 0;
  color: #fafafa;
  width: 100%;
  text-align: right;
  text-transform: uppercase;
  height: 80px;
  line-height: 55px;
  right: 0;
  margin-left: 0;
  padding: 0 15px;
  background-image: linear-gradient(transparent,rgba(0,0,0,0.83));
}
#slides li:nth-child(1) h4 {
  font-size: 20px;
  height: 90px;
}
#slides a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#slides img{display:block;width:100%;height:100%;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  background-position: 50% 40%;
  background-repeat: repeat-x;
}
#slides h4 {
  position: absolute;
  bottom: 40px;
  margin: 0;
  font-size: 13px;
  right: 10px;
  padding: 0;
  color: #f9f9f9;
  z-index: 3;
  line-height: 20px;
  font-weight: normal;
  text-align: right;
  text-transform: uppercase;
}
#slides .label_text {
  font-size: 12px;
  color: #fff;
  bottom: 10px;
  z-index: 3;
  right: 10px;
  position: absolute;
  padding: 3px 6px;
  text-transform: uppercase;
}
span.autname {
  display: none;
}
.label_text:before {
  content: "\f073";
  font: normal normal normal 14px/1 FontAwesome;
  float: right;
  display: block;
  margin-top: 3px;
  margin-left: 5px;
}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;right:0;width:50%}
  #slides li:nth-child(3){right:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){right:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
- اعد البحث عن الوسم التالي.
</head>
عند ايجاده قم بضع الكود التالى فوقه (اعلاه).
<script type='text/javascript'>
//<![CDATA[
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",MonthNames:["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://mo3awinz.blogspot.com",
MaxPost:5,
idcontaint:"#featuredpost",
ImageSize:500,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
بعدها قم بتغيير الرابط المحدد باللون الازرق في الكود السابق http://mo3awinz.blogspot.com برابط مدونتك.
- الأن نأتي لأخر كود وهو كود المسؤول عن اضهار السلايد شو، قم بوضعه فى المكان الذى تريد أن يظهر به السلايد شو، اذا لم تعرف اين تضعه قم بإخبارنا في تعليق و سيسعدنا مساعدتك.
<div id='featuredpost'/>
بعد انتهاء قم بحفظ القالب وشاهد النتيجة.
كان هذا كل شيء لتدوينة اليوم، اتمنى ان تنال اعجابكم، سلام.

شارك المقالة مع أصدقائك

mo3awin

هناك 4 تعليقات:

  1. <div id='featuredpost

    اين اضعه يا اخي

    وشكرا

    ردحذف
    الردود
    1. قم بوضع رابط مدونتك، حتى نستطيع مساعدتك ...؟

      حذف
    2. سيحتاج الامر منك بعض التجارب حتى يضبط معك و لكن هذه اكواد شائعة في اغلب القوالب.
      1- ان اردت السلايد يظهر اضافته فوق منطقة المواضيع
      div id='outer-wrapper'>
      او
      div id='main-wrapper'>

      2- وان اردت السلايد يظهر فوق الفوتر
      div id='fotter-wrapper'>
      أو
      div id='fotter'>

      اتمنى ان اكون قد قدمت لكم مساعدة المرجوا و مرحبا بك.

      حذف
  2. كيف اجعل السلايد شو يظهر في الصفحة الرئيسية فقط وليس في باقي الصفحات و التدوينات

    ردحذف