أداة خريطة الموقع أو فهرس المحتويات للمدونة مع ترقيم الصفحات Blogger Archive with Pagination سكريبت أصلي وعتيق أضعه لكم مجانا وبإصداره الجديد مع طريقة عرض دينامكية بحيث يمكن تخصيص الألوان وإتجاه اللغة عربي أو أجنبي كما يمكن جعل الأداة تعرض قسم معين بدلا من عرض كامل للمنشورات .
والميزة الأهم في الإضافة هي طريقة العرض السهلة وذلك عن طريق التنقل الرقمي دون إعادة تحميل الصفحة كاملة.
كما أحيطك علما أنه يمكنك تحميل الأكواد الخاصة بهذه الأداة كنسخة إحتياطية على جهازك ستجد الأكواد بدون ضغط أو تشفير ليسهل قرائتها أو التعديل فيها.
والميزة الأهم في الإضافة هي طريقة العرض السهلة وذلك عن طريق التنقل الرقمي دون إعادة تحميل الصفحة كاملة.
كما أحيطك علما أنه يمكنك تحميل الأكواد الخاصة بهذه الأداة كنسخة إحتياطية على جهازك ستجد الأكواد بدون ضغط أو تشفير ليسهل قرائتها أو التعديل فيها.
معاينة الإضافة
طريقة تركيب الأداة
<style type='text/css'>
/**
* [sitemap]
* Blogger Archive with Pagination
* update by BA88 On 8 October 2018
*/
.rtl{direction:rtl;text-align:right;}
.ltr{direction:ltr;text-align:left;}
#toc-outer{font-family:inherit;font-size:12px;color:#666;margin:0 auto;padding:15px;background-color:#f8f8f8;}
#loadingscript{padding:10px;position:relative;overflow:hidden;width:100%;height:50px;text-align:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-moz-box-pack:center;justify-content:start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
#loadingscript span.loading-Text{color:#d2d2d2;}
#loadingscript:before,#loadingscript:after{content:"";display:block;width:25px;height:25px;border-width:2px;border-style:solid;border-color:#cecece;margin:0 auto;font-size:10px;position:absolute;left:0;right:0;}
#loadingscript:after{-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear;}
.itemposts{margin:0 auto 20px;height:auto;background-color:white;overflow:hidden;display:block;}
.itemposts h6{margin:0 auto 2px;padding:10px 15px;text-transform:none;color:white;}
.itemposts h6 a{color:white;text-decoration:none;font-size:13px;}
.itemposts img{height:72px;width:72px;padding:0;background-color:white;border:0;}
.rtl .itemposts img{float:right;margin:2px 0 2px 10px;}
.ltr .itemposts img{float:left;margin:2px 10px 2px 0;}
.itemposts .iteminside{padding:20px;background-color:#ffffff;}
.itemposts .itemfoot{clear:both;padding:10px;margin:10px 0 0;background-color:#ffffff;border-top:7px dotted #f8f8f8;overflow:hidden;}
.itemposts .itemfoot span{position:relative;display:inline-block;margin:5px 2px;line-height:normal;}
.itemposts .itemfoot a.itemrmore{background:#f8f8f8;color:#949494;text-align:center;padding:5px 20px;float:left;text-decoration:none;}
.rtl .itemposts .itemfoot a.itemrmore{float:left;}
.ltr .itemposts .itemfoot a.itemrmore{float:right;}
#itempager{background-color:#ffffff;padding:30px 0;}
#pagination,#totalposts{color:#999;font-family:inherit;font-size:13px;padding:0;margin-bottom:10px;text-align:center;}
#pagination span,#pagination a{color:#949494;display:inline-block;margin:0 2px;padding:8px;min-width:30px;max-height:30px;line-height:1;text-indent:0;background-color:#f8f8f8;text-decoration:none;border-radius:100px;}
#pagination span.actual,#pagination a:hover{color:white;}
#pagination span.hidden{display:none;}
/*linear-gradient*/
.itemposts img,#loadingscript:before,#loadingscript:after{-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%;border-radius:100%;}
.itemposts .itemfoot a.itemrmore{-webkit-border-radius:100px;-moz-border-radius:100px;-ms-border-radius:100px;-o-border-radius:100px;border-radius:100px;}
.itemposts,#itempager{-webkit-border-radius:7px;-moz-border-radius:7px;-ms-border-radius:7px;-o-border-radius:7px;border-radius:7px;}
/*box-shadow*/
.itemposts,#itempager{-webkit-box-shadow:0 6px 15px rgba(0,0,0,0.06);-moz-box-shadow:0 6px 15px rgba(0,0,0,0.06);-ms-box-shadow:0 6px 15px rgba(0,0,0,0.06);-o-box-shadow:0 6px 15px rgba(0,0,0,0.06);box-shadow:0 6px 15px rgba(0,0,0,0.06);}
.itemposts img,.itemposts .itemfoot a.itemrmore:hover,.itemposts:hover{-webkit-box-shadow:0 6px 15px rgba(0,0,0,0.16);-moz-box-shadow:0 6px 15px rgba(0,0,0,0.16);-ms-box-shadow:0 6px 15px rgba(0,0,0,0.16);-o-box-shadow:0 6px 15px rgba(0,0,0,0.16);box-shadow:0 6px 15px rgba(0,0,0,0.16);}
/*keyframes*/
@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
/*linear-gradient*/
.gradient-orange .itemposts h6{background:-webkit-linear-gradient(50deg,#ffc410,#ffa610);background:-moz-linear-gradient(50deg,#ffc410,#ffa610);background:-ms-linear-gradient(50deg,#ffc410,#ffa610);background:-o-linear-gradient(50deg,#ffc410,#ffa610);background:linear-gradient(40deg,#ffc410,#ffa610);}
.gradient-blue .itemposts h6{background:#1fffac;background:-webkit-linear-gradient(50deg,#1fffac,#3aa2ff);background:-moz-linear-gradient(50deg,#1fffac,#3aa2ff);background:-ms-linear-gradient(50deg,#1fffac,#3aa2ff);background:-o-linear-gradient(50deg,#1fffac,#3aa2ff);background:linear-gradient(40deg,#1fffac,#3aa2ff);}
.gradient-red .itemposts h6{background:#1fffac;background:-webkit-linear-gradient(50deg,#754597,#ff4848);background:-moz-linear-gradient(50deg,#754597,#ff4848);background:-ms-linear-gradient(50deg,#754597,#ff4848);background:-o-linear-gradient(50deg,#754597,#ff4848);background:linear-gradient(40deg,#754597,#ff4848);}
/*color*/
.gradient-orange .itemposts .itemfoot{color:#fcb615;}
.gradient-blue .itemposts .itemfoot{color:#3aa2ff;}
.gradient-red .itemposts .itemfoot{color:#ff4848;}
/*background color*/
.gradient-orange #pagination span.actual,.gradient-orange #pagination a:hover{background-color:#fcb615;}
.gradient-blue #pagination span.actual,.gradient-blue #pagination a:hover{background-color:#3aa2ff;}
.gradient-red #pagination span.actual,.gradient-red #pagination a:hover{background-color:#ff4848;}
/*border color*/
.gradient-orange #loadingscript:after{border-left-color:#ffc410;}
.gradient-blue #loadingscript:after{border-left-color:#3aa2ff;}
.gradient-red #loadingscript:after{border-left-color:#ff4848;}
</style>
<script>
var siteUrl = window.location.origin,
rtl = true,
Themes = "gradient-orange",
montharabic = true,
showPostDate = true,
showComments = true,
sortByLabel = false,
labelSorter = "html",
loadingText = "جاري التحميل...",
totalPostLabel = "عدد المواضيع:",
jumpPageLabel = "الصفحة",
commentsLabel = "التعليقات",
rmoreText = "إقرأ المزيد",
prevText = "السابق",
nextText = "التالي",
postPerPage = 5,
numChars = 300,
imgBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXkQzPZOy000-2ws-bwZoyIYhXLJG6nBpprLiqflq4vFd70ixXhISFm8AfXUJdrQokzFip1kETsnmqp7eWW_p6bUldLCXbZ-1WTds9IDvhcGLnyr6giHZbPi8XKvx6lOZSyc9GXZWCzz2J/s1600/no-img-300x300-blogg-code.jpg";
var minpage=6,maxpage=10,firstpage=0,pagernum=0,postsnum=0,actualpage=1;direction=rtl?"rtl":"ltr",document.write('<div class="'+direction+" "+Themes+'"><div id="toc-outer"><div id="results"></div><div id="itempager" style="position:relative;"><div id="pagination"></div><div id="totalposts"></div></div></div></div>');var _results=document.getElementById("results"),_pagination=document.getElementById("pagination"),_totalposts=document.getElementById("totalposts");function showPagePosts(a){var t,e,s,i,r,n,p,u="";0===pagernum&&(postsnum=parseInt(a.feed.openSearch$totalResults.$t),pagernum=parseInt(postsnum/postPerPage)+1);for(var l=0;l<postPerPage;l++)if("entry"in a.feed){if(l==a.feed.entry.length)break;e=(t=a.feed.entry[l]).title.$t;for(var o=0,c=t.link.length;o<c;o++)if("alternate"==t.link[o].rel){s=t.link[o].href;break}for(var m=0,g=t.link.length;m<g;m++)if("replies"==t.link[m].rel&&"text/html"==t.link[m].type){var d=t.link[m].title.split(" ")[0];break}(i="summary"in t?t.summary.$t.replace(/<br ?\/?>/gi," ").replace(/<.*?>/g,"").replace(/[<>]/g,""):"").length>numChars&&(i=0<numChars&&!1!==numChars?i.substring(0,numChars)+"...":"");var v=t.published.$t,f=v.substring(0,4),h=v.substring(5,7),_=v.substring(8,10);n=montharabic?["جانفى","فيفرى","مارس","أفريل","ماى","جوان","جويلية","أوت","سبتمبر","أكتوبر","نوفمبر","ديسمبر"]:["January","February","March","April","May","June","July","August","September","October","November","December"],p=showPostDate?_+" "+n[parseInt(h,10)-1]+" "+f+" - ":"",r=showComments?d+" "+commentsLabel:"",u+='<div class="itemposts">',u+='<h6><a href="'+s+'" title="'+e+'">'+e+"</a></h6>",u+='<div class="iteminside"><a href="'+s+'"><img src="'+("media$thumbnail"in t?t.media$thumbnail.url:imgBlank)+'" /></a>',u+='<span class="summary">'+i+"</span></div>",u+='<div style="clear:both;"></div><div class="itemfoot"><span class="itemtime">'+p+'</span><span class="itemcomn">'+r+'</span><a class="itemrmore" href="'+s+'">'+rmoreText+"</a></div>",u+="</div>"}_results.innerHTML=u,_create_pagination()}function _create_pagination(){output="";var a=0;if(output+=(1<actualpage?'<a title="'+prevText+'" class="prevjson" href="javascript:_init_script('+(actualpage-1)+')">'+prevText+"</a>":'<span class="prevjson hidden">'+prevText+"</span>")+'<em style="font:inherit;color:inherit;" class="pagernumber">',pagernum<maxpage+1)for(a=1;a<=pagernum;a++)output+=a==actualpage?'<span class="actual">'+a+"</span>":'<a href="javascript:_init_script('+a+')">'+a+"</a>";else if(maxpage-1<pagernum)if(actualpage<minpage){for(a=1;a<maxpage-2;a++)output+=a==actualpage?'<span class="actual">'+a+"</span>":'<a href="javascript:_init_script('+a+')">'+a+"</a>";output+=" ... ",output+='<a href="javascript:_init_script('+parseInt(pagernum-1)+')">'+parseInt(pagernum-1)+"</a>",output+='<a href="javascript:_init_script('+pagernum+')">'+pagernum+"</a>"}else if(actualpage<pagernum-(minpage-1)&&minpage-1<actualpage){for(output+='<a href="javascript:_init_script(1)">1</a>',output+='<a href="javascript:_init_script(2)">2</a>',output+=" ... ",a=actualpage-2;a<=actualpage+2;a++)output+=a==actualpage?'<span class="actual">'+a+"</span>":'<a href="javascript:_init_script('+a+')">'+a+"</a>";output+=" ... ",output+='<a href="javascript:_init_script('+(pagernum-1)+')">'+parseInt(pagernum-1)+"</a>",output+='<a href="javascript:_init_script('+pagernum+')">'+pagernum+"</a>"}else for(output+='<a href="javascript:_init_script(1)">1</a>',output+='<a href="javascript:_init_script(2)">2</a>',output+=" ... ",a=pagernum-(minpage+1);a<=pagernum;a++)output+=a==actualpage?'<span class="actual">'+a+"</span>":'<a href="javascript:_init_script('+a+')">'+a+"</a>";output+="</em>"+(actualpage<a-1?'<a title="'+nextText+'" class="nextjson" href="javascript:_init_script('+(actualpage+1)+')">'+nextText+"</a>":'<span class="nextjson hidden">'+nextText+"</span>"),_pagination.innerHTML=output,_totalposts.innerHTML=totalPostLabel+" "+postsnum+" - "+jumpPageLabel+" "+(actualpage*postPerPage-(postPerPage-1))+(actualpage<a-1?" - "+actualpage*postPerPage:"")}function _init_script(a){var t,e,s=a*postPerPage-(postPerPage-1),i=document.getElementsByTagName("head")[0],r=sortByLabel?siteUrl+"/feeds/posts/summary/-/"+labelSorter+"?start-index="+s:siteUrl+"/feeds/posts/summary?start-index="+s;1==firstpage&&(document.documentElement.scrollTop=_results.offsetTop-30,document.body.scrollTop=_results.offsetTop-30,(t=document.getElementById("TEMPORAL")).parentNode.removeChild(t)),_results.innerHTML='<div id="loadingscript"><span class="loading-Text">'+loadingText+"</span></div>",_pagination.innerHTML="",_totalposts.innerHTML="",(e=document.createElement("script")).type="text/javascript",e.src=r+"&max-results="+postPerPage+"&orderby=published&alt=json-in-script&callback=showPagePosts",e.id="TEMPORAL",i.appendChild(e),firstpage=1,actualpage=a}window.onload=function(){_init_script(1)};
</script>
شرح الكود
المحدد بهذا اللون siteUrl يقوم بجلب عنوان URL الخاص بمدونتك تلقائيا.
المحدد بهذا اللون rtl خاص بالمدونة في العرض العربي إذا كانت مدونتك أجنبية ضع القيمة false.
المحدد بهذا اللون Themes خاص باللون الرئيسي للأداة عندنا ثلاث ألون متدرجة وهي كالآتي
لتطبيق اللون البرتقالي نضع القيمة gradient-orange.
لتطبيق اللون الأزرق نضع القيمة gradient-blue.
لتطبيق اللون الأحمر نضع القيمة gradient-red.
لتطبيق اللون البرتقالي نضع القيمة gradient-orange.
لتطبيق اللون الأزرق نضع القيمة gradient-blue.
لتطبيق اللون الأحمر نضع القيمة gradient-red.
المحدد بهذا اللون montharabic خاص بأسماء الأشهر في العرض العربي إذا كانت مدونتك أجنبية ضع القيمةfalse ليتم عرضها تلقائيا بالإنجلزية.
المحدد بهذا اللون showPostDate غيّر القيمة إلى false إذا كنت لا تريد عرض الشهر المنشور للمقالة.
المحدد بهذا اللون showComments غيّر القيمة إلى false إذا كنت لا تريد عرض عدد التعليقات في المقالة.
المحدد بهذا اللون sortByLabel تستخدم لتصفية المقالات / المشاركات. إذا كنت ترغب في عرض المشاركات بفئات معينة فقط ، فاختر قيمة true بعد ذلك ، حدد اسم العلامة على المتغير labelSorter.
المحدد بهذا اللون labelSorter حدد اسم التسمية مثلا برامج/إضافات/.. ويجب أن تجعل الخيار sortByLabel محدد true.
المحدد بهذا اللون النصوص خاصة بنصوص الملاحة وما إلى ذلك تستطيع تغييرها بما يناسبك.
المحدد بهذا اللون postPerPage خاص بعدد المواضيع المراد عرضها على صفحة واحدة..إذا أردت غير الرقم 5 الذي يعني خمس مواضيع في كل صفحة.
المحدد بهذا اللون numChars خاص بعدد الأحرف الموجزة في التلخيص للتدوينة..إذا أردت غير الرقم 300 الذي يعني عدد الأحرف.
المحدد بهذا اللون imgBlank خاص بصورة احتياطية إذا كان المنشور الذي يظهر ليس به صورة..طبعا تستطيع تغيير رابط الصورة إلى صورة من رفعك.
تعليقات
إرسال تعليق