8/18/2017

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

اضافة سلايد شو احترافي يقوم بعرض مواضيع المدونه تلقائيا لمدونات بلوجر 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;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="//cdn.rawgit.com/iHussam/ar1web/master/slider-rep.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>


لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق

يوجد 13 من التعليقات

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

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

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

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

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

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

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

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

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

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

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

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

      حذف