السلام عليكم ورحمة الله تعالى وبركاته، مرحبا بكم متتبعي وزوار مدونة تدوين باحتراف، في هذا الموضوع ان شاء الله سنتطرق الى سلايد شو لمدونات بلوجر وطريقة تركيبه والتعديل عليه، حقا فالسلايد شو هو اضافة يحبها العديد من المدونين لما لها من فوائد اذ يقوم بعرض آخر المواضيع في المدونة بشكل جذاب بحيت يمكن الزائر الى الولوج الى هذه المواضيع بكل سهولة فالسلايد شو الذي سنتطرق اليه في هذه التدوينة ذو شكل جذاب وأنيق وما يميزه عن باقي السلايدشوهات الآخرى هو كونه متجاوب مع جميع الشاشات، ويمكنك وضعه في أي موضع تريد في مدونتك بلوجر بحيث سيأخذ قياسات المكان الذي وضعته فيه بالاضافة الى كونه متحرك وتلقائي. لمعرفة كود السلايد شو وطريقة تركيبه والتعديل عليه تابع الشرح.
معاينة السلايد شو
تركيب السلايد شو
- توجه الى لوحة تحكم مدونتك
- ثم اضغط على تخطيط Layout
- قم باضافة اداة جديدة في المكان الذي تود ان تضع فيه السلايد شو
- اختر اداة html/javascript ثم الصق كود السلايد شو في الصندوق وقم بالحفظ
كود السلايد شو
<style>
/* CSS Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#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}
#slides li:nth-child(1){right:0;top:0}
#slides li:nth-child(2){right:50%;width:25%;height:50%}
#slides li:nth-child(3){right:75%;width:25%;height:50%}
#slides li:nth-child(4){right:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){right:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#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;}
#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;}
#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;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
right:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:right;text-transform:uppercase;margin-left:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#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;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;right:0;width:50%}
#slides li:nth-child(3){right:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){right:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<br />
<div id="featuredpost"></div>
<script type='text/javascript'>
//<![CDATA[
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('')
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://tadwinpro.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
تعديلات على السلايد شو
- غير http://tadwinpro.blogspot.com/ برابط مدونتك
إلى هنا يكون الموضوع قد انتهى، أتمنى أن ينال السلايد شو اعجابكم ولا تنسى التعبير برأيك في التعليقات
شكرا للموضوع
ردحذفبارك الله فيك اخي وشكراا على مرورك الكريم ونتمنى ان ينال الموضوع اعجابك
حذفبارك الله فيك
حذفتركيب السلايد شو ?
ردحذفلتركيب السلايد شو قم بتطبيق جميع الخطوات المذكورة في الموضوع وبالتوفيق
حذفمساعدة جزاكم الله
ردحذفhttp://teqnet02.blogspot.com/
تفضل أخي
حذفشريط أخبار الانترنت لا يعمل عندي أي مساعدة الله يرضى عليك
حذفhttp://teqnet02.blogspot.com/
اخي يجب عليك التعديل على الاضافة، قم بالتوجه الى كود الاضافة (يمكن ان تجده في اضافة html javascript في التخطيط او يمكن ان يكون مدمجا في القالب) وقم بالتغييرات الازمة مثلا يمكن ان تجد مكان خاص بكتابة رابط مدونتك او التصنيف الذي تريده ان يظهر في الشريط وهذا يختلف حسب كود الإضافة
حذفأخي ممكن أرسل لك صورة من مكان الكود وترشدني للمكا المناسب
حذفنعم اخي تفضل
حذفلقد رسلت لك الصورة ف gmail
حذفراسلني على الصفحة اخي https://www.facebook.com/TadwinTop
حذفالسلايد شو يحجز مكان و لكن لا يظهر اخي.. ارجوك هل من حل ؟
ردحذفالسلام عليكم
ردحذفأخي العزيز عندما أضع رابط مدونتي في المكان المحدد
لا تظهر إضافة سلايد شو على مدونتي
ماهو حل هذة المشكلة
وشكرا
حاول ان تضيف رابط الموقع بـ: http
حذفوضعه بين هاتين العلامتين " هنا تضع الرابط "
اشكرك كثيرا
ردحذفhttp:\\sit-albite.blogspot.com
شكرا اخي
ردحذفنتمنى زيارتنا على المدونة
http://mohtarefnetdz.blogspot.com/
مشكور أخي على هذا المنشور و أهنيك على هاي المدونة
ردحذفأخوك من العراق
جيد جدا
ردحذفهل يمكنك ارسال رابط تحميل القالب الموجود في التجربة
ردحذفhttp://545f64.blogspot.com/
الايمايل yakoubovicgs@gmail.com
موقعي www.tech-dz.ga
الف الف الف شكر بجد فوق الرائع
ردحذفجعلها الله في ميزان حسناتك ... يارب شكرا لك جزيلا
ردحذفشكرررررررررررررررررررررررراااااااااااااااااااااااااا و الف شكرا الله يوفقك
ردحذفانت معلم شكرا
ردحذفالسلام عليكم جزاك الله الف خير موضوع مميز جدا
ردحذفجرببت السلايدر و اعجبني كثيرا لقد وضعته هنا في مدونتي الخاصة بالمقررات و الكتب...
http://mo9arar4you.blogspot.com/
لايظهر اخى ارجو المساعدة
ردحذفthanks for your Post !!...but I have a question, how I can change the speed of Slideshow ?
ردحذفمشكووووور
ردحذف