السلام عليكم و رحمة الله و بركاتة
السلايدر اذا بحثت علي جوجل علي طريقة تركيب سلايدر ستجد الكثير من المواضيع المتنوعة
و قد لا تجد السلايدر الذي تريده تو قد تواجه مشاكل في تركيبة في هذا الموضوع
سأشرح معني السلايدر و انواعة و طريقة اضافة افضل
السلايدرات في بلوجر
اولا ما هو السلايدر
__________________________________________
السلايدر هو عرض المواضيع بالصور في مدونتك بطريقة رائعة
ثانيا انواع السلايدر
__________________________________________
يوجد الكثير من السلايدرات بأشكال عدة ولكن هناك
سلايدر تلقائي :- هو سلايدر عندما تركبه في مدونتك كل ما عليك هو اضافة له قسم معين ليأخد منه المواضيع
سلايدر يدوي :- هو سلايدر تضع فيه المواضيع التي تريدها بواسطة وضع رابط الموضوع و وضع رابط صورة الموضوع
ثالثا تركيب السلايدر التلقائي
_________________________________________
ملحوظة اذا كان لديك سلادير في مدونتك احذفه قبل التطبيق
1
الطريقة
1 / اذهب الي لوحة التحكم
2 / اضغط علي التخطيط
3 / اضافة اداة ثم اختيار HTML/JavaScript
4 / اضف الكود الاتي ثم اضغط حفظ
( ملحوظة ضع رابط مدونتك )
<style type="text/css">#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:250px}#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{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8vf6QtXjAAggoGL5jz6kHNPGrzaXRAsZJgVcbCF0Ihhjtexj_aQW8mBIXE-PRcIHAlJQhaOL2X5ypFpa_GEtythZAJY13c1qkmQk9TfaytReQSKqPMbB33TKZANnGG_eBvimAkpyQsv5d/s320/bloggerheroe.com-fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #1BA1E2;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}#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: 5px auto;text-align: center;background:#1BA1E2;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 #FFFFFF transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}#buttons a#nextx::before{border-color:transparent transparent transparent #FFFFFF;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%}}</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 src="http://dl.dropbox.com/u/81212926/bloggerheroe.com-fade.js" type="text/javascript"></script><script type='text/javascript'>//<![CDATA[$(document).ready(function () {FeaturedPost({blogURL:"ضع رابط مدونتك هنا",MaxPost:8,idcontaint:"#featuredpost",ImageSize:300,interval:5000,autoplay:true,tagName:false});});//]]></script>
2
الطريقة
1 / اذهب الي لوحة التحكم
2 / اضغط علي القالب ثم اضغط علي تحرير html ثم اضغط علي
ابحث عن
]]></b:skin>
اضف قبله هذا الكود
#alwansd{height: 397px;margin: 0 0 20px 20px;padding: 15px 17px 15px 16px;width: 617px;background: #373737;border-top: 4px solid #00B4FF;}.alwanw{position: relative;height:385px;}.alwanw .contentdiv{visibility: hidden;position: absolute;opacity: 1;}.alwan-ps{text-align: right;float: left;width: 618px;height: 11px;margin-left: -1px;}.alwan-ps .toc{font-size: 0px;width: 50.5px;height: 11px;float: right;background: #5b5b5b;margin-left: 1px;}.alwan-ps a.selected{background:#dfdfdf;}.alwan-ps .prev, .alwan-ps .next {display:none; }.alwanip{width: 597px;padding: 10px !important;bottom: 0;float: left !important;position: absolute;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicxH4dDiIKEYhld2Bj-SSCEYpe4v32Xb-29e0WjPwgIK7fJHhmA5jpZUlcp7wtmezTu0i5jZRJ3zYfEwAceFLcdGt18sxaFys2LdEROtwxXtWT3GOdHFo6OuTaYEZcmn8BWPqfywzgC00/s1600/backslide.png);}.alwanip a{color:#dcdcdc;font: 12px droidkufi-bold;margin:0;padding:0;line-height: 19px;}.alwanip h6{margin: 0;}.alwanip h6 a:hover {color:#ffa800;}.alwanip .alwand{font:12px arial; margin:4px 0; color:#a5a5a5; }.alwanip p{font-size: 13px;margin: 0;color: #a5a5a5;line-height: 23px;}.alwansf a img{float: right !important; }.alwansf {float: right !important; width:100px !important;}.column-center-outer {width: 100%;}
ثم ابحث عن
</head>
ثم اضف الكود الاتي قبله مع تغيير your label بالقسم الذي تريده
<script>/* Script from:http://www.3rab-help.com/ */imgr = new Array();imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";showRandomImg = true;aBold = true;summaryPost = 150;numposts1 = 12;label1 = "Yourlabel";function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}if ("content" in entry) {var postcontent = entry.content.$t;}elseif ("summary" in entry) {var postcontent = entry.summary.$t;}else var postcontent = "";postdate = entry.published.$t;if(j>imgr.length-1) j=0;img[i] = imgr[j];s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;}}var daystr = day+ ' ' + m + ' ' + y ;var trtd = '<div class="contentdiv"><div class="alwansf"><a href="'+posturl+'"><img width="617" height="385" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="alwanip"><h6><a href="'+posturl+'">'+posttitle+'</a></h6><div class="alwand" >'+daystr+'</div><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';document.write(trtd);j++;}}</script>
ثم ابحث عن
<div id='main-wrapper'>أو<div id='content'>أو<div id="content"></div>أو<div class='column-center-inner'>او<b:section class='main' id='main' showaddelement='no'>
ثم اضف الكود الاتي قبله
<b:if cond='data:blog.pageType == "index"'><div id='alwansd'><div class='alwanw' id='slider1'><script>document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");</script></div><div class='alwan-ps' id='paginate-slider1'></div></div></b:if>
ثم ابحث عن
ثم ضع الكود الاتي قبله</body>
<script src='http://dl.dropbox.com/u/12924430/contentslider.js'></script><script>featuredcontentslider.init({id: "slider1", //id of main slider DIVcontentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.enablefade: [true, 0.5], //[true/false, fadedegree]autorotate: [true, 6000], //[true/false, pausetime]onChange: function(previndex, curindex){ //event handler fired whenever script changes slide//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)}})</script>
3
الطريقة
1 / اذهب الي لوحة التحكم
2 / اضغط علي القالب ثم اضغط علي تحرير html ثم اضغط علي
ابحث عن
]]></b:skin>
اضف قبله هذا الكود
#featured{margin-bottom:10px;}.sliderwrapper{position: relative;border-bottom-width: 6px;height: 124px;}.sliderwrapper .contentdiv{visibility: hidden;position: absolute;height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;padding:15px 15px 15px 0px;background:#f1f1f1;border-radius: 5px 5px 5px 5px;box-shadow: 0 0 3px #ABABAB;margin-top:10px;}.pagination{text-align: right;margin-top: 50px;padding:5px;}.pagination a{font:11px Arial;color:#a3a3a3;padding:4px 8px 4px 8px;}.pagination a.selected{color:#4f4f4f;}.pagination .prev,.pagination .next { color:#EAEAEA;font-size:0px; background:none; padding:0px; }.featuredPost{width:410px;padding:0px 10px 10px 10px !important;bottom:0;float:left !important;margin-right: 54px;}.featuredPost a{color:#515151;font: 18px "Microsoft Sans Serif";margin:0;padding:0;}.featuredPost h2{margin:0 0 8px 0;}.featuredPost span{font-size:11px; margin:0; color:#797979;}.featuredPost p{font-size:12px; margin:4px 0 0 0; color:#797979;}.sliderPostPhoto a img{float: right !important;}.sliderPostPhoto{float: right !important; width:100px !important;}
ثم ابحث عن
</head>
ثم اضف الكود الاتي قبله مع تغيير your label بالقسم الذي تريده
<script>/* Script from:http://simplexdesign.blogspot.com/ */imgr = new Array();imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";showRandomImg = true;aBold = true;summaryPost = 140;numposts1 =10;label1 = "Your Label";function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}if ("content" in entry) {var postcontent = entry.content.$t;}elseif ("summary" in entry) {var postcontent = entry.summary.$t;}else var postcontent = "";postdate = entry.published.$t;if(j>imgr.length-1) j=0;img[i] = imgr[j];s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;}}var daystr = day+ ' ' + m + ' ' + y ;var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="155" height="121" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';document.write(trtd);j++;}}</script>
ثم ابحث عن
<div id='main-wrapper'>أو<div id='content'>أو<div id="content"></div>أو<div class='column-center-inner'>او<b:section class='main' id='main' showaddelement='no'>
ثم اضف الكود الاتي قبله
<b:if cond='data:blog.pageType == "index"'><div id='featured'><div class='sliderwrapper' id='slider1'><script>document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");</script></div><div class='pagination' id='paginate-slider1'></div></div></b:if>
ثم ابحث عن
ثم ضع الكود الاتي قبله</body>
<script src='http://dl.dropbox.com/u/12924430/contentslider.js'></script><script>featuredcontentslider.init({id: "slider1", //id of main slider DIVcontentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.enablefade: [true, 0.5], //[true/false, fadedegree]autorotate: [true, 6000], //[true/false, pausetime]onChange: function(previndex, curindex){ //event handler fired whenever script changes slide//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)}})</script>
4
الطريقة
1 / اذهب الي لوحة التحكم
2 / اضغط علي القالب ثم اضغط علي تحرير html ثم اضغط علي
ابحث عن
]]></b:skin>
اضف قبله هذا الكود
.ei-slider{position:relative;width:100%;max-width:995px;height:498px;margin:0 auto 35px;-moz-box-shadow:0 1px 2px rgba(0,0,0,0.7);-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);box-shadow:0 1px 2px rgba(0,0,0,0.7);}.ei-slider-loading{width:100%;height:100%;position:absolute;top:0;left:0;z-index:990;background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUmv5s1Sq23sn3qFY5DxZsXxPboK3nTTL_fDDtdX6pj-E9hZM6R0Y-658yiCz7cEK0abXvKS3cWgiBB_lnXMvRORToL6nVp01papRceSYk1dT1PeNNsppbrKGKY1f_OX_fo0-bfzhKdY/s1600/black-loader.gif') no-repeat 50% 48%;color:#fff;text-align:center;line-height:520px;}.ei-slider-large{height:100%;width:100%;position:relative;overflow:hidden;}.ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;}.ei-slider-large li img{width:100%;}.ei-title{position:absolute;right:10%;margin-right:0;margin-left:2%;bottom:25%;color:#fff;opacity:0.8;}.ei-title h2,.ei-title h3{text-align:right;}.ei-title h2{color:#b5b5b5;font-size:35px;font-family:BebasNeueRegular,arial,Georgia,serif;background:#000;float:right;padding:5px;margin-bottom:5px;}.ei-title h3{clear:both;font-size:14px;line-height:20px;width:835px;background:#000;padding:5px;}.ei-slider-thumbs{height:13px;margin:0 auto;position:relative;max-width:100%!important;}.ei-title a{color:#FFF;}.ei-slider-thumbs li{position:relative;float:left;height:100%;}.ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100%;z-index:10;text-indent:-9000px;background:#F88C00;}.ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;cursor:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0 1px 0 1px rgba(255,255,255,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease;}.ei-slider-thumbs li a:hover{background-color:#f0f0f0;}.ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;max-height:100px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-box-reflect:below 0px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3)) );}.content .ei-slider-thumbs li img{max-height:65px;}.ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
ثم ابحث عن
</head>
ثم اضف الكود الاتي قبله مع تغيير كل بالقسم الذي تريده
<script type='text/javascript'>/*عدد المواضيع المرجو تركها كما هي */var numposts2 = 6;/*السليدر*//*التصنيفات : المرجو إضافة كل تصنيف و التأكد من أن أخره لا يحتوي على فراغ*/var label1 = "كل";/*السليدر*/</script><script src='https://3rab-help.googlecode.com/files/jquery.js' type='text/javascript'/><script src='https://3rab-help.googlecode.com/files/tie-scripts.js' type='text/javascript'/>
ثم ابحث عن
<b:section class='main' id='main' showaddelement='no'>
ثم اضف الكود الاتي قبله
<b:if cond='data:blog.url == data:blog.homepageUrl'><div class='ei-slider' id='ei-slider'><script src='http://yourjavascript.com/3411331121/slide1.js'/><script type='text/javascript'>var showpostsummary = true;var numchars = 100;</script><ul class='ei-slider-large'><script type='text/javascript'>document.write("<script src=\"/feeds/posts/default/-/"+label1+"?published&alt=json-in-script&callback=labelthumbs2\"><\/script>");</script></ul><script src='http://yourjavascript.com/1134333271/slide2.js'/><script type='text/javascript'>document.write("<script src=\"/feeds/posts/default/-/"+label1+"?published&alt=json-in-script&callback=labelthumbs22\"><\/script>");</script></div><script type='text/javascript'>jQuery(function() {jQuery('#ei-slider').eislideshow({animation : 'center',autoplay : true,slideshow_interval : 3000,speed : 800,titlesFactor : 0.60,titlespeed : 1000,thumbMaxWidth : 100});});</script><div style='clear: both;'/></b:if>
انتظرو افضل اربع طرق لاضافة السلايدر اليدوي
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).
EmoticonClick to see the code!
To insert emoticon you must added at least one space before the code.