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

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

معاينة السلايد شو

تركيب السلايد شو

  • توجه الى لوحة تحكم مدونتك
  • ثم اضغط على تخطيط 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/ برابط مدونتك
إلى هنا يكون الموضوع قد انتهى، أتمنى أن ينال السلايد شو اعجابكم ولا تنسى التعبير برأيك في التعليقات
هل أعجبك الموضوع ؟
خدمة تصميم بنرات

هناك 29 تعليقًا:

  1. الردود
    1. بارك الله فيك اخي وشكراا على مرورك الكريم ونتمنى ان ينال الموضوع اعجابك

      حذف
  2. الردود
    1. لتركيب السلايد شو قم بتطبيق جميع الخطوات المذكورة في الموضوع وبالتوفيق

      حذف
  3. مساعدة جزاكم الله

    http://teqnet02.blogspot.com/

    ردحذف
    الردود
    1. شريط أخبار الانترنت لا يعمل عندي أي مساعدة الله يرضى عليك
      http://teqnet02.blogspot.com/

      حذف
    2. اخي يجب عليك التعديل على الاضافة، قم بالتوجه الى كود الاضافة (يمكن ان تجده في اضافة html javascript في التخطيط او يمكن ان يكون مدمجا في القالب) وقم بالتغييرات الازمة مثلا يمكن ان تجد مكان خاص بكتابة رابط مدونتك او التصنيف الذي تريده ان يظهر في الشريط وهذا يختلف حسب كود الإضافة

      حذف
    3. أخي ممكن أرسل لك صورة من مكان الكود وترشدني للمكا المناسب

      حذف
    4. لقد رسلت لك الصورة ف gmail

      حذف
    5. راسلني على الصفحة اخي https://www.facebook.com/TadwinTop

      حذف
  4. السلايد شو يحجز مكان و لكن لا يظهر اخي.. ارجوك هل من حل ؟

    ردحذف
  5. السلام عليكم
    أخي العزيز عندما أضع رابط مدونتي في المكان المحدد
    لا تظهر إضافة سلايد شو على مدونتي
    ماهو حل هذة المشكلة
    وشكرا

    ردحذف
    الردود
    1. حاول ان تضيف رابط الموقع بـ: http
      وضعه بين هاتين العلامتين " هنا تضع الرابط "

      حذف
  6. اشكرك كثيرا

    http:\\sit-albite.blogspot.com

    ردحذف
  7. شكرا اخي
    نتمنى زيارتنا على المدونة

    http://mohtarefnetdz.blogspot.com/

    ردحذف
  8. مشكور أخي على هذا المنشور و أهنيك على هاي المدونة
    أخوك من العراق

    ردحذف
  9. هل يمكنك ارسال رابط تحميل القالب الموجود في التجربة
    http://545f64.blogspot.com/
    الايمايل yakoubovicgs@gmail.com
    موقعي www.tech-dz.ga

    ردحذف
  10. الف الف الف شكر بجد فوق الرائع

    ردحذف
  11. جعلها الله في ميزان حسناتك ... يارب شكرا لك جزيلا

    ردحذف
  12. شكرررررررررررررررررررررررراااااااااااااااااااااااااا و الف شكرا الله يوفقك

    ردحذف
  13. السلام عليكم جزاك الله الف خير موضوع مميز جدا
    جرببت السلايدر و اعجبني كثيرا لقد وضعته هنا في مدونتي الخاصة بالمقررات و الكتب...
    http://mo9arar4you.blogspot.com/

    ردحذف
  14. لايظهر اخى ارجو المساعدة

    ردحذف
  15. thanks for your Post !!...but I have a question, how I can change the speed of Slideshow ?

    ردحذف

جميع الحقوق محفوضة لمدونة تدوين باحتراف 2014/2013