اداة المشاركات الأخيرة بالتصنيفات

اداة المشاركات الأخيرة بالتصنيفات

مرحبا مرة اخرى، في هذه التدوينة سوف تحصلون على اضافة تعرض اخر المشاركات التي بموقعك على أساس التسمية المختارة
هذه الإضافة مفيدة للمدونات التي بها العديد من المواضيع أو الأقسام، ومع أحدث المشاركات سيجد الزائر سهولة في الوصول إلى المقالات في التسميات التي يبحث عنها.
وفيما يتعلق بتصميم الإضافة فهو جد حديث بمعنى يتشكل بحجم القالب المتوفر بالموقع عكس الإضافات الأخرى ويمكن التحكم في عدد عرض المواضيع وكذلك اختيار ما يظهر بها حسب التسمية
النسخة الأولى : إضافة أداة للمشاركات الأخيرة بصور مصغرة
لمن أراد تركيبها على موقعه فليتابع الشرح بعد المعاينة

• معاينة

شرح طريقة التركيب
. ابحث بإستعمال CTRL+F عن ]]></b:skin> أو ضعه بين <style> </style> فوق </head>
2. ضع الكود التالي فوقه

li.recent-posts:hover{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 5px 10px 0 rgba(0,0,0,0.12), 0 5px 10px -5px rgba(0,0,0,0.2li.recent-posts:hover{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 5px 10px 0 rgba(0,0,0,0.12), 0 5px 10px -5px rgba(0,0,0,0.2)}
.recenthd,li.recent-posts{box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);background:#fff;border-radius:3px;overflow:hidden}
a.gorecent{float:left;font-size:11px;padding:5px 10px;margin:-4px}
.recenthd h2{display:inline-block;text-transform:uppercase;font-size:15px;margin:0}
.recenthd svg{float:right;margin-left:10px}
.recenthd{padding:15px;text-align:right;margin-bottom:10px}ul#recent-posts{margin:0;padding:0}
li.recent-posts:nth-child(12),li.recent-posts:nth-child(4),li.recent-posts:nth-child(8){}
li.recent-posts{transition:all .3s ease-in-out;list-style:none;padding:0;margin-bottom:20px;text-align:center;width:260px;max-width:100%;float:right;height:260px;margin-left:20px}
.title_post a{color:#515151}li.recent-posts a:hover{color:#111}
.title_post{height:30px;overflow:hidden;padding:10px;line-height:1.4;font-size:13.4px}
.recent-posts img{height:190px;width:100%}
a.gorecent{text-transform:uppercase;line-height:1.5;font-size:11px;font-weight:700;color:#fff;border:none;padding:7px 15px 7px;border-radius:5px;background:#1976d2;cursor:pointer;outline:0;box-shadow:0 2px 2px 0 rgba(154,154,154,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.12);margin-left:7px}
@media screen and (max-width:768px){.howtouse{width:39%}#safe-wrapper{width:auto;padding:18px;margin:-100px 0 0}li.recent-posts{width:45.6%}}
@media screen and (max-width:480px){li.recent-posts{width:100%}}

3. ابحث عن هذا الكود </body> وضع الكود التالي فوقه

<script type='text/javascript'>
//<![CDATA[
// Recent Post Settings
var recentpost_url = "https://www.ar1web.co";
var numPosts = 9;
var recentpost_label = "قوالب بلوجر";
// Recent Post
function recentPosts(e){if(document.getElementById("recent-posts")){for(var t,s,r=e.feed.entry,n="",a=document.getElementById("recent-posts"),l=0;l<numPosts;l++){for(var c=0;c<numPosts;c++)if("alternate"==r[l].link[c].rel){s=r[l].link[c].href;break}"media$thumbnail"in r[l]?u=r[l].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+\-c/g,"/s300"):u="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMn7OH-wXb-1QZe5WvX1uWtjYsb4tFwWHKYE5NsL4H01whhlWqKwUwzFAu_a4kctGcuVVzrrTrn6IF4ieeHuGz7BdU78E8YP1ZGEXcFXM2J32YOmUr4SdVFmGy6JRknTTxmkRnrKiGp0w/s90/nothumb_large.png";var t=r[l].title.$t;n+='<li class="recent-posts"><a href="'+s+'" title="'+t+'" target="_blank"><img src="'+u+'" alt="'+t+'"></a><div class="title_post"><a href="'+s+'" title="'+t+'" target="_blank">'+t+"</a></div></li>"}a.innerHTML=n}}var rcp=document.createElement("script");rcp.src=recentpost_url+"/feeds/posts/default/-/"+recentpost_label+"?orderby=published&alt=json-in-script&max-results="+numPosts+"&callback=recentPosts",document.getElementsByTagName("head")[0].appendChild(rcp);
// Recent Post Title
var titlerecentpost = document.getElementById("xtitlex");
titlerecentpost.innerHTML='<div class="recenthd"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/></svg><h2>'+recentpost_label+'</h2><a class="gorecent" href="'+recentpost_url+'/search/label/'+recentpost_label+'" title="احدث المواضيع" target="_blank">المزيد</a></div>';
//]]>
</script>

* غير الرابط : https://www.ar1web.co
* var numPosts = 9; غير 9 بعدد المشاركات المراد اظهارها
* ضع تسمية بدل قوالب بلوجر
4. بعد ذلك، يرجى الانتقال إلى التخطيط >> إضافة أداة >> HTML/JAVASCRIPT
5. ثم ضع بها الكود التالي

<div id='xtitlex'></div>
<ul id='recent-posts'></ul>

6. حفظ.