كيف يمكنك اضافة سلايد شو احترافى لمدونات بلوجر بسوووولة 2020

أصدقائى مرحبا بكم - سنقدم لكم الأن اضافة من أجمل اضافات بلوجر والتى يعشقها العديد من المدونين ، سنقوم بعمل سلايد شو لمدونة بلوجر بشكل سهل جداَ، أصدقائى لقد قمنا فى الموضوع السابق بشرح إضافة ماسنجر إلى مدونتك حتى يتواصل الزوار معك على الفيسبوك وسنقوم من الأن وصاعداً بعمل سلسلة من الموضوعات التى تشرح اضافات بلوجر الهامة والجميلة.
أما الأن فدعونا نتطرق إلى موضوعنا اليوم وهو كيفية اضافة السلايد شو إلى مدونة بلوجر، سلايد شو تلقائى ومتجاوب مع جميع الشاشات.

شرح طريقة التركيب:

1- قم بفتح لوحة تحكم بلوجر وتطرق الى المدونة المعنية
2- توجه الى تخطيط ثم اختر المكان الذى تريد أن يظهر فيه السلايد
3- ثم نقوم باضافة أداة Html/Javascript
4- قم بنسخ كود السلايد شو الإحترافى التالى وضعه فى الأداة الجديدة ثم غير رابط المدونة التالى هذا الموجود هنا فى الكود blogURL:"http://ar-pro-ar.blogspot.com",  إلى رابط مدونتك - ثم حفظ

<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>  

  

5- اذهب إلى المظهر - ثم تحرير Html 

    إبحث عن <head/> واضف الكود التالى فوقه :

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