اضافة سلايد شو مميز لمدونات بلوجر

اضافة سلايد شو مميز و احترافي لمدونات بلوجر 👌، حيث يعمل علي إظهار أحدث سلسلة من التدوينات تتضمن القسم والعنوان وصورة التدوينة التي تعمل علي جذب

 

السلام عليكم ورحمة الله وبركاته ✋، مرحبا بك يا صديقي المدون اينما كنت، نأمل ان تكون في حالة صحية جيدة 👍، في هذا الموضوع ستقوم مدونةwesam developer بمشاركتكم موضوع حول كيفية اضافة سلايد شو مميز و احترافي لمدونات بلوجر 👌، حيث يعمل علي إظهار أحدث سلسلة من التدوينات تتضمن القسم والعنوان وصورة التدوينة التي تعمل علي جذب انتباه الزوار 👀.

كثيرا وجدنا سلايد شو علي واجهة عرض المواقع الكبيرة التي تعرض العناوين و الاخبار الموصي بها 💥. اذا زاد فضولك فإن الطريقة سهلة للغاية. فقط تابع الخطوات ادناها.👇

معاينة الذهاب الي الموقع

كيفية اضافة سلايد شو مميز لمدونات بلوجر

1. قم أولاً بتسجيل الدخول إلى بلوجر⇦ اضغط على⇦المظهر ثم تحرير html ثم تضيف الكود التالي قبل </head>

<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Featured Post by Rotkx */
*,*:before, *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.featured_rotkxwrap{display:inline-block;width:100%;max-width:1070px;margin:0 auto 20px auto;overflow:hidden;max-height:410px}.featured_rotkx{display:block;position:relative;float:right;overflow:hidden;height:410px}.featured_rotkx.first{width:44.7%;margin-left:1px}.featured_rotkx.second{width:25%;margin-left:1px}.featured_rotkx.third,.featured_rotkx.fourth{width:30%;height:205px}.featured_rotkx.third{margin-bottom:1px}.featured_rotkx a{display:block;color:rgb(255,255,255);position:relative;vertical-align:bottom;z-index:1;height:100%}.featured_rotkx a:before{width:100%;height:100%;position:absolute;content:'';background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);opacity:.7;z-index:2;transition:all .6s}.featured_rotkx:hover a:before{opacity:1}.featured_rotkx a .blog_contents{display:block;position:absolute;z-index:5;bottom:15px;right:15px;left:15px;letter-spacing:-1px;text-transform:uppercase;line-height:120%;transition:all 0.2s}.featured_rotkxwrap span{color:#fff;padding:3px 6px;letter-spacing:0;font-size:12px;line-height:1;border-radius:3px;text-transform:capitalize;box-shadow:0 2px 5px rgba(0,0,0,0.2)}.featured_rotkx.first span{background:#679e37}.featured_rotkx.second span{background:#f8a724}.featured_rotkx.third span{background:#029ae4}.featured_rotkx.fourth span{background:#e53935}.featured_rotkx a .blog_contents h3{color:#fff;margin-top:15px;font-size:16px;line-height:normal;font-weight:normal;letter-spacing:-0.4px;text-transform:none;text-shadow:none}.featured_rotkx a .blog_contents h3:hover{text-decoration:underline}.featured_rotkx.first a .blog_contents h3{font-size:22px}.featured_rotkx .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;-webkit-backface-visibility:hidden;transition:all .3s}.featured_rotkx:hover .feat-img{transform:rotate(-3deg) scale(1.2);-webkit-filter:blur(2px);filter:blur(2px)}
@media only screen and (max-width:768px){
.featured_rotkxwrap{max-height:initial}.featured_rotkx.second,.featured_rotkx.first,.featured_rotkx.third,.featured_rotkx.fourth{width:100%;height:300px;margin:0;margin-bottom:1px}.featured_rotkx a .blog_contents{right:15px;left:15px;bottom:10px}.featured_rotkx.first a .blog_contents h3,.featured_rotkx a .blog_contents h3{font-size:20px}}
</style>
<script type='text/javascript'>
//<![CDATA[
// Featured post by Rotkx
function recentposts1(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length,document.write('<div class="featured_rotkxwrap">');for(var t=0;t<maxpost;t++){var i,n=e.feed.entry[t],r=n.title.$t,l=n.category[0].term;newsize;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){i=n.link[o].href;break}for(o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){n.link[o].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)g=n.summary.$t;else g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var m=[1,2,3,4,5,6,7,8,9,10,11,12],f=["Oca","Şub","Mar","Nis","May","Haz","Tem","Ağu","Eyl","Eki","Kas","Ara"],p=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<m.length;u++)if(parseInt(p)==m[u]){p=f[u];break}if(0==t){var v='<div class="featured_rotkx first"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(1==t){v='<div class="featured_rotkx second"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(2==t){v='<div class="featured_rotkx third"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(3==t){v='<div class="featured_rotkx fourth"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}j++}document.write("</div>")}imgr=new Array,imgr[0]="data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==",showRandomImg=!0,aBold=!0,numposts1=4,numposts11=1,newsize=400;
//]]>
</script>
</b:if>

اولا انتبه إلى الكود الذي تم وضع علامة عليه ، واضبط الحد الأقصى للعرض: 1070 بكسل على عرض القالب الخاص بك ، ثانيا تأكد من أن القالب يحتوي على مكتبة جي كويري. 

2. بعد ذلك أضف الكود التالي في المكان الذي تريده، يجب وضعها بين <body> و </body> 

<b:if cond='data:view.isHomepage'>
<div class='featured_rotkxz' id='featured_rotkxwrap'>
<div class='ct-wrapper'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=recentposts1\"><\/script>");
</script>
</div>
</div>
</b:if>

على سبيل المثال ، يمكنك وضعه داخل مساحة wrapper كالتالي :

<div id='wrapper'>
.....
.....
<b:if cond='data:view.isHomepage'>
<div class='featured_rotkxz' id='featured_rotkxwrap'>
<div class='ct-wrapper'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=recentposts1\"><\/script>");
</script>
</div>
</div>
</b:if>
.....
.....
</div>

سيتم عرض أحدث سلسلة من كل التدوينات، اذا كنت تريد ان يتم عرض قسم واحد فقط من اقسام مدونتك ابحث عن الكود التالي :

/feeds/posts/default?

ثم استبدله بالكود التالي

/feeds/posts/default/-/LABEL-NAME

غير الكود المحدد بإسم القسم الذي تريده ان يظهر

3. بعد ذلك اضغط علي حفظ واستمتع بالاضافة اذا واجهتك اي مشكلة قم بكتابتها بصندوق التعليقات بالأسفل 💬😊.

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا