السلام عليكم ورحمة الله وبركاته.

درس مفصل اليوم هو عن طريقة إضافة سلايد شو slideshow لمدونة blog بوجر .
أولا نستعرض مميزات سلايد شو slideshow الذي سنقوم بإضافته:

1. سهل التركيب install و للغاية .
2. أنيق و غاية في الروعة .
3. يتناسق تلقائيا مع أي قالب template(في ما يخص الأحجام) .
4. يعرض المواضيع بصورة تلقائية من دون أي تدخل منك .
5. لا يأثر على سرعة تحميل المدونة blog .



نمر لتطبيق الاضافة:

1. توجه للوحة التحكم الخاصة بمدونتك .
2. إختر تخطيط .
3. إضافة أداة .
4. ضع الكود code التالي داخل مستطيل الأكواد الخاصة بالأداة:

رمز Code:
<style type=&quot;text/css&quot;> #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:250px} #slides li{width:49.9%;height:100%;position:absolute;displ ay:none} #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block} #slides li:nth-child(1){left:0;top:0} #slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%} #slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%} #slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%} #slides a{display:block;width:100%;height:100%;overflow:hi dden} #slides img{display:block;width:100%;height:100%;border:0; padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px} #slides .overlayx{width:100%;height:100%;position:absolute ;z-index:2;background-image:url(http://softglad.at.ua/images/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #00BD79;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px} #slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal} #slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px} #slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute} #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none} #slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out} #slides li:hover .overlayx{-ms-filter:&quot;progidXImageTransform.Microsoft. Alpha(Opacity=10)&quot;;filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1} #buttons{margin: 5px auto;text-align: center;background:#00BD79;width: 10%;} #buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative} #buttons a::before{content:&quot;&quot;;width:0;height:0;bo rder-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%} #buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px} @media only screen and (max-width:600px){ #slides ul{height:600px} #slides li:nth-child(1){width:100%;height:49.8%} #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8% } #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:2 4.8%} #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%} } </style> <div id=&quot;featuredpost&quot;></div> <script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js&quot; type=&quot;text/javascript&quot;></script> <script src=&quot;http://softglad.at.ua/widgets/slider.js&quot; type=&quot;text/javascript&quot;></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { FeaturedPost({ blogURL:&quot;ضع رابط مدونتك هنا&quot;, MaxPost:8, idcontaint:&quot;#featuredpost&quot;, ImageSize:300, interval:5000, autoplay:true, tagName:false }); }); //]]> </script>
5. قم بتغير ما كتب بالأحمر برابط مدونتك .



6. قم بحفظ الأداة .
7. قم بسحب الأداة مباشرة فوق أداة رسائل المدونة blog الإلكترونية .


أتمنى أن يكون الدرس مفصل في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع إستفساراتكم في تعليق.

للمزيد من دروس بلوجر و أدوات بلوجر زوروا موقع TRUCSINFORMATIQUE من هنا





©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©