سلايد شو لعرض مواضيع قسم من الاقسام بلوجر

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

اذا اردت معاينة السلايد شو 

معاينة

شرح  طريقة التركيب

نذهب إلى لوحة تحكم المدونة  -->> القالب ثم أنقر على تحرير html

الآن نبحث عن الرمز ]]></b:skin> ثم نضع الكود التالي فوقه مباشرةً:

/*--------------Slider-------------*/

#alwansd{
height: 276px;

background: #fbfbfb;
margin: 0 auto;
padding: 18px;

border-bottom: 2px solid #E6E6E6;
width: 1229px;
margin-right: -132px;

position: relative;
position: relative;
}
.alwanw{
height: 241px;

visibility: hidden;
width: 78%;
margin: 0 auto;
}
.alwanw .contentdiv{

.alwan-ps{
opacity: 1;
position: absolute;
height: 240px;
}

margin: 0 auto;
text-align: right;
float: left;
width: 490px;
height: 13px;
}

height: 13px;
.alwan-ps .toc {
float: right;
font-size: 0;
width: 13px;
background: #e74c3c;

.alwan-ps .selected {background: #95A5A6;}
margin-left: 8px;
border-radius: 60px;
}
.alwan-ps .prev ,.alwan-ps .next{
display:none;
}

.alwan-ps .next:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmP-BXWoFncaBNp8pgGqYesW__qnnyHKBsd6xZd6g05MGkHlRhPMWbRO0fiM2qPGjq84ajidmqatd9w00ztDSHhRWQghG_b1zf7beUBy5g9b3Ny-Y9sxm42CLdwXv26It3Fhp5YjeAew/s1600/next-h.png);}
.alwanip{
width: 486px;
float: left !important;
padding: 0 37px 0 0;
margin: 0 auto;
}
.alwanip a{
color: #2c3e50;
font: 19px DroidKufi-Bold;
margin: 0 auto;
line-height: 37px;
}
.post-body img {
margin: -1px 0 0 8px;

font-family: hacen_liner;
padding: 3px;
border: 1px solid #dfdfdf;
border-radius: 3px;
}
.alwanip h6{margin: 0;}
.alwanip h6 a:hover {color:#95A5A6;}
.alwanip .alwand{
color:#fff;
}
.alwanip p{
margin: 0 auto;
color: #95A5A6;
}
.alwansf {

transform: scale(1.1);
float: right !important;
margin:0 auto;
}
.alwansf a img {
width: 435px;
height: 275px;}
.alwansf a img:hover{
}
.alwansf a img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);

}
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;

transition: transform 0.4s;

الخطوة الثانية نبحث عن الرمز </head> ثم نضع الكود التالي فوقه مباشرةً:

<style>



@media screen and (max-width : 1024px) {

/* CSS FOR TABLETS ------------*/

#alwansd{width:100%;margin:0;padding:0;overflow:hidden;}
}
@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/

@media screen and (max-width : 640px) {
#alwansd{width:100%;margin:0;padding:0;overflow:hidden; }
}
/* CSS FOR IPHONE ------------*/

#alwansd{width:100%;margin:0;padding:0;overflow:hidden; }
#alwansd{width:100%;margin:0;padding:0;overflow:hidden; }
}
@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
}

</style>
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
#alwansd{width:100%;margin:0;padding:0;overflow:hidden; }
}


<script>

//<![CDATA[

/* Script from:http://www.madad2.com/ */
imgr = new Array();

imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
showRandomImg = true;
      aBold = true;
      summaryPost = 550; 

      numposts1 = 6; 

      label1 = "تقنية";

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

else var postcontent = "";
if ("summary" in entry) {
                                                                                                                                                     var postcontent = entry.summary.$t;}
                                                                                                                                                 postdate = entry.published.$t;

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
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);

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

</script>
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.substring(0,50)+'...</a></h6><div class="alwand" >'+daystr+'</div><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';     
                                                                                                                                                 document.write(trtd);       
                                                                                                                                                 j++;
                                                                                                                                                }}

//]]>

غير كلمة تقنية باسم التسمية التي تريد أن تظهر بالسلايد شو بما يناسبك

الرقم 6 هو لعدد المشاركات التي ترغب بأن تظهر بالسلايدر numposts1 = 6;

الآن يجب ان نحدد المكان الذي نرغب بإظهار السلايد شو على سبيل المثال فوق رسائل المدونة الإلكترونية او أسفل الرمز <div class='content-wrapper'> أو الرمز <div id='main-wrapper'> او من خلال التخطيط ثم إضافة أداة javascrpt/html

المهم أن تختار مكان مناسب للسلايد شو ثم لصق الكود التالي:

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div id='alwansd'>
<div class='alwanw' id='slider1'>

document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
<script>
</script>
</div>

</b:if>
<div class='alwan-ps' id='paginate-slider1'>
</div>

</div>

لكن على السلايد أن يكون موضوع في نفسك المكان كما شاهدته في المعاينة ليظهر بشكل جيد

الخطوة الأخيرة نبحث عن الرمز </body> ثم نضع الكود التالي فوقه مباشرةً:

  <script type='text/javascript'>

      //<![CDATA[


//3 variables below you can customize if desired:
var featuredcontentslider={


ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: true, //persist to last content viewed when returning to page?


jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
settingcaches: {}, //object to cache "setting" object of each script instance

 this.turnpage(this.settingcaches[fcsid], pagenumber)
},

ajaxconnect:function(setting){
 var page_request = false

page_request = new ActiveXObject("Microsoft.XMLHTTP")
 if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
  try {
  page_request = new ActiveXObject("Msxml2.XMLHTTP")
  } 
  catch (e){
   try{
   }
   catch (e){}
  }
 }
 else if (window.XMLHttpRequest) // if Mozilla, Safari etc

var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
  page_request = new XMLHttpRequest()
 else
  return false
 var pageurl=setting.contentsource[1]
 page_request.onreadystatechange=function(){
  featuredcontentslider.ajaxpopulate(page_request, setting)
 }
 document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
 page_request.open('GET', pageurl+bustcache, true)

buildcontentdivs:function(setting){
 page_request.send(null)
},

ajaxpopulate:function(page_request, setting){
 if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
  document.getElementById(setting.id).innerHTML=page_request.responseText
  this.buildpaginate(setting)
 }
},


buildpaginate:function(setting){
 var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
 for (var i=0; i<alldivs.length; i++){
  if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"
   setting.contentdivs.push(alldivs[i])
    alldivs[i].style.display="none" //collapse all content DIVs to begin with
  }
 }
},

 this.buildcontentdivs(setting)

phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
 var sliderdiv=document.getElementById(setting.id)
 var pdiv=document.getElementById("paginate-"+setting.id)
 var phtml=""
 var toc=setting.toc
 var nextprev=setting.nextprev
 if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
  for (var i=1; i<=setting.contentdivs.length; i++){
  }

if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
  phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
  pdiv.innerHTML=phtml
 }
 var pdivlinks=pdiv.getElementsByTagName("a")
 var toclinkscount=0 //var to keep track of actual # of toc links
 for (var i=0; i<pdivlinks.length; i++){
  if (this.css(pdivlinks[i], "toc", "check")){
    pdivlinks[i].style.display="none" //hide this toc link
    continue

featuredcontentslider.turnpage(setting, this.className)
   }
   pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
   pdivlinks[i][setting.revealtype]=function(){
    featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
    return false
   }
   setting.toclinks.push(pdivlinks[i])
  }
  else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"
   pdivlinks[i].onclick=function(){
    return false

setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
   }
  }
 }
 this.turnpage(setting, setting.currentpage, true)
 if (setting.autorotate[0]){ //if auto rotate enabled
  pdiv[setting.revealtype]=function(){
   featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
  }
  sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
   featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
  }
  this.autorotate(setting)
 }
},


var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
urlparamselect:function(fcsid){
 var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL
 return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},

turnpage:function(setting, thepage, autocall){
 var currentpage=setting.currentpage //current page # before change
 var totalpages=setting.contentdivs.length

setting.curopacity=0
 turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
 if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
  return
 setting.currentpage=turntopage
 setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
 this.cleartimer(setting, window["fcsfade"+setting.id])
 setting.cacheprevpage=setting.prevpage
 if (setting.enablefade[0]==true){
  this.fadeup(setting)
 }

if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
 if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
  setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
  setting.onChange(setting.prevpage, setting.currentpage)
 }
 setting.contentdivs[turntopage-1].style.visibility="visible"
 setting.contentdivs[turntopage-1].style.display="block"
  this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")

if (typeof targetobject.filters[0].opacity=="number") //IE6
 if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
  this.css(setting.toclinks[turntopage-1], "selected", "add")
 setting.prevpage=turntopage
 if (this.enablepersist)
  this.setCookie("fcspersist"+setting.id, turntopage)
},

setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
 var targetobject=setting.contentdivs[setting.currentpage-1]
 if (targetobject.filters && targetobject.filters[0]){ //IE syntax
   targetobject.filters[0].opacity=value*100

if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
  else //IE 5.5
   targetobject.style.filter="alpha(opacity="+value*100+")"
 }
 else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
  targetobject.style.MozOpacity=value
 else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
  targetobject.style.opacity=value
 setting.curopacity=value
},

fadeup:function(setting){
 if (setting.curopacity<1){
  this.setopacity(setting, setting.curopacity+setting.enablefade[1])
  window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
 }
 else{ //when fade is complete

if (action=="check")
   setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
  setting.onChange(setting.cacheprevpage, setting.currentpage)
 }
},

cleartimer:function(setting, timervar){
 if (typeof timervar!="undefined"){
  clearTimeout(timervar)
  clearInterval(timervar)
  if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div
   setting.contentdivs[setting.cacheprevpage-1].style.display="none"
  }
 }
},

css:function(el, targetclass, action){
 var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
  return needle.test(el.className)
 else if (action=="remove")

var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
  el.className=el.className.replace(needle, "")
 else if (action=="add")
  el.className+=" "+targetclass
},

autorotate:function(setting){
 window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},

getCookie:function(Name){ 
 var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
 if (document.cookie.match(re)) //if cookie found
  return document.cookie.match(re)[0].split("=")[1] //return its value
 return null
},

setCookie:function(name, value){
 document.cookie = name+"="+value

},


init:function(setting){
 var persistedpage=this.getCookie("fcspersist"+setting.id) || 1

contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
 this.settingcaches[setting.id]=setting //cache "setting" object
 setting.contentdivs=[]
 setting.toclinks=[]
 setting.topzindex=0
 setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
 setting.prevpage=setting.currentpage
 setting.revealtype="on"+(setting.revealtype || "click")
 setting.curopacity=0
 setting.onChange=setting.onChange || function(){}
 if (setting.contentsource[0]=="inline")
  this.buildpaginate(setting)
 if (setting.contentsource[0]=="ajax")
  this.ajaxconnect(setting)
}

}
      //]]>
    </script>
&lt;script&gt;

featuredcontentslider.init({

id: &quot;slider1&quot;, //id of main slider DIV



&lt;/script&gt;
toc: &quot;#increment&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]

nextprev: [&quot;Previous&quot;, &quot;Next&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; 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)

}

})

نضغط على حفظ القالب ثم نرى النتائج :) 

المصدر

ارجو ان سلايدشو نال اعجابكم في امان الله