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

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

السلام عليكم ورحمة الله وبركاته
نقدم لكم اليوم سلايد شو تلقائي لمدونات بلوجر يعرض بشكل تلقائي أحدث المشاركات وهو متجاوب اي يمكن وضعه في أي مكان في مدونتك حتى يظهر بحجم تلقائي بشكل جميل وخفيف



حسناً كيفية تركيب هذا السلايد على مدونتك

أولاً يمكن إضافة هذا السلايد بطريقتين الطريقة الأولى من خلال القالب ثم انقر على تحرير html ثم قم بالبحث عن الرمز
]]></b:skin>
بعد أن نجد الرمز ]]></b:skin> نقوم بإضافة الكود التالي فوقه مباشرةً
#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;}}

الآن أبحث عن الرمز </body> عادةً يكون قبل آخر في القالب بعد أن نجد الرمز </body> نضيف الكود التالي فوقه مباشرةً
<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://www.madad2.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
غير رابط مدونتك بدلاً من http://www.madad2.com في الكود

الآن يجب أن نختار المكان المناسب حتى يظهر فيه هذا السلايد شو مثلا اسفل الرمز <div class='main-wrapper'> أو
<div class='outer-wrapper'>
المهم أن نختار المكان المناسب لكي يظهر فيه السلايد شو ثم نضع الكود التالي:
<div id="featuredpost"></div>
ثم حفظ القالب


الطريقة الثانية (السهلة)

من خلال لوحة التحكم -->> التخطيط -->> إضافة أداة ثم أختر من بين الأداوت أداة 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://www.madad2.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

غير رابط مدونتك بدلاً من http://www.madad2.com في الكود
ثم حفظ القالب.


التخصيص:


  • الرمز MaxPost:8, يمكنك زيادة أو تقليل عدد المشاركات التي تود أن تظهر في السلايد شو
  • الرمز ImageSize:500, الحجم الاقصى لعرض الصور 500 بكسل
  • الرمز interval:10000, سرعة السلايد شو الرقم 10000 يعني 10 ثانية.



هناك 31 تعليقًا

  1. ممكن شرح اضافة السمايلات زى ده :-? فى الكومنتات؟ ... وشكرا

    ردحذف
    الردود
    1. تفضل اخي من هنا
      http://www.madad2.com/2013/03/blog-post_2774.html

      حذف
    2. شكرا + انا عايز شرح ازاى احط تعليقات الفيس فى المدونة :)

      حذف
  2. وكمان عايز لينك ايميلك عالفيس بوك

    ردحذف
    الردود
    1. تفضل عزيزي من هنا يمكك تركيب تعليقات فيسبوك
      http://www.madad2.com/2013/10/Comments-Facebook.html
      إذا كنت بحاجة لمساعدة يمكنك الإتصال بنا

      حذف
  3. ممكن لينك ايميلك عالفيس بوك؟ ... وشكراااااا :) b-(

    ردحذف
    الردود
    1. تفضل عزيزي https://www.facebook.com/mohammed.haak

      حذف
  4. جزاك الله خيرا اخى الكريم جربته على مدونتى واشتغل تمام تفضل بزيارتى
    http://artv202.blogspot.com/

    ردحذف
  5. السلايدر رائع لكن المشكلة أنه لايظهر فقط في الرئيسية ... بل في كل صفحات المدونة ... أرجو المساعدة في أقرب وقت

    ردحذف
    الردود
    1. إذا كنت بالفعل ترغب بأن يظهر فقط بالصفحة الرئيسية فقط ضع الكود الاخير في داخل الكود التالي
      <b:if cond='data:blog.pageType == &quot;index&quot;'>

      ضع الكود هنا
      </b:if>

      حذف
  6. تسلم ايدك اخي مداد انت دائما رائع وافضل ما في السلايدر شو انه متجاوب لقد وفرت علي عناء التعديل لجعلة متجاوب اهنئك علي قالبك الجديد فهو بسيط ورائع وياريت تشرفني في مدونتي الجديده http://toppro7.blogspot.com/ التي سوف استمر العمل فيها بإذن الله وإنها من تصميمي كما قلت لك مسبقا ولاكن اخي اين اتعلم تصميم ادوات الجافا
    مثل هذة الاداة

    ردحذف
    الردود
    1. شكراً اخي محمد على كلماتك الطيبة وأتمنى لك التوفيق
      يمكنك تعلم الكثير من خلال هذا الموقع
      http://www.abdullaheid.net/

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

      حذف
  7. بيظهري موضيع مش عندى غى المدونة ممكن مساعدة ؟

    ردحذف
    الردود
    1. اقرا الشرح جيدا وطبقه لتظهر مواضيع مدونتك

      حذف

  8. اخي انا زبطت المدونة خاصتي ولاكن لما اضيف الرابط على الفايبسوك في ايا منشور يظهر اسم مدونة اخرى ما الحل رابط مدونتي :http://palalhadeth.blogspot.com/

    ردحذف
  9. كيف أجعل سلايدر شو يعرض قسم من الاقسام في اقرب وقت الله يخليك

    ردحذف
    الردود
    1. تفضل هذا مخصص بحسب التسمية
      http://www.madad2.com/2014/10/blog-post_5.html

      حذف
  10. السلام عليكم .. انا طبقت كل الخطوات المطلوبه لاضافه السلايد شو لكن ماظهر على المدونه ؟ ممكن اعرف شو الحل

    ردحذف
    الردود
    1. مرحبا ملكة
      الرجاء تطبيق الطريقة السهلة اخر كود
      واذا لم تنجح الطريقة الرجاء ارسال رابط مدونتك عبر نموذج الاتصال

      حذف
  11. كيف أستطيع حذف التاريخ من السليدر ... شكراً

    ردحذف
  12. لو سمحت انا عندي مشكلة انت حاط روابطك في السلايد كيف اغيرها

    ردحذف
  13. كيف أحذف التاريخ من السلايد

    ردحذف
    الردود
    1. أحذف الرمز
      MonthNames:["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],

      حذف
  14. كيف امسح التاريخ والترقيم من السلايد شو ويكفي عنوان الموضوع مع الصورة بدون التاريخ والارقام ؟؟

    ردحذف
    الردود
    1. تمت الإشارة غلى ذلك في التعليقات السابقة

      حذف
  15. فيه مشكلة تضايق زوار هو عند الضغط على اى عنوان موضوع بالسلايد شو يفتح رابط جديد لعرضه وهذا يضايق الزائر هل يمكن فتح الرابط بنفس الصفحة بدلا من نقله لصفحة جديدة

    ردحذف
    الردود
    1. هذه ليست مشكلة فهذه الطريقة تزيد من نسبة المشاهدة
      ولحذف النوافذ الجديدة ابحث داخل الكود عن الرمز target="_blank" فقط ثم إحذفه

      حذف
  16. هاذه دورة لتصميم وبرمجت سلايد شو على منصة بلوجر ارجو من الله الإفادة لجميع
    https://www.youtube.com/playlist?list=PL6VZQdgH16OtGTr3EWTLA4RCqI-fcLpN6

    ردحذف

تعليقاتكم تشجعنا على تقديم المزيد وهي محل إهتمامنا دائمًا

© جميع الحقوق محفوظة مداد الجليد 2013 - حقوق الطبع والنشر | مدعومة بكل فخّر من blogger | سياسة الخصوصية