الدرس 144: انشاء صفحة ثابتة لاخر المواضيع على مدونة بلوجر

الصفحات الثابثة عنصر مهم على مدونات بلوجر حيث يمكن تتبيث عليها مواضيع او خدمات تقدمها للاعضاء او كما سنشرح لكم فى هذه الحلقة سنقوم بوضع صفحة ثابثة عليها محتوى لاخر المواضيع التى تم نشرها على مدونتك او يمكنك تخصيص اخر مواضيع لاي قسم من اقسام مدونتك تظهر بشكل جميل و منسق تستطيع التحكم فى عدد مواضيع التى ستظهر فى الصفحة الواحدة .

طبعا هذه الصفحة فائدها انك ستسهل على زوارك من الاطلاع على اخر مواضيع مدونتك او التى يمكن ان يكتشفوها فى صفحة واحدة و هذا يؤذي الى زيادة فى عدد زيارات صفحتك و خفض معدل الارتداد على مدونتك

سوف نشرح فى هذه الحلقة طريقة اضافة هذه الصفحة مع شرح بعض التعديلات التى يمكن ان تحتاجها فى عملك على صفحة ثابثة لاخر مواضيع المدونة او الاقسام

طريقة عمل صفحة ثابثة لاخر مواضيع بلوجر او قسم معين

الاكواد المستخدمة فى الدرس :

1- ضع هذا الكود فوق الوسم </head> .

ان كان موجود من قبل عندك لاداعي لاعادة اضافته
2- ضع هذا الكود داخل صفحة HTML للصفحة الثابثة . ( التعديلات موضحة فى الفيديو )

<div id="recentpostsae">
</div>
<div id="recentpostnavfeed">
</div>
<style scoped="" type="text/css">
*{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-box-sizing:border-box}
a,a:link,a:visited{text-decoration:none;transition:all .3s}
button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-space:normal;width:auto;border-radius:3px;outline:0}button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.button:focus,.button:hover{color:#fff}
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
#recentpostsae .recentpostel{width:48.9%;background:#fff;display:inline-block;margin:0 20px 10px 0;padding:15px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostsae .recentpostel:nth-child(even){margin:0 0 10px 0}
#recentpostsae .recentpostel img{background:#ecf0f1;padding:0;float:right;margin:0;margin-left:13px;width:72px}
#recentpostsae .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000}
#recentpostsae .recentpostel:hover{background-color:#fefefe}
#recentpostsae .recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{letter-spacing:-10px;text-align:center;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAhlN6ig2XzxdA3yUpSuu0zHm3iRALZfdreKHrkMEJ51DmSyrYH-4V_vmwzoBweRZDMOnjWMrysnRCVTy9_8AFL0vpWYE0Sy2PaCuVBGLxyMsX2mfB6qETvJWGwGuds3xDx7iHu8U2RGm-/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px}
#recentpostnavfeed{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto}
#recentpostnavfeed a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:0;cursor:pointer;transition:all .3s}
#recentpostnavfeed .next,#recentpostnavfeed .previous{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;padding:10px 16px;font-size:1rem;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed .next{float:right;margin:0 0 0 10px}
#recentpostnavfeed .previous{float:left;margin:0 10px 0 0}
#recentpostnavfeed .home{text-align:center;display:table;background:#fff;color:#222;font-size:1rem;float:none;padding:10px 16px;border-radius:99em;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:#ccc}
#recentpostnavfeed i{font-family:fontawesome;font-style:normal}
#recentpostnavfeed .next:hover,#recentpostnavfeed .previous:hover,#recentpostnavfeed .home:hover{background:#fff;color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
@media screen and (max-width:993px){#recentpostsae .recentpostel{width:100%;margin:0 0 10px 0}}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 20;
var startfeed = 0;
var urlblog = "https://www.arabes1.com";
var charac = 0;
var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKvDMgYd_5k86MMR7Ui0Yg1WYbJX9aiHe_5i6-anMNAGC0KqRtBTzhY_rO4pXgWAG0YwY9dTlUUUTq1PquCJWYxrDHt9vHGTEGwfjMmTyi5r8zFazyvlgvgiw98S1pEkm0yMVHRo7EDb4F/s1600/no-image.png",s+="<div class='recentpostel'>
",s+="<a href='"+r+"'><img src='"+a+"' /></a>",s+="<h6>
<a href='"+r+"'>"+n+"</a></h6>
",s+="<p>
"+arlinafeed(i,charac)+"</p>
",s+="</div>
"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'><i class='fas fa-arrow-left'></i></a>":"<span class='noactived previous'><i class='fas fa-arrow-left'></i></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'><i class='fas fa-arrow-right'></i></a>":"<span class='noactived next'><i class='fas fa-arrow-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='fas fa-home'></i></a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'>
</div>
",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>

بلوجر

عبد الرحيم

عبدالرحيم , مدون جزائري مهتم بكل مايتعلق بالتقنية , ناشر على الموقع وصانع محتوى على اليوتيوب , احب نشر كل ماهو مفيد للمحتوى العربي

أقسام الوصول السريع (مربع البحث)

الدرس 144: انشاء صفحة ثابتة لاخر المواضيع على مدونة بلوجر

طريقة عمل صفحة ثابثة لاخر مواضيع بلوجر او قسم معين

مقالات قد تهمك