أسهل طريقة لإضافة سلايدشو إحترافي الإصدار الثاني يقوم بعرض مواضيع المدونه تلقائيا
عشاق منصة بلوجر هم كثر و في كل مرة يبحثون عن أشياء جديدة لطرحها على مواقعهم و مدوناتهم و في درس اليوم سأعطيكم إضافة يبحث عنها تقريبا كل عشاق بلوجر ، الا و هي سلايد شو تلقائي و إحترافي يمكن إضافته إلى جميع مدونات بلوجر ، و لكن تابع الموضوع جيدا لتتلعم تركيبها بإحترافية .
في البداية يمكنك معاينة السلايد شو على الموقع التالي :
تأكد ايضا من وجود كلمة random في صندوق inrto-sec من التخطيط
في البداية يمكنك معاينة السلايد شو على الموقع التالي :
طريقة التركيب :
أولا قم بتحرير القالب ثم Ctrl+f و ابحث عن وسم ]]></b:skin> و ضع الكود التالي قبله :
.randompost{padding:1% 0}.randompost ul li{float:right;width:25%;padding:0;box-sizing:border-box;position:relative}.randomimg{overflow:hidden;background:#333;transition:all 1s ease;-moz-transition:all .8s ease;-ms-transition:all .8s ease;-webkit-transition:all .8s ease;-o-transition:all .8s ease}.randomimg:hover{background:#33b242}.randompost ul li:nth-child(1){height:420px;width:50%}.randompost ul li:nth-child(2){height:209.5px;width:50%}.randompost ul li:nth-child(1) .randomimg,.randompost ul li:nth-child(1) .rcp-thumb{height:420px}.randompost ul li:nth-child(1) .randomimg{margin-left:1px}.randompost ul li:nth-child(4) .randomimg{margin-top:1px}.randompost ul li:nth-child(3) .randomimg{margin-top:1px;margin-left:1px}.rcp-thumb{width:100%;height:209.5px;position:relative;display:block;overflow:hidden;opacity:.3!important;transition:all 1s ease;-moz-transition:all .8s ease;-ms-transition:all .8s ease;-webkit-transition:all .8s ease;-o-transition:all .8s ease;transform:scale(1.5);-moz-transform:scale(1.5);-webkit-transform:scale(1.5);-o-transform:scale(1.5);-ms-transform:scale(1.5);-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px)}.columns:hover .rcp-thumb{transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);-webkit-filter:blur(1px);-moz-filter:blur(2px);-o-filter:blur(2px);-ms-filter:blur(2px);filter:blur(2px)}.rcp-thumb:after{content:no-close-quote;position:absolute;left:0;bottom:0;width:100%;height:135px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc-YrQwSysXC9x3CAydwhi7yovVA5xCZdBxcbdI6Gzs5k6S21bIsqD_2OtZxFDNj2XlfXWFYhYFgQaEYg7N0CbUmtr4mJqO8930Zl73kH6rqT6iiFTkvhBvSlL1jJXGMKImXsp2noEOMk/s1600-r/metabg.png) repeat-x;opacity:.8;background-size:100% 100%;overflow:hidden}.featured-overlay{position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;background-color:rgba(40,35,40,0.05)}.re-tag .tag{position:absolute;top:15px;right:15px;background-color:#243748;color:#fefefe;text-transform:uppercase;font-weight:400;z-index:5;height:25px;line-height:25px;padding:0 5px;font-size:11px}.post-panel{position:absolute;bottom:0;right:0;width:100%;padding:15px;z-index:2;box-sizing:border-box}h3.rcp-title{font-size:16px;position:relative;margin-bottom:8px}.rcp-title a{color:#fefefe;font-weight:500;position:relative;line-height:1.4em;text-shadow:0 1px 1px rgba(0,0,0,0.5)}.re-ps{font-size:12px;color:#ccc;font-weight:400}.re-ps .recent-date i{margin-left:5px}
الاَن قم بالبحث عن وسم </head> او /head وضع الكود التالي قبله ( فوقه)
<script type='text/javascript'>
//<![CDATA[
function postbylabel(a){document.write("<ul class='labelposts'>");for(var b=0;b<a.feed.entry.length;b++){for(var c=a.feed.entry[b],d=0;d<c.link.length;d++)if("alternate"==c.link[d].rel){var e=c.link[d].href;break}var f=c.title.$t,g=c.category[0].term,h=c.author[0].name.$t,j=c.content.$t,k=c.published.$t,l=k.substring(0,4),m=k.substring(5,7),n=k.substring(8,10),o=[,"يناير ","فبراير ","مارس ","أبريل ","مايو ","يونيو ","يوليو ","أغسطس ","سبتمبر ","أكتوبر ","نوفمبر ","ديسمبر "],p=n+" "+o[parseInt(m,10)]+" "+l,q=0;c<h.link.length,q++,i=j.replace(/<.+?>/g,"").substring(0,120)+"...",img=c.media$thumbnail.url.replace("s72-c","s900-c").replace("default","hqdefault"),document.write("<li class='columnl'><div class='maincon'><div class='mainimg'><a class='imag' href="+e+" style='background:url("+img+")no-repeat center center;background-size: cover'></a><span class='forever'></span></div><div class='cont'><span class='tag'><a>"+g+"</a></span><h3 class='titlelab'><a href="+e+">"+f+"</a></h3><div class='autre'><span class='author'><i class='fa fa-user-circle'></i>"+h+"</span><span class='times'><i class='fa fa-clock-o'></i>"+p+"</span><p class='psummary'>"+i+"></p></div></div></li>")}document.write("</ul>")}function related_results_labels_thumbs(e){for(var f=0;f<e.feed.entry.length;f++){var g=e.feed.entry[f];relatedTitles[relatedTitlesNum]=g.title.$t;try{thumburl[relatedTitlesNum]=g.media$thumbnail.url}catch(e){s=g.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),a!=-1&&b!=-1&&c!=-1&&""!=d?thumburl[relatedTitlesNum]=d:"undefined"!=typeof defaultnoimage?thumburl[relatedTitlesNum]=defaultnoimage:thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicPtu-8xq5z6OkQORqGvS36i3ZqYmyFAsbJl4Hbicr4RK8LOoqjSYPsIG4A1eFVn_3C885tWczWlUtRCm9lgNWM3yM4ZmV-X4b9R-L_uL6cpMxGkqY_LS5k1UdQRu04j6fbDq1qw4AVhQ/s400/noimage.png"}relatedTitles[relatedTitlesNum].length>35&&(relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,90)+"");for(var h=0;h<g.link.length;h++)"alternate"==g.link[h].rel&&(relatedUrls[relatedTitlesNum]=g.link[h].href,relatedTitlesNum++)}}function removeRelatedDuplicates_thumbs(){for(var a=new Array(0),b=new Array(0),c=new Array(0),d=0;d<relatedUrls.length;d++)contains_thumbs(a,relatedUrls[d])||(a.length+=1,a[a.length-1]=relatedUrls[d],b.length+=1,c.length+=1,b[b.length-1]=relatedTitles[d],c[c.length-1]=thumburl[d]);relatedTitles=b,relatedUrls=a,thumburl=c}function contains_thumbs(a,b){for(var c=0;c<a.length;c++)if(a[c]==b)return!0;return!1}function printRelatedLabels_thumbs(a){var b;b="undefined"!=typeof splittercolor?splittercolor:"#d4eaf2";for(var c=0;c<relatedUrls.length;c++)relatedUrls[c]!=a&&relatedTitles[c]||(relatedUrls.splice(c,1),relatedTitles.splice(c,1),thumburl.splice(c,1),c--);var d=Math.floor((relatedTitles.length-1)*Math.random()),c=0;for(relatedTitles.length>0&&document.write('<ul id="related-posts">');c<relatedTitles.length&&c<20&&c<maxresults;)document.write('<li><div class="relaimg"><a'),document.write(' href="'+relatedUrls[d]+'"><img src="'+thumburl[d]+'"/></a></div><a'),document.write(' href="'+relatedUrls[d]+'"><div class="overlay">'+relatedTitles[d]+"</div></a></li>"),c++,d<relatedTitles.length-1?d++:d=0;document.write("</ul>"),relatedUrls.splice(0,relatedUrls.length),thumburl.splice(0,thumburl.length),relatedTitles.splice(0,relatedTitles.length)}function recentComments(a){var b=a.feed.entry.length>3?3:a.feed.entry.length;comments="<ul class='recentComments recent'>";for(var c=0;c<b;c++){var d="";try{d="<img src='"+a.feed.entry[c].author[0].gd$image.src.replace(/\/s[0-9]+(-*c*)\//,"/s70$1/")+"'/>"}catch(a){d="<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRTg5bgvWVE1ELOtoX9t0l3ySY1YhL-FMHcsbENUnDf7glZ72yqbtzGmIA1Xx0nGkHXv_7eLeqrebxi4n1DBCd4oNVZT6cms0tgDyz6fNp-WgxBHUl0cN9ktpx3vNBaQKXU1XWQNd0nLRZ/s1600-r/th.jpg'/>"}var e=a.feed.entry[c].link[2].href,f=a.feed.entry[c].content.$t.replace(/<.*?>/gi,"").split(/\s+/).slice(0,9).join(" ")+"...",g=a.feed.entry[c].published.$t,h=a.feed.entry[c].author[0].name.$t;g=t(g),comments+="<li><a href='"+e+"'> <div class='commentImg recentImg'>"+d+"</div><div class='commentCon recentCon'><div class='authorName recentTitle'>"+h+"</div><div class='commentSnippet'>"+f+"</div><div class='commentTime recentTime'><span>"+g+"</span></div></div></a></li>"}comments+="</ul>"}function printRecentComments(){document.write(comments)}function t(a){var b=a.substr(0,4),c=months[Number(a.substring(5,7))-1],d=Number(a.substring(8,10)),e=d+" "+c+" "+b;return e}function recentPosts(a){recentPostsV="<ul class='recentPosts recent'>";var b=3;b=a.feed.entry.length>3?3:a.feed.entry.length;for(var c=0;c<b;c++){var d="";try{d="<img src='"+a.feed.entry[c].media$thumbnail.url.replace(/\/s[0-9]+(-*c*)\//,"/s70$1/")+"' />"}catch(a){d="<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRTg5bgvWVE1ELOtoX9t0l3ySY1YhL-FMHcsbENUnDf7glZ72yqbtzGmIA1Xx0nGkHXv_7eLeqrebxi4n1DBCd4oNVZT6cms0tgDyz6fNp-WgxBHUl0cN9ktpx3vNBaQKXU1XWQNd0nLRZ/s1600-r/th.jpg'/>"}var e=t(a.feed.entry[c].published.$t),f=a.feed.entry[c].title.$t,g=a.feed.entry[c].link[a.feed.entry[c].link.length-1].href;recentPostsV+="<li><div class='recentPostImg recentImg'>"+d+"</div><div class='recentCon'><div class='recentPostTitle recentTitle truncate'><a href='"+g+"'>"+f+"</a></div><div class='recentPostTime recentTime'><span>"+e+"</span></div></div></li>"}recentPostsV+="</ul>"}function printRecentPosts(){document.write(recentPostsV)}$(document).ready(function(){$(".widget-content").each(function(){var a=$(this).text();a.match("random-posts")&&$.ajax({url:"/feeds/posts/default?alt=json-in-script",type:"get",dataType:"jsonp",success:function(a){var b=a.feed.entry.length,c=0,e=b-5,g=Math.floor(Math.random()*(e-c+1))+c;$.ajax({url:"/feeds/posts/default?alt=json-in-script&start-index="+g+"&max-results=4",type:"get",dataType:"jsonp",success:function(a){for(var b="",c='<ul class="post-widget">',e=0;e<a.feed.entry.length;e++){for(var g=0;g<a.feed.entry[e].link.length;g++)if("alternate"==a.feed.entry[e].link[g].rel){b=a.feed.entry[e].link[g].href;break}var h=a.feed.entry[e].title.$t,i=a.feed.entry[e].author[0].name.$t,j=a.feed.entry[0].published.$t,k=j.substring(0,4),g=j.substring(5,7),m=j.substring(8,10),n=[,"يناير ","فبراير ","مارس ","أبريل ","مايو ","يونيو ","يوليو ","أغسطس ","سبتمبر ","أكتوبر ","نوفمبر ","ديسمبر "],o=m+" "+n[parseInt(g,10)]+" "+k,p=0;if(b<i.link.length,p++,l=a.feed.entry[e].category[0].term,d=$("<div>").html(l),f=d.find("img:first").attr("src"),m=a.feed.entry[e].media$thumbnail.url,void 0===f)var k='<div class="randomimg"><a class="rcp-thumb" href="'+b+'" style="background:url('+m+') no-repeat center center;background-size: cover"><span class="featured-overlay"></span></a></div>';else var k='<a class="rcp-thumb" href="'+f+'"><img src="'+f+'"/></a>';c+="<li class='columns'>"+k+'<div class="re-tag"><span class="tag">'+l+'</span></div><div class="post-panel"><h3 class="rcp-title"><a href="'+b+'">'+h+'</a></h3><div class="re-ps"><span class="recent-date"><i class="fa fa-clock-o"></i>'+o+"</span></div></div></li>"}c+='</ul><div class="clear"/>',$(".widget-content").each(function(){$(this).text().match("random-posts")&&($(this).html(c),$(this).find("a.rcp-thumb").each(function(){$(this).attr("style",function(a,b){return b.replace("/default.jpg","/mqdefault.jpg")}).attr("style",function(a,b){return b.replace("s72-c","s1000")})}))})}})}})})});var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array,thumburl=new Array;$(document).ready(function(){$("#related-posts img").attr("src",function(a,b){return b.replace("s72","s640")}),$("#related-posts img").attr("src",function(a,b){return b.replace("/default.jpg","/mqdefault.jpg")})});var months=["يناير","فبراير","مارس","أبريل","مايو","يونيو"," يوليو"," أغسطس","سبتمبر","أكتوبر","نوفمبر"," ديسمبر"];
//]]>
</script>
المرحلة الاخيرة هي كود اضهار السلايد شو و يكون عادة تحت القائمة العلوية و قبل المواضيع
لذا يمكنك تجربة وضع قبل وسم main-wrapper او post-wrapper و شوف النتيجة
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div class='randompost'>
<div class='section' id='rpost'>
<div class='widget-content'>
random-posts
</div>
</div>
</div>
</b:if>
</b:if>
الاَن احفظ القالب و شاهد النتيجة .
ملاحظات :
اذا كان قالب الذي حملته يحوي على سلايد شو و هو متوقف و لا يظهر مثلا بسبب ازالة حقوق المصمم فهنا يجب عليك ازالة كافة سكربتات السلايد القديم و css الخاص به و عادة ابحث في القالب عن وسم Carousel او owlcarousel و قم بجذف كامل السكربت الشبيه بالذي اضفناه في الاعلى و نفس الشيء بالنسبة ل css الذي وضعناه قبل b:skin قم بجذفها و استبدالها .تأكد ايضا من وجود كلمة random في صندوق inrto-sec من التخطيط
EmoticonEmoticon