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

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

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

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

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

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

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

معاينة

شرح التركيب

1. 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; }  

1. 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>  

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

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div class='featuredposts' id='featuredposts'> <b:section class='first-tmb' id='first-tmb' maxwidgets='1' showaddelement='yes'> <b:widget id='HTML102' locked='false' title='السلايد شو' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'>recent</b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2></b:if> <div class='widget-content'> <data:content/> </div></b:includable> </b:widget> </b:section> <div class='first-ld'><i aria-hidden='true' class='fa fa-spinner'/> </div></div></b:if>  

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