سلايدر Nivo الاحترافي لمدونات بلوجر

السلام عليكم .... �� , قررنا في هذه التدوينة أن اقدم لكم أضافة من أضافات بلوجر , ولهذا أقدم لكم اليوم سلايدر Nivo الاحترافي لمدونات بلوجر , المستعمل في قالب SimpLify 2 , يعرض �� لك مواضيع مختارة بحسب التسمية , مميز ⭐ وسلس ومتناسق مع أي قالب كان كذلك إن كان قالبك متجاوب �� فسيتجاوب معه كذلك السلايدر , نتجة الآن الى المعاينة ومن ثم الى التركيب .

شرح طريقة التركيب
1. ابحث عن ]]></b:skin> ثم ضع الكود التالي فوقه

الكود

/* Nivo Slider www.Pro7web.com */
.recent-slider {text-shadow: 0 1px 0 rgba(0,0,0,0.15);padding-left: 5px; padding-right: 1px; margin:0 auto;width: auto;}
.nivoSlider,.top-l-slider .nivoSlider{width:100%;text-align:Center;overflow:hidden}
.nivo-box,.nivoSlider{overflow:hidden}.nivoSlider{position:relative;height:300px}
.nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:300px!important}
.top-l-slider .nivoSlider{position:relative;height:400px}
.top-l-slider .nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:400px!important}
.nivo-main-image{display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:#fff;filter:alpha(opacity=0);opacity:0}
.nivo-box,.nivo-slice{z-index:5;position:absolute}
.nivo-box,.nivo-box img,.nivo-caption,.nivo-slice{display:block}
.nivo-slice{height:100%;top:0}.nivo-caption{position:absolute;bottom:10px;left:5%;width:90%;text-align:center;font:400 26px tahoma,sans-serif;z-index:8;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#fff}
.nivo-caption p{text-align:Center;font:400 13px tahoma,sans-serif;margin:10px 20px;padding:10px;display:inline-block;border-radius:1px;background:rgba(34, 34, 34, 0.83);line-height:21px}.nivo-caption a{color:#ecf0f1}.nivo-caption h3{text-align:center;padding:5px;display:inline-block;border-radius:1px;margin:0;line-height:37px!important;background:#47cf73 ;font:400 20px tahoma,sans-serif}
.nivo-caption .sliderdata{margin:10px;text-align:Center;color:#fff}
.nivo-html-caption{display:none}.nivo-directionNav a{position:absolute;top:50%;margin-top:-15px;z-index:9;font-size:0;display:block;width:30px;height:30px;border-radius:1px;line-height:30px!important;background-color:rgba(255, 255, 255, 0.28);cursor:pointer;box-shadow:1px 1px 1px rgba(0,0,0,.4);-moz-box-shadow:1px 1px 1px rgba(0,0,0,.4);-webkit-box-shadow:1px 1px 1px rgba(0,0,0,.4)}
.nivo-prevNav{left:10px}
.nivo-nextNav:before,.nivo-prevNav:before{position:Absolute;left:0;top:0;color:#fff;height:30px;width:30px;text-align:center;z-index:100;display:block}.nivo-prevNav:before{content:'\2190';font:400 20px sans-serif;line-height:30px!important}
.nivo-nextNav:before{content:'\2192';font:400 20px sans-serif;line-height:30px!important}.nivo-nextNav{right:10px}.nivo-controlNav{text-align: center; z-index: 9; position: relative; bottom: 290px; font-size: 0;}.nivo-controlNav a{cursor: pointer; display: block; width: 10px; height: 10px; background: #FFF; float: right; border-radius: 10px; margin-right: 5px;}.nivo-controlNav a.active{background:#47cf73}
* لمن اراد تغيير اللون الأخضر فكوده محدد بالأحمر #47cf73 (متكرر مرتين)
* إذا واجهك مشكل في عرض السلايدر يمكنك التعديل على المقاس باضافة مثلا 500px بدل auto المحدده بالبرتقالي وغير الرقم حسب ما يناسك

2. ابحث عن </head> ثم ضع الكود التالي فوقه

الكود

<script src='//http://cdn.rawgit.com/Karim-Ali-El-Sayed/Pro7web/131f0c0a/nivoslider.js' type='text/javascript'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
$(function () {
    $(".recent-slider").each(function () {
        $(this).append('<div id="slider"></div>');
        var e = $(this).attr("data-label"),
            n = "http://simplify2-template.blogspot.com.eg//feeds/posts/summary/-/" + e + "?max-results=" + 6 + "&alt=json-in-script",
            l = $(this);
        $.ajax({
            type: "GET",
            url: n,
            async: true,
            contentType: "application/json",
            dataType: "jsonp",
            success: function (s) {
                for (var r = 0; r < s.feed.entry.length; r++) {
                    for (var n = s.feed.entry[r], i = 0; i < n.link.length; i++)
                    if ("alternate" == n.link[i].rel) {
                        var o = n.link[i].href;
                        break
                    }
                    try {
                        var c = n.media$thumbnail.url.replace("s72-c", "h300-w1200-no")
                    } catch (p) {
                        var c = "https://lh3.googleusercontent.com/24RAodFW8xxgzHpVBAthJHsf_szjRoa3-KzlAEdFgB6X6A5Gmlm-nCvt5nRkE95T52PmHSE4Mf5wvNGoRUgIXjjHi4PjiucY3RimpoVdiTPKQN5Jdj2n9-9bW0wUSzQcirYstqGO8Unv5v7RMU5JD_Q-lEuBgtUfXEmHxOs6ENvJBanzORTRCVXwSzYNRJxijualu8mHhR5S6DG8l4CIo6uADoudrzXGsz7oszRXccZK_FbasxG5xJ9O0mtPuIVavRO8Or89er61NiJIctiUWV0YqtMMOqK214VSjs8-lAx_7LmkneNOrkP7NdXvGTK0fxHgRBiHL7Tm2weLM33LjyMEzY4ygL68Hx81iJK4D-YRmUa8NJhpEKs8q93jgjwJ3ZrgDSzn2pKI-y3c5VWrYf-H38_lWOIMf7uuTOzKUOqoQYZLN8bhFYVyB4bLUwfX0gDtTT38QsV6MILDBQZl6gHQrHt1C8Lpp9EZ0x-1Vl2r2HeKlXS60iuRKZdfSWZNbibE2y9GCfdbBzRUGa-G3GRkQstDu2UBtNOo6WHZ4GI=w600-h250-no"
                    }
                    var d = n.title.$t,
                        u = n.summary.$t.substr(0, 180),
                        h = '<a href="' + o + '"><img src="' + c + '" title="<a href=\'' + o + "'><h3>" + d + "</h3></a><p>" + u + '</p>"/></a>';
                    l.find("#slider").append(h)
                }
                $("#slider").nivoSlider({
                    effect: "random",
                    pauseTime: 5e3
                })
            }
        })
    })
});


//]]>
</script>
</b:if>
* غير الرابط http://simplify2-template.blogspot.com.eg/ برابط موقعك
* إذا أردت أن يظهر السلايدر في جميع الصفحات أحذف الكود الأول المحدد بالأحمر وكذلك نهايته في آخر الكود

3. قم بحفظ النموذج وتوجه إلى التخطيط
4. اذهب التى التخطيط , ثم اضف أداة Html/Javascript وضع بها الكود التالي

الكود

<div class="recent-slider" data-label="بلوجر">
</div>
* غير بلوجر بالتسمية التي تريد تدويناتها ان تظهر في السلايدر , واحرص على أن لا تحذف علامات الإقتباس ( '' )

الى هنا نكون قد انتهينا في أمان الله

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

التعليقات

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة

المشاركات الشائعة

أحدث التعليقات

رسالة!

نأسف بشده عن عدم الرد علي بعض تعليقاتكم ورسائلكم ، نظرا لانشغالي بالامتحانات ، اتمني منكم الدعاء لي بالنجاح ، واتمني لقم قضاء أجمل الاوقات معنا في " برو ويب " وسوف اعود لكم في 24/6

اذا كان لديكم اي استفسار مهم تفضلو بمراسلتني من حسابي علي الفيسبوك من هنا
تم النسخ