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

الجمعة، 11 مايو 2018

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

بسم الله الرحمن الرحيم

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

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

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

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

معاينة

شرح التركيب

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

@media only screen and (max-width: 1389px) {
.featuredposts .widget-content {display:none}
.featuredposts{position:relative;padding:15px;    border-bottom: 1px solid #e6e6e6;}
.featuredposts .widget{overflow:hidden;}
.featuredposts h2{display:none;}
.featuredposts .arl-tmb{width:100%;height:300px;display:block}
.featuredposts li .arl-tmb{-webkit-filter:grayscale(0);transition:all .3s ease-out;opacity: 0.7;}
.featuredposts li:hover .arl-tmb{}
.featuredposts .rcp-title{font-size:16px;    margin-bottom: 0;}
.featuredposts .arl-tmb:after{content:no-close-quote;position:absolute;bottom:0;right:0;width:100%;height:150px;opacity:.5;transition:all .3s ease-out;}
.featuredposts .arl-tmb:hover:after{opacity:.7;}
.featuredposts li{float: right; width: 32.3333%; height: 300px; position: relative; padding: 0; overflow: hidden; display: block; margin-left: 14px;}

.featuredposts .post-panel{position: absolute; bottom: 0; margin: 0 auto; padding: 10px;}
.featuredposts .rcp-title a{color:#fff;font-weight:700;position:relative;line-height:14px;text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.89); font-family: 'Changa', sans-serif;}
.featuredposts .recent-date,.featuredposts .recent-date:before,.featuredposts .recent-author,.featuredposts .recent-author:before{color:#fff;}
.featuredposts .post-tag{position: absolute; top: 0; left: 0; color: #fff; padding: 5px; text-transform: uppercase; font-weight:500; z-index: 2; font-size: 11px;font-family:''Changa', sans-serif', sans-serif;display:none;}
.featuredposts .post-tag:hover{color:#fff;}
}
@media screen and (max-width:960px) {
.featuredposts li:first-child{width:33.33%;}
.featuredposts li{width:31%;margin-bottom:20px!important}
.featuredposts .widget{height:auto;margin-bottom:0!important}
.first-ld{display: none}
.featuredposts li:first-child .arl-tmb{}
.featuredposts li:first-child{float:right}
.featuredposts li{float:right}
}
@media only screen and (max-width:640px){
.featuredposts li:first-child,.featuredposts li{width:100%;float:none;height:300px}
.featuredposts li:first-child .arl-tmb,.featuredposts li .arl-tmb{height:300px}
}
.featuredposts li:nth-child(3) {margin-left:0!important;}
abbr, acronym {text-decoration: none;}
.featuredposts li { background: #2574A9; }

2- ابحث عن </body> او <body/> واضف الكود التالى فوقه مباشرة

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
$(".featuredposts .widget-content").each(function() {
    var e = $(this).text();
    if (e.match("random")) {
        $.ajax({
            url: "/feeds/posts/default?alt=json-in-script",
            type: "get",
            dataType: "jsonp",
            success: function(e) {
                var t = e.feed.entry.length;
                var n = 0;
                var r = t - 3;
                var i = Math.floor(Math.random() * (r - n + 1)) + n;
                $.ajax({
                    url: "/feeds/posts/default?alt=json-in-script&start-index=" + i + "&max-results=3",
                    type: "get",
                    dataType: "jsonp",
                    success: function(e) {
                        var t = "";
                        var n = "<ul>";
                        for (var r = 0; r < e.feed.entry.length; r++) {
                            for (var i = 0; i < e.feed.entry[r].link.length; i++) {
                                if (e.feed.entry[r].link[i].rel == "alternate") {
                                    t = e.feed.entry[r].link[i].href;
                                    break
                                }
                            }
                            var s = e.feed.entry[r].title.$t;
                            var o = e.feed.entry[r].author[0].name.$t;
                            var u = e.feed.entry[r].published.$t.substring(0, 10);
                            var a = e.feed.entry[r].category[0].term;
                            var f = e.feed.entry[r].content.$t;
                            var l = $("<div>").html(f);
                            var c = l.find("img:first").attr("src");
                            var h = e.feed.entry[r].media$thumbnail.url;
                            if (c === undefined) {
                                var p = '<a class="arl-tmb" href="' + t + '" style="background:url(' + h + ') no-repeat center center;background-size: cover"/>'
                            } else {
                                var p = '<a class="arl-tmb" href="' + t + '" style="background:url(' + c + ') no-repeat center center;background-size: cover"/>'
                            }
                            n += '
<li><a href="/search/label/' + a + '" class="post-tag">' + a + "</a>" + p + '<div class="post-panel">
<h3 class="rcp-title">
<a href="' + t + '">' + s + '</a></h3>
<span class="recent-date">' + u + '</span><span class="recent-author">' + o + "</span></div>
</li>
"
                        }
                        n += '<div class="clear"/>
</ul>
';
                        $(".featuredposts .widget-content").each(function() {
                            if ($(this).text().match("random")) {
                                $(this).html(n);
                                $(this).removeClass("widget-content").addClass("layout-content");
                                $(".first-ld").remove();
                                $(this).find(".arl-tmb").each(function() {
                                    $(this).attr("style", function(e, t) {
                                        return t.replace("/default.jpg", "/mqdefault.jpg")
                                    }).attr("style", function(e, t) {
                                        return t.replace("s72-c", "s1600")
                                    })
                                });
                                $("p.trans").each(function() {
                                    var e = $(this).text();
                                    var t = $(this).attr("data-tran");
                                    $("#pages-wrapper *").replaceText(e, t)
                                })
                            }
                        })
                    }
                })
            }
        })
    }
    if (e.match("recent")) {
        $.ajax({
            url: "/feeds/posts/default?alt=json-in-script",
            type: "get",
            dataType: "jsonp",
            success: function(e) {
                $.ajax({
                    url: "/feeds/posts/default?alt=json-in-script&max-results=3",
                    type: "get",
                    dataType: "jsonp",
                    success: function(e) {
                        var t = "";
                        var n = "<ul>";
                        for (var r = 0; r < e.feed.entry.length; r++) {
                            for (var i = 0; i < e.feed.entry[r].link.length; i++) {
                                if (e.feed.entry[r].link[i].rel == "alternate") {
                                    t = e.feed.entry[r].link[i].href;
                                    break
                                }
                            }
                            var s = e.feed.entry[r].title.$t;
                            var o = e.feed.entry[r].author[0].name.$t;
                            var u = e.feed.entry[r].published.$t.substring(0, 10);
                            var a = e.feed.entry[r].category[0].term;
                            var f = e.feed.entry[r].content.$t;
                            var l = $("<div>").html(f);
                            var c = l.find("img:first").attr("src");
                            var h = e.feed.entry[r].media$thumbnail.url;
                            if (c === undefined) {
                                var p = '<a class="arl-tmb" href="' + t + '" style="background:url(' + h + ') no-repeat center center;background-size: cover"/>'
                            } else {
                                var p = '<a class="arl-tmb" href="' + t + '" style="background:url(' + c + ') no-repeat center center;background-size: cover"/>'
                            }
                            n += '
<li><a href="/search/label/' + a + '" class="post-tag">' + a + "</a>" + p + '<div class="post-panel">
<h3 class="rcp-title">
<a href="' + t + '">' + s + '</a></h3>
<span class="recent-date">' + u + '</span><span class="recent-author">' + o + "</span></div>
</li>
"
                        }
                        n += '<div class="clear"/>
</ul>
';
                        $(".featuredposts .widget-content").each(function() {
                            if ($(this).text().match("recent")) {
                                $(this).html(n);
                                $(this).removeClass("widget-content").addClass("layout-content");
                                $(".first-ld").remove();
                                $(this).find(".arl-tmb").each(function() {
                                    $(this).attr("style", function(e, t) {
                                        return t.replace("/default.jpg", "/mqdefault.jpg")
                                    }).attr("style", function(e, t) {
                                        return t.replace("s72-c", "s1600")
                                    })
                                });
                                $("p.trans").each(function() {
                                    var e = $(this).text();
                                    var t = $(this).attr("data-tran");
                                    $("#pages-wrapper *").replaceText(e, t)
                                })
                            }
                        })
                    }
                })
            }
        })
    }
});
//]]>
</script>
</b:if>

3- الكود التالى قم باضافته فى المكان الذى تريده لظهور السلايد شو اذا واجهتك مشكله او لم تعرف اين تضعه ضع رابط مدونتك فى تعليق سنخبرك اين تضيفه.

هذا كل شئ لاتنسى مشاركة الموضوع مع اصدقائك لكى يستفيدوا شكرا لكم

2 Comments

techمؤلف 26 ديسمبر 2019 في 4:58 م

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

رد

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

https://www.sharqawi-web.com التعبيرات

شرقاوى ويب

الجمعة، 11 مايو 2018

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

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

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

شرح التركيب

2 Comments

معلومات عن الموقع