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

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

معاينة السلايد شو إضعط هنا

كيفية تركيب سلايد شو تلقائي على مدونتك؟

نذهب إلى لوحة تحكم المدونة  -->> القالب ثم أنقر على تحرير 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/AVvXsEicHB496ENa5hF_BdTpc2i0NYDpedlmmw0wVI7G9LTEYhCGIbcBDwe085oT8JjbYqrnwYrgK63DQTgleRq4pMK2Nmit61AzTrgZ0mrLeMU9a3a8OJJ_qa20ah7hdjKgr9Pm2JRMQZWWwYA/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;


الآن يجب ان نحدد المكان الذي نرغب بإظهار السلايد شو على سبيل المثال فوق رسائل المدونة الإلكترونية او أسفل الرمز <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>
لكن على السلايد أن يكون موضوع في نفسك المكان كما شاهدته في المعاينة ليظهر بشكل جيد


الخطوة الأخيرة نبحث عن الرمز </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;

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



مشاركات أقدم المقال التالي
12 تعليق
  • abderrahim
    abderrahim 07‏/11‏/2014، 5:12:00 ص

    شكراا أخي على السلايدشو شغال %100 سلادشو رائع بحث كثير عن سلايد امين راغيب و في الاخير السلايد في مداد ;-( ;-(

    • مداد الجليد
      مداد الجليد 07‏/11‏/2014، 7:52:00 م

      (m) (m) العفو اخي الكريم شكرا لمرورك (f)

  • amar
    amar 07‏/01‏/2015، 1:44:00 ص

    السلام عليكم أخي السلايدشو شغّال . لكن لا يتحرّك

  • المحترف للمعلوميات
    المحترف للمعلوميات 10‏/01‏/2015، 4:14:00 ص

    أزال المؤلف هذا التعليق.

  • 1e2we
    1e2we 26‏/03‏/2015، 8:26:00 م

    لو سمحت لا تشتغل الصور ;-(

    • مداد الجليد
      مداد الجليد 27‏/03‏/2015، 10:02:00 ص

      اخي عبد الله السلايد يظهر الصور شاهد المعاينة
      ولكن يجب ان تكون مرفوعة من بلوجر https://www.blogger.com او بلكسا حساب جوجل حتى تظهر في مدونتك

  • بيتا نت
    بيتا نت 23‏/05‏/2015، 6:45:00 ص

    اخي مداد السلايدر للاسف لم يعمل عندي ماهي المشكلة

    هذا رابط المدونة للتحقق بنفسك http://www.difference-makers2020.ml/

    اكون مشكور ليك اذا استطعت حل مشكلتي واذا اردت ان ارفق لك القالب لتضيف السلايدر اكون مشكور لك

    • مداد الجليد
      مداد الجليد 24‏/05‏/2015، 6:29:00 م

      ارسل القالب عبر نموذج الاتصال اخي

  • The Owner
    The Owner 09‏/05‏/2016، 3:45:00 م

    اخي لم اجد هدا أو الرمز
    ما المعمول

    • مداد الجليد
      مداد الجليد 09‏/05‏/2016، 6:50:00 م

      أضفها من خلال التخطيط من اداة javascrpt/html

أضف تعليق
عنوان التعليق