اضافة سلايد شو تلقائي و احترافي لمدونات بلوجر - المحترف العربي
الرئيسية اضافات بلوجر / بلوجر / سلايد شو

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

اضافة سلايد شو احترافي يقوم بعرض مواضيع المدونه تلقائيا لمدونات بلوجر html مرحبا يسعدني ان اتقدم الكم احبابي بافضل اضافات بلوجر المجانية الحصرية و سهلة على منصة الخاصة بتطوير بلوجر مدونة المحترف العربي , خلال الدروس السابقة تطرقنا الى مجموعة من اضافات بلوجر الجميلة وجدابة  و اليوم كما وعدناكم بالجديد و الحصريات سنعرف على طريقة اضافة سلايد شو تلقائي و متجاوب مع جميع احجام الشاشات.

اضافة سلايد شو تلقائي بلوجر,سلايد شو احترافي يقوم بعرض مواضيع المدونه تلقائيا سلايد شو html, ,سلايد شو جاهز سلايد شو تلقائي رائع لمدونات بلوجر, سلايد شو بلوجر 2016, سلايد شو المحترف, كود سلايد شو احترافى,

شرح طريقة التركيب سلاد شو تلقائي و احترافي لمدونات بلوجر 2017 :

1- توجه لوحة تحكم بلوجر
2- تخطيط ثم اختر مكان الدي تريد ان يضهر فيه سلايد من افضل في بانر 
3- اضافة اداة html/javascript  ( مكان اسفل القائمة مكان البانر )
4- قم بنسخ كود سلايد شو احترافى التالي و ضعه في الاداة الجديدة ثم غير رابط الاصفر برابط مدونتك ثم  حفض 


<style>
/* CSS Responsive Slider Recent Post www.ar-pro-ar.blogspot.com */
#featuredpost {margin: 10px 0;}
#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:21px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:right;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:droid arabic kufi;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;right: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:#0a7cd2;margin:0;text-align: center;}
#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:droid arabic kufi;
left: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:rgb(10, 124, 210);padding:3px 6px;font-family:tahoma;
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;}}.overlayx{display:none; }
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://cdn.rawgit.com/proarabic/tharabic/04ca699e/slider.js">
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://ar-pro-ar.blogspot.com",
MaxPost:10,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

الان توجه الى القالب ثم تحرر html
ابحث عن  </head> و اضف الكود التالي فوقه :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

اقرأ أيضا:

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

  1. مرورك اروع شكرا لك x-)

    ردحذف
  2. ممتاز وشكرا لك اخي لكن ممكن تعطيني طريقة اضافة مكان خاص لنسخ النص يعني مكان لنسخ الاكواد مثلاً
    وشكرا لك

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

      حذف
  3. شكرا لحضرتك بس ممكن تقولى ازاى اعمل صندوق زى فيه مواضيع ذات صله زى الى فى نص الموضوع دا

    ردحذف
    الردود
    1. تفضل قم بزيارة احدث موضوع للمدونة و شكرا لك على طرح الموضوع (k)

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

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

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

      حذف
  6. سلايدر شو رائع واحترافي واخيرا وجدت سلايدر شو الذي اريده شكرا لك ايها العبقري شكرا لك ايها العالم الكبير لك كل شكر واحترام

    ردحذف
    الردود
    1. بالتوفيق وشكرا لك على تعليقك الراقي x-)

      حذف
  7. ما زبط معايه للاسف شو المشكل ممكن تفيدني يا اخي

    ردحذف
    الردود
    1. تحقق من انك غيرت رابط http://ar-pro-ar.blogspot.com برابط مدونتك

      حذف
  8. اخي تم اضافه الاكواد وتم تغيير رابط مدونتك برابط مدونتي لكن للاسف
    يضهر ما المشكله اخي يرجا الرد في اسرع وقت ممكن!

    ردحذف

to Top