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

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" dir="rtl" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEituml5VxC2FvIv6Nzbu5cSzE7fUNgdEXuYNQkpvx-lBVPd6G_v4JQbSH9pd9I5fyuZURxwPaDsaLFH2id4T6ahh8r9miqlbxaVjCyoyispRjhVa92o4BygPWfi8yecFc0fajQdgxBYE2Y/s1600/%D8%B3%D9%84%D8%A7%D9%8A%D8%AF%D8%B4%D9%88-%D8%AA%D9%84%D9%82%D8%A7%D8%A6%D9%8A-%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA-%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="سلايد شو تلقائي لمدونات بلوجر" border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEituml5VxC2FvIv6Nzbu5cSzE7fUNgdEXuYNQkpvx-lBVPd6G_v4JQbSH9pd9I5fyuZURxwPaDsaLFH2id4T6ahh8r9miqlbxaVjCyoyispRjhVa92o4BygPWfi8yecFc0fajQdgxBYE2Y/s1600/%D8%B3%D9%84%D8%A7%D9%8A%D8%AF%D8%B4%D9%88-%D8%AA%D9%84%D9%82%D8%A7%D8%A6%D9%8A-%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA-%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png" title="سلايد شو تلقائي لمدونات بلوجر" width="400" /></a></div><div dir="rtl" style="text-align: justify;">السلام عليكم ورحمة الله تعالى وبركاته، مرحبا بكم متتبعي وزوار مدونة تدوين باحتراف، في هذا الموضوع ان شاء الله سنتطرق الى <b>سلايد شو</b> لمدونات <a href="http://tadwinpro.blogspot.com/2013/12/How-to-Create-blog-in-blogger.html" target="_blank">بلوجر</a> وطريقة تركيبه والتعديل عليه، حقا فالسلايد شو هو اضافة يحبها العديد من المدونين لما لها من فوائد اذ يقوم بعرض آخر المواضيع في المدونة بشكل جذاب بحيت يمكن الزائر الى الولوج الى هذه المواضيع بكل سهولة فالسلايد شو الذي سنتطرق اليه في هذه التدوينة ذو شكل جذاب وأنيق وما يميزه عن باقي السلايدشوهات الآخرى هو كونه متجاوب مع جميع الشاشات، ويمكنك وضعه في أي موضع تريد في مدونتك بلوجر بحيث سيأخذ قياسات المكان الذي وضعته فيه بالاضافة الى كونه متحرك وتلقائي. لمعرفة كود السلايد شو وطريقة تركيبه والتعديل عليه تابع الشرح.</div><div dir="rtl" style="text-align: justify;"><br /></div><div dir="rtl" style="text-align: justify;"><h3>معاينة السلايد شو</h3></div><div dir="rtl" style="text-align: center;"><a href="http://adf.ly/1ERAtV" id="demo" rel="nofollow" target="_blank">معاينة</a></div><h3 dir="rtl" style="text-align: justify;">تركيب السلايد شو</h3><div dir="rtl" style="text-align: right;"></div><ul dir="rtl" style="text-align: right;"><li>توجه الى لوحة تحكم مدونتك</li><li>ثم اضغط على تخطيط Layout</li><li>قم باضافة اداة جديدة في المكان الذي تود ان تضع فيه السلايد شو</li><li>اختر اداة <span id="url">html/javascript</span> ثم الصق كود السلايد شو في الصندوق وقم بالحفظ</li></ul><div dir="rtl" style="text-align: justify;"><br /></div><h3 dir="rtl" style="text-align: justify;">كود السلايد شو</h3><div style="text-align: justify;"><blockquote class="tr_bq" style="text-align: left;"><style><br />/* CSS Slider Recent Post */<br />#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}<br />#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}<br />#slides ul{height:320px}<br />#slides li{width:50%;height:100%;position:absolute;display:none}<br />#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}<br />#slides li:nth-child(1){right:0;top:0}<br />#slides li:nth-child(2){right:50%;width:25%;height:50%}<br />#slides li:nth-child(3){right:75%;width:25%;height:50%}<br />#slides li:nth-child(4){right:50%;top:50%;width:25%;height:50%}<br />#slides li:nth-child(5){right:75%;top:50%;width:25%;height:50%}<br />#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;<br />padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);<br />height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}<br />#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;<br />padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}<br />#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;<br />background:#ff6553;margin:0;}<br />#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;<br />padding:5px 21px;text-transform:uppercase;margin:0;}<br />#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}<br />#slides a{display:block;width:100%;height:100%;overflow:hidden}<br />#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}<br />#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}<br />#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}<br />#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';<br />right:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;<br />background:rgba(41,41,41,0.7);text-align:right;text-transform:uppercase;margin-left:10px;}<br />#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;<br />position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';<br />text-transform:uppercase;}<br />#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}<br />#slides .overlayx,#slides li{transition:all .4s ease-in-out}<br />#slides li:nth-child(1) .overlayx{display:none;}<br />#slides li:hover .overlayx{opacity:0.1}<br />@media only screen and (max-width:800px){<br />#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}<br />@media only screen and (max-width:600px){<br />  #slides ul{height:600px}<br />  #slides li:nth-child(1){width:100%;height:50%}<br />  #slides li:nth-child(2){top:50%;height:25%;right:0;width:50%}<br />  #slides li:nth-child(3){right:50%;top:50%;width:50%;height:25%}<br />  #slides li:nth-child(4){right:0;top:75%;height:25%;width:100%}<br />  #slides li:nth-child(5){display:none;}}<br />@media only screen and (max-width:480px){<br />#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}<br /></style><br /><br /><br /><div id="featuredpost"></div><br /><script type='text/javascript'><br />//<![CDATA[<br />function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",MonthNames:["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')<br />//]]><br /></script><br /><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function () {<br />FeaturedPost({<br />blogURL:"<span id="url">http://tadwinpro.blogspot.com/"</span>,<br />MaxPost:8,<br />idcontaint:"#featuredpost",<br />ImageSize:500,<br />interval:10000,<br />autoplay:true,<br />tagName:false<br />});<br />});<br />//]]><br /></script></blockquote></div><div dir="rtl" style="text-align: justify;"><br /></div><h3 dir="rtl" style="text-align: justify;">تعديلات على السلايد شو</h3><div dir="rtl" style="text-align: justify;"><ul><li>غير <span id="url">http://tadwinpro.blogspot.com/</span> برابط مدونتك</li></ul><div style="text-align: center;">إلى هنا يكون الموضوع قد انتهى، أتمنى أن ينال السلايد شو اعجابكم ولا تنسى التعبير برأيك في <u>التعليقات</u></div></div></div>

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

السلام عليكم ورحمة الله تعالى وبركاته، مرحبا بكم متتبعي وزوار مدونة تدوين باحتراف، في هذا الموضوع ان شاء الله سنتطرق الى سلايد شو لمدونات ب...

مزيد من المعلومات »