سلايد شو تلقائي للبلوجر بحسب التسمية

سلايد شو تلقائي للبلوجر بحسب التسمية

 كيفية تركيب سلايد شو تلقائي على مدونتك؟ نذهب إلى لوحة تحكم المدونة  -->> القالب ثم أنقر على تحرير html الآن نبحث عن الرمز : 

]]></b:skin>

ثم نضع الكود التالي فوقه مباشرةً :

/*--------------Slider-------------*/
#alwansd{
height: 276px;
margin: 0 auto;
padding: 18px;
background: #fbfbfb;
width: 1229px;
margin-right: -132px;
border-bottom: 2px solid #E6E6E6;
position: relative;
}
.alwanw{
position: relative;
height: 241px;
width: 78%;
margin: 0 auto;
}
.alwanw .contentdiv{
visibility: hidden;
opacity: 1;
position: absolute;
height: 240px;
}
.alwan-ps{
text-align: right;
float: left;
width: 490px;
height: 13px;
margin: 0 auto;
}
.alwan-ps .toc {
float: right;
font-size: 0;
width: 13px;
height: 13px;
background: #e74c3c;
margin-left: 8px;
border-radius: 60px;
}
.alwan-ps .selected {background: #95A5A6;}
.alwan-ps .prev ,.alwan-ps .next{
display:none;
}
.alwan-ps .next:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOHCppQjE08484Xo2h_nHAiJo4VPA0GN2E4WbVpexDCQBfjH2BXJS6K_PYD2y_S1rumV6Liv4-J0qHaieek2Q6BO_hWk3WBZ58CB5xMIwZ-LyF3x88rXLc8rb_QkF_fKoSFNpI3DENfw/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;
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;
font-family: hacen_liner;
}
.alwansf {
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);
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 ------------*/
#alwansd{width:100%;margin:0;padding:0;overflow:hidden; }
}
@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
#alwansd{width:100%;margin:0;padding:0;overflow:hidden; }
}
@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
#alwansd{width:100%;margin:0;padding:0;overflow:hidden; }
}
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
#alwansd{width:100%;margin:0;padding:0;overflow:hidden; }
}
</style>
<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
                                                                                                                                                   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="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++;
                                                                                                                                                }}
      //]]>
</script>

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

الخطوة الثالثة  نبحث عن الرمز :

</body>

ثم نضع الكود التالي فوقه مباشرةً :

<script type='text/javascript'>
      //<![CDATA[

var featuredcontentslider={

//3 variables below you can customize if desired:
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?

settingcaches: {}, //object to cache "setting" object of each script instance

jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
 this.turnpage(this.settingcaches[fcsid], pagenumber)
},

ajaxconnect:function(setting){
 var page_request = false
 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{
   page_request = new ActiveXObject("Microsoft.XMLHTTP")
   }
   catch (e){}
  }
 }
 else if (window.XMLHttpRequest) // if Mozilla, Safari etc
  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
 var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
 page_request.open('GET', pageurl+bustcache, true)
 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)
 }
},

buildcontentdivs: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
  }
 }
},

buildpaginate:function(setting){
 this.buildcontentdivs(setting)
 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++){
   phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
  }
  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")){
   if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
    pdivlinks[i].style.display="none" //hide this toc link
    continue
   }
   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(){
    featuredcontentslider.turnpage(setting, this.className)
    return false
   }
  }
 }
 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])
  }
  setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
  this.autorotate(setting)
 }
},

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
 var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
 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){
  setting.curopacity=0
  this.fadeup(setting)
 }
 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"
 if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
  this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
 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
  if (typeof targetobject.filters[0].opacity=="number") //IE6
   targetobject.filters[0].opacity=value*100
  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 (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)
   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")
 if (action=="check")
  return needle.test(el.className)
 else if (action=="remove")
  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
 var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
 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

contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]

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)

}

})

&lt;/script&gt;

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

 <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'>
<script>
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>
</div>
<div class='alwan-ps' id='paginate-slider1'>
</div>
</div>
</b:if>

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

12:38 م