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

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

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

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

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:&#39;&#39;;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(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</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(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</b:if>
.....
.....
</div>

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

/feeds/posts/default?

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

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

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

3. بعد ذلك اضغط علي حفظ، واستمتع بالإضافة. 💪

سهل أليس كذلك؟ 😅 حسناً انتهي الموضوع. ونأمل ان يكون مفيدا! 😍

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

• معاينة
• معاينة التجاوب