افضل اربع طرق لاضافة سلايدر تلقائي لمدونات بلوجر

السلام عليكم و رحمة الله و بركاتة

السلايدر اذا بحثت علي جوجل علي طريقة تركيب سلايدر ستجد الكثير من المواضيع المتنوعة

و قد لا تجد السلايدر الذي تريده تو قد تواجه مشاكل في تركيبة في هذا الموضوع

سأشرح معني السلايدر و انواعة و طريقة اضافة افضل

السلايدرات في بلوجر

اولا ما هو السلايدر

__________________________________________

السلايدر هو عرض المواضيع بالصور في مدونتك بطريقة رائعة

ثانيا انواع السلايدر

__________________________________________

يوجد الكثير من السلايدرات بأشكال عدة ولكن هناك

سلايدر تلقائي :- هو سلايدر عندما تركبه في مدونتك كل ما عليك هو اضافة له قسم معين ليأخد منه المواضيع

سلايدر يدوي :- هو سلايدر تضع فيه المواضيع التي تريدها بواسطة وضع رابط الموضوع و وضع رابط صورة الموضوع

ثالثا تركيب السلايدر التلقائي

_________________________________________

ملحوظة اذا كان لديك سلادير في مدونتك احذفه قبل التطبيق

الطريقة

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>

الطريقة

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;}

else

if ("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 DIV

contentsource: ["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>

الطريقة
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;}

else

if ("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 DIV

contentsource: ["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>

الطريقة
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>