برمجه مميز ومريح صوره موضوع ونبذه سلايد شو تلقائي للبلوجر بحسب التسمية

عدد المشاهدات الان

كيفية تركيب سلايد شو تلقائي على مدونتك؟
نذهب إلى لوحة تحكم المدونة -->> القالب ثم أنقر على تحرير 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/AVvXsEiDMQbRgNXVD1QSHykgVyBDDAugI1XT4DM_5dTQczi8-IU_AV2Esov5NLFThts3SRurwi9JKLcoW9KjMS5tkMfchhoUZcWgmNbEBRsDgfEceia_B8WpQGDqEp6f7hg12rYasOau9c_gGls/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;}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="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 = falseif (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 etcpage_request = new XMLHttpRequest()elsereturn falsevar pageurl=setting.contentsource[1]page_request.onreadystatechange=function(){featuredcontentslider.ajaxpopulate(page_request, setting)}document.getElementById(setting.id).innerHTML=this.ajaxloadingmsgvar 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.responseTextthis.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.tocvar nextprev=setting.nextprevif (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 linksfor (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 linkcontinue}pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc linkpdivlinks[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 enabledpdiv[setting.revealtype]=function(){featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])}sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked onfeaturedcontentslider.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 rotationthis.autorotate(setting)}},
urlparamselect:function(fcsid){var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URLreturn (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 changevar totalpages=setting.contentdivs.lengthvar 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 adjustif (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedlyreturnsetting.currentpage=turntopagesetting.contentdivs[turntopage-1].style.zIndex=++setting.topzindexthis.cleartimer(setting, window["fcsfade"+setting.id])setting.cacheprevpage=setting.prevpageif (setting.enablefade[0]==true){setting.curopacity=0this.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=turntopageif (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 syntaxif (typeof targetobject.filters[0].opacity=="number") //IE6targetobject.filters[0].opacity=value*100else //IE 5.5targetobject.style.filter="alpha(opacity="+value*100+")"}else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntaxtargetobject.style.MozOpacity=valueelse if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntaxtargetobject.style.opacity=valuesetting.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 completeif (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 divsetting.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 pairif (document.cookie.match(re)) //if cookie foundreturn document.cookie.match(re)[0].split("=")[1] //return its valuereturn null},
setCookie:function(name, value){document.cookie = name+"="+value},
init:function(setting){var persistedpage=this.getCookie("fcspersist"+setting.id) || 1var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=indexthis.settingcaches[setting.id]=setting //cache "setting" objectsetting.contentdivs=[]setting.toclinks=[]setting.topzindex=0setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)setting.prevpage=setting.currentpagesetting.revealtype="on"+(setting.revealtype || "click")setting.curopacity=0setting.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;

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

اذا حبيت نسخ المقالهـ