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

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

مميزات اضافة slider بلوجر

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

خطوات تركيب السلايد

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

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

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

ثانيا قم بالبحث في داخل الأكواد حتى يملى اللون الأزرق جهة المواضيع بالكامل ولايتجاوز الجزء العلوي لأقسام المدونة(شاهد الصورة)، وعندما تتأكد من صحة الكود قم بنسخ إسم ال ID الخاص بذالك المكان (انظر للصورة) وقم بالتوجه الى بلوجر ثم المظهر ثم الضغط على تعديل HTML.

لتظهر بعد ذالك لائحة طويلة بالأكواد كل ماعليك الأن بعد نسخ ال ID الضغط مرة واحدة داخل صفحة الأكواد والضغط المزدوج على لوحة المفاتيح (CTRL+F) ليظهر بعد ذالك مربع بحث صغير، الأن تقوم بلصق ال ID الذي نسخته في الخطوة الثانية قي مربع البحث ثم اضغط على OK على لوحة المفاتيح.
كيف تضيف سلايدر شو متجاوب

الخطوة الثالثة عند الضغط على OK لا تقم بالبحث في أكواد CSS أنت مباشرة إذهب الى أكواد HTML عبر الضغط كل مرة على ok الى ان تنتهي أكواد CSS، وعندما تجد الكود الخاص ب HTML قم بنسخ الكود الذي سوف أتركه لك كاملا ثم قم بلصقه فوق اسم ال ID الذي ذكرناه سابقا على هاذا الشكل.
كيف تضيف سلايدر شو متجاوب
الخطوة الأخيرة هي أنك بدل اسم URLSITE المبين في الصورة تقوم بوضع رابط موقعك فيه ثم تقوم بحفط التغيرات الموجودة ومبروك عليك سلايد شو احترافي و يعمل مع جميع الأجهزة.


كود html لعمل سلايد شو

<style type="text/css">
#top-main{position:relative}
#top-main .widget{border:0;padding:0 0 22px}
#top-main h2{position:absolute;left:-9999px}

#slides li {
display: none;
background-color: white;
padding: 4px;
border: 1px solid #CECECE;
-webkit-border-radius: 3px;
margin-top: 0;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
position: absolute;
}
#slides li:nth-child(1) .overlayx {
background-position: 0 0;
}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:20;margin:0;list-style:none;position:relative}
#slides ul{height:275px}
#slides li{width:49.9%;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){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{width:100%;height:100%}
#slides .overlayx {
position: absolute;
top: 0;
left: 0;
border: 4px solid #fff;
width: 100%;
height: 100%;
z-index: 2;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4mSrKLPx0FfmaavPfxTXMU3KIXZlq6yncjc-jn6e-QN2c-d7b2C0nSV6Ovjce9260XS2min3uJJFm9mcQRCD7Jtn8MmXedC53P1IMAVhaH6MICgE77FONPx8arogXpkmvX4NbM4TXleo/s1600/cnmubg-fade.png);
background-position: 70% 70%;
background-repeat: repeat-x;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#slides h4{position:absolute;bottom:25px;width:100%;padding:0 10px;margin:0 -5px;font-size:14px;z-index:3;color:white;text-shadow:0 1px 2px #918F8F}
#slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:14px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin: 0px auto;text-align: center;width: 10%;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}

#slides .overlayx {
position: absolute;
top: 0;
left: 0;
border: 4px solid white;
width: 100%;
height: 100%;
z-index: 2;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4mSrKLPx0FfmaavPfxTXMU3KIXZlq6yncjc-jn6e-QN2c-d7b2C0nSV6Ovjce9260XS2min3uJJFm9mcQRCD7Jtn8MmXedC53P1IMAVhaH6MICgE77FONPx8arogXpkmvX4NbM4TXleo/s1600/cnmubg-fade.png);
background-position: 60% 60%;
background-repeat: repeat-x;
}
</style>

<div id="featuredpost">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"#featuredpost",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://softglad.at.ua/images/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],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="nextx">next</a><a href="#" id="prevx">prev</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();
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"HRLSITE",
MaxPost:15,
idcontaint:"#featuredpost",
ImageSize:300,
interval:7000,
autoplay:true,
tagName:false
});
});
//]]>
</script> 

ملاحظات في الكود

لجعل سلايد شو html يظهر قسم معين فقط ابحث عن tagName:false سوف تجدها في الأسفل وبدل false ضع اسم القسم الذي تريد مثلا قسم تطبيقات. للتحكم في آلية تبديل الموضوع داخل السلايدر قم بترك autoplay:true في أسفل الإضافة كما هو،وإذا أردت جعلها تعمل يدويا قم بتبديل true الى false. كانت هاته أهم الملاحظات التي يعمل بها السكربت والسلام عليكم و رحمة الله و بركاته.
تعليقات