06‏/02‏/2016

بناء على طلباتكم أطرح بين أيديكم سلايدر Nivo الاحترافي المستعمل في قالب تواصل، هذا السلايدر سيلبي حاجياتك من ناحية تقديم مواضيع مختارة بحسب التسمية سلس ومتناسق مع أي قالب كان كذلك إن كان قالبك متجاوب فسيتجاوب معه كذلك السلايدر
أظنني لست بحاجة لذكر شكله ومميزاته لأنكم سبق وتعرفتم عليه ولمن يريد أن يلقي نظرة على شكله مجددا وما يحتويه فليضغط على زر المعاينة
شرح طريقة التركيب
1. ابحث عن </head> ثم ضع الكود التالي فوقه
<script src='//cdn.rawgit.com/iHussam/ar1web/master/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://tawasol-1.blogspot.com//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://tawasol-1.blogspot.com برابط موقعك
* إذا أردت أن يظهر السلايدر في جميع الصفحات أحذف الكود الأول المحدد بالأحمر وكذلك نهايته في آخر الكود
2. ابحث عن ]]></b:skin> ثم ضع الكود التالي فوقه
/* Nivo Slider www.ar1web.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 المحدده بالبرتقالي وغير الرقم حسب ما يناسك
3. قم بحفظ النموذج وتوجه إلى التخطيط
4. اضف أداة Html/Javascript وضع بها الكود التالي
<div class="recent-slider" data-label="بلوجر">
</div>
* غير بلوجر بتسمية واحرص على أن لا تحذف علامات الإقتباس ( '' )
اتمنى أن لا تواجهوا اي مشاكل معه ولأي استفسار فباب التعليقات مفتوح، ولا تنسوا دعمنا بمشاركة التدوينة وميعادنا يتجدد في تدوينة آخرى إن شاء الله.
بناء على طلباتكم أطرح بين أيديكم سلايدر Nivo الاحترافي المستعمل في قالب تواصل، هذا السلايدر سيلبي حاجياتك من ناحية تقديم مواضيع مختارة بحسب التسمية سلس ومتناسق مع أي قالب كان كذلك إن كان قالبك متجاوب فسيتجاوب معه كذلك السلايدر
أظنني لست بحاجة لذكر شكله ومميزاته لأنكم سبق وتعرفتم عليه ولمن يريد أن يلقي نظرة على شكله مجددا وما يحتويه فليضغط على زر المعاينة
شرح طريقة التركيب
1. ابحث عن </head> ثم ضع الكود التالي فوقه
<script src='//cdn.rawgit.com/iHussam/ar1web/master/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://tawasol-1.blogspot.com//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://tawasol-1.blogspot.com برابط موقعك
* إذا أردت أن يظهر السلايدر في جميع الصفحات أحذف الكود الأول المحدد بالأحمر وكذلك نهايته في آخر الكود
2. ابحث عن ]]></b:skin> ثم ضع الكود التالي فوقه
/* Nivo Slider www.ar1web.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 المحدده بالبرتقالي وغير الرقم حسب ما يناسك
3. قم بحفظ النموذج وتوجه إلى التخطيط
4. اضف أداة Html/Javascript وضع بها الكود التالي
<div class="recent-slider" data-label="بلوجر">
</div>
* غير بلوجر بتسمية واحرص على أن لا تحذف علامات الإقتباس ( '' )
اتمنى أن لا تواجهوا اي مشاكل معه ولأي استفسار فباب التعليقات مفتوح، ولا تنسوا دعمنا بمشاركة التدوينة وميعادنا يتجدد في تدوينة آخرى إن شاء الله.
20 Blogger تعليقات
Disqus
20 التعليقات
المشرف
avatar

شكرا لك اخي فأنا عبقري الانترنت لقد غيرت اسمي فقط السلايد جميل جدا نتمى ان تواصل شكرا

المشرف
avatar

كيف اعمل السلايدر عند قلب الصورة طبيعية
وليست متحركة كشكل

المشرف
avatar

@Genie online على الرحب والسعة اخي نورت
@salabina video للأسف اخي التأثير بداخل كود السكربت وهو مرفوع على استضافة لا يمكنني عمل شيء

المشرف
avatar

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

المشرف
avatar

لا يا صديقي السلايدر مخصص لعرض المواضيع حسب التسميات، يمكنك استعمال هذا السلايدر : http://www.ar1web.com/2014/10/recent-post-slider-responsive.html

أو انتظر سلايدرات آخرى

المشرف
avatar

السلام عليكم اخي كلمة ]]>
لم اجدهى في قالب مدونتي هل من حل

المشرف
avatar

أهلا بك ابحث عنه هكذا skin ستجده مجموع أي عليك الضغط على السهم الذي بجانبه ليفتح

المشرف
avatar

شكرا على هذه السلايدر الجميلة أخى حسام وانشاء الله تزاد علما أكثر وأكثر وسلامات أخى

المشرف
avatar

تسلم يا صحبى موضوع جامد طيب لو عايزين منخليش السلايدر دا بتسمية يعنى يعرض اخر المواضيع نعم ايه لو مش هنتقل عليك

المشرف
avatar

أحسنت أخي موفق و أتمنى لك مستقبل باهر و مزيد من العطاء إنشاء الله

المشرف
avatar

اغير الخط لكن لا يتغير هل هو متكرر في اكواد css

المشرف
avatar

غير التالي (متكرر) :
tahoma,sans-serif

المشرف
avatar

السلام عليكم اخي اريد ان اضيفه في القالب مش في تحطيط

المشرف
avatar

السلام عليكم اخي اريد ااضافة فى القالب ليس التحطيط

المشرف
avatar

اخي انا عندي قالب تواصل ولاكن سلايدر لا يضهر

ولدي مشكل فالشريط لي فيه الاقسام اصبح كبير من الحجم العادي
هذا رابط المدونة ارو حل المشكل وشكرا على مجهودك

المشرف
avatar

أهلا بك جرب تحويل الكود اولا من هنا : http://www.ar1web.com/p/converter.html

المشرف
avatar

لا يعمل الكود اخي الكريم جربته لكن لا ادري ما المشكلة

المشرف
avatar

اخي اريد عمل اكتر من تسمية لكن لا اعرف

المشرف
avatar

السلام عليكم اتمنى لكافة متابعي مدونة عرب ويب يوم سعيد ن شاء الله.
اخي حسام في الحقيقة عملت اكثر من ساعتين من اجل ان اركب هذا السلايدر على قالب intime لكن بدون جدوى فالصور تظهر بشكل عادي واحدة تلو الأخرى .
المرجو منك مساعدتي سأرسل لك القالب عبر الإيميل وشكرا لك مسبقا

المشرف
avatar

شكرا يا أخي مدونتكم مبدعة كالعادة :)

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