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

السلايد شو (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’/>

بعد انتهاء قم بحفظ القالب وشاهد النتيجة.
كان هذا كل شيء لتدوينة اليوم، اتمنى ان تنال اعجابكم، سلام.

Next PostRead more articles

This Post Has 4 Comments

  1. Kacem kimou

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

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

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

  2. Kacem kimou

    قم بوضع رابط مدونتك، حتى نستطيع مساعدتك …؟

  3. yehia mohamed

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

اترك تعليقاً