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


سلايدر احترافي متجاوب يعرض احدث المقالات ، مستعمل في العديد من القوالب المدفوعة منها قالب Mega-mag قالب FlatMag قالب Bmag والعديد سلايدر احترافي يلائم تقريبا جميع القوالب من حيث الشكل فيما يخص التركيب فهو سهل إما بوضعه بأداة مكانها فوق رسائل المدونة الإلكترونية أو بداخل القالب وكل هذا سيتم شرحه بعد المعاينة


شرح طريقة تركيب الإضافة


1. مباشرة من التخطيط أضف أداة Html/JavaScript وضع الكود التالي بها

<style> /* CSS Responsive Slider Recent Post www.Ar1web.com */ #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){left:0;top:0} #slides li:nth-child(2){left:50%;width:25%;height:50%} #slides li:nth-child(3){left:75%;width:25%;height:50%} #slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%} #slides li:nth-child(5){left: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:left;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;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:Electrolize,ge_ss_threeregular; 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:left;text-transform:uppercase;margin-right: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:Electrolize,ge_ss_threeregular; 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%;left:0;width:50%} #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%} #slides li:nth-child(4){left: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="https://ar1web-com.googlecode.com/svn/Hm/slider-post.js"></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { FeaturedPost({ blogURL:"http://www.ar1web.com", MaxPost:8, idcontaint:"#featuredpost", ImageSize:500, interval:10000, autoplay:true, tagName:false }); }); //]]> </script>



* المحدد بالأزرق ضع بدله رابط موقعك

إذا اردت وضع السلايدر بداخل القالب تابع المراحل التالية

1. ابحث داخل القالب بإستعمال Ctrl+F عن </head>
2. ضع الكود المحدد باللون الأحمر فوقه
3. ابحث عن </body>
4. ضع الكود المحدد باللون الأصفر فوقه

* في هذه المرحة والأخيرة يوجد مكانين لوضع الكود بهما ويكون إما فوق المواضيع أو تحت القائمة وغيرها
5. ابحث عن content-wrapper أو عن main-wrapper 
6.  ضع الكود المحدد باللون البرتقالي تحت احد الأكواد

هكذا اكون قد انتهيت نلتقي في التدوينة القادمة تحياتي

المصدر : عرب ويب
شاركه على جوجل بلس

الكاتب Unknown

انا بولنوار رشيد مدون جزائري يعشق التدوين و الالعاب فانشات هذه المدونة لاشاركة ما اعرف و احب معكم
    تعليقات بلوجر
    تعليقات فيسبوك

0 التعليقات:

إرسال تعليق