أحد أشهر السلايدر المتاح لمنصة بلوجر والذي امتلأ به الإنترنت شرقاً وغرباً لكن هناك معلومتين قليل من يذكرهما عن هذا السلايدر أولهما أن لهذا السلايدر نسختين أحب ان اسميهما التوأم متشابهتان كثيراً الفرق بينهما في التنسيق فالأولى أفقية تتناسب اكثر مع الاماكن العريضة والأخرى رأسية تناسب السايدر بار والمساحات الصغيره وهناك الكثيرين من يخلطون بينهم فيركب تلك مكان هذه ويصبح المظهر غير مضبوط , المعلومة الثانية التي يتغافل الكثير عن ذكرها في الإعدادات البعض لا يذكر ان هذا السلايدر ليس فقط لآخر المواضيع ولكنه أيضاً يمكن ان يكون لآخر المواضيع من قسم محدد وليس المدونة باكملها وهنا ستكون فائدته أكبر ان كان لديك قسم عليه إقبال كبير فمن الجيد ان تستخدم السلايدر فيه وسنتطرق لتلك الأمور في موضوعنا لكن اولا يمكنك معاينة السلايدر بنسختيه من الرابط التالي
ستلاحظون أن الاول جعلته لآخر المواضيع من المدونة كاملة والثاني جعلته ياتي بآخر مواضيع قسم القوالب فقط طبعا يمكن تخصيص الأول بالقسم أيضاً لكن فقط حتى اوضح الفرق في المعاينة
طريقة التركيب ثابته اضافة كود السلايدر في آداة HTML/JavaScript
السلايدر الأفقي
#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/AVvXsEhZ5uwmbAr5ald4fYlhpVQIHR6H-3YTyWyXHWywniSF1tktzXo7GC4P1zMJ1GK1gDjcpJZPxxCtPHSkw7zVmNp7MkA3l78qyDY2uaV6cvk3nwucU35tGPZwO-b34k7YeRaorXLAEIEHyAs/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/AVvXsEhZ5uwmbAr5ald4fYlhpVQIHR6H-3YTyWyXHWywniSF1tktzXo7GC4P1zMJ1GK1gDjcpJZPxxCtPHSkw7zVmNp7MkA3l78qyDY2uaV6cvk3nwucU35tGPZwO-b34k7YeRaorXLAEIEHyAs/s1600/cnmubg-fade.png);
background-position: 60% 60%;
background-repeat: repeat-x;
}
</style>
<div id="featuredpost">
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://cnmu.blogspot.com",
MaxPost:15,
idcontaint:"#featuredpost",
ImageSize:300,
interval:7000,
autoplay:true,
tagName:false
});
});
//contnue
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="prevx">prev</a><a href="#" id="nextx">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();}
//]]>
</script>
أهم الإعدادات
الرقم 4 و اللون #fff هما الخاصان بمقاس ولون إطار الصور في السلايدرالكود المعلم بالأخضر الفاتح يمكنك ازالته ان كان قالبك يحتوي على مكتبة جي كويري
استبدل http://cnmu.blogspot.com برابط مدونتك
الرقم 15 هو عدد المواضيع التي ستظهر في السلايدر
ان اردت المواضيع من قسم محدد استبدل tagName:false
بهذا الكود tagName:"*", مع تغيير رمز * بإسم القسم الذي تريد
السلايدر الرأسي
ul.abt-sidebar-slider *{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
ul.abt-sidebar-slider{
font:normal normal 11px embria
}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{
margin:0;
padding:0;
list-style:none;
position:relative
}
ul.abt-sidebar-slider{
width:100%;
height:500px
}
ul.abt-sidebar-slider li{
height:24.5%;
position:absolute;
padding:0;
width:49.5%;
float:left;
overflow:hidden;
display:none
}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){
display:block
}
ul.abt-sidebar-slider img{
border:0;
width:100%;
height:100%} ul.abt-sidebar-slider li:nth-child(1){width:100%;
height:49.5%;
margin:0 0 2px;
left:0;top:0
}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider 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
}
ul.abt-sidebar-slider .overlayx{
width:100%;
height:100%;
position:absolute;
z-index:2;
left:0;
top:0;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ5uwmbAr5ald4fYlhpVQIHR6H-3YTyWyXHWywniSF1tktzXo7GC4P1zMJ1GK1gDjcpJZPxxCtPHSkw7zVmNp7MkA3l78qyDY2uaV6cvk3nwucU35tGPZwO-b34k7YeRaorXLAEIEHyAs/s1600/cnmubg-fade.png);
background-position:50% 50%;
background-repeat:repeat-x
}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{
border:4px solid #DEDEDE;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px
}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{
background-position:50% 25%
}
ul.abt-sidebar-slider .overlayx:hover{
-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";
filter:alpha(opacity=10);-khtml-opacity:0.1;
-moz-opacity:0.1;opacity:0.1
}
ul.abt-sidebar-slider h4{
position:absolute;
bottom:30px;
z-index:2;
color:white;
margin:0;
width:100%;
padding:0 10px;
line-height:1.5em;
font:embria;
font-weight:normal
}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{
font-size:150%
}
ul.abt-sidebar-slider .label_text{
position:absolute;
bottom:10px;
left:10px;
z-index:2;
color:white;
font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{
display:none
}
.buttons{
margin:5px 0 0
}
.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
}
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://cnmu.blogspot.com",
MaxPost:15,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:7000,
autoplay:true,
tagName:false
});
//contnue
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/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 d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="abt-sidebar-slider"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');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).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>
أهم الإعدادات
الرقم 4 و اللون #DEDEDE هما الخاصان بمقاس ولون إطار الصور في السلايدرالكود المعلم بالأخضر الفاتح يمكنك ازالته ان كان قالبك يحتوي على مكتبة جي كويري
استبدل http://cnmu.blogspot.com برابط مدونتك
الرقم 15 هو عدد المواضيع التي ستظهر في السلايدر
ان اردت المواضيع من قسم محدد استبدل tagName:false
بهذا الكود tagName:"*", مع تغيير رمز * بإسم القسم الذي تريد
ملاحظات
إن كنت تريد اظهار السلايدر في الرئيسية فقط أو في المواضيع فقط أو في جزء محدد راجع الموضوع التاليالتحكم في تفعيل أو تعطيل الإضافات بحسب فئة الصفحات
ان اردت ان يكون السلايدر داخل اطار وخلفية كما في مثال المعاينة اضف الكود بين الكودين التاليين
<div style='background:#fff; border:2px solid #777; width:400px; padding:15px 15px 10px;'>على أن #fff هو لون الخلفية
كود السلادير هنا
</div>
والرقم 2 هو مقاس الإطار واللون #777 هو لون الإطار
والرقم 400 هو مقاس مساحة السلايدر
والرقم 15 هو حجم الفراغ بين السلايدر والإطار
والرقم 10 حجم الفراغ لكن من الاسفل
