10/09/2018

settings_overscan print announcement
أداة خريطة الموقع أو فهرس المحتويات للمدونة مع ترقيم الصفحات Blogger Archive with Pagination سكريبت أصلي وعتيق أضعه لكم مجانا وبإصداره الجديد مع طريقة عرض دينامكية بحيث يمكن تخصيص الألوان وإتجاه اللغة عربي أو أجنبي كما يمكن جعل الأداة تعرض قسم معين بدلا من عرض كامل للمنشورات .
والميزة الأهم في الإضافة هي طريقة العرض السهلة وذلك عن طريق التنقل الرقمي دون إعادة تحميل الصفحة كاملة.
كما أحيطك علما أنه يمكنك تحميل الأكواد الخاصة بهذه الأداة كنسخة إحتياطية على جهازك ستجد الأكواد بدون ضغط أو تشفير ليسهل قرائتها أو التعديل فيها.





قبل أن نشرع في الموضوع قم بماعينة طريقة عرض وعمل الإضافة



طريقة تركيب الأداة

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى الصفحات >> ثم قم بإنشاء صفحة جديدة بعنوان مثلا  Archive  
  • إنتقل من وضع   التأليف إلى HTML ثم إمسح الأكواد الموجودة داخل المحرر
  • قم الآن بنسخ الأكواد التالية وضعها داخل حقل المحرر

<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://3.bp.blogspot.com/-7CnHTs2OKS8/Wo214lKp0KI/AAAAAAAACPk/CD1mAZz7IwI32hkGM3aVbD6Tefw78IkvgCLcBGAs/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.
الكود المحدد بهذا اللون montharabic خاص بأسماء الأشهر في العرض العربي إذا كانت مدونتك أجنبية ضع القيمةfalse ليتم عرضها تلقائيا بالإنجلزية.
الكود المحدد بهذا اللون showPostDate غيّر القيمة إلى false إذا كنت لا تريد عرض الشهر المنشور للمقالة.
الكود المحدد بهذا اللون showComments غيّر القيمة إلى false إذا كنت لا تريد عرض عدد التعليقات في المقالة.
الكود المحدد بهذا اللون sortByLabel تستخدم لتصفية المقالات / المشاركات. إذا كنت ترغب في عرض المشاركات بفئات معينة فقط ، فاختر قيمة true بعد ذلك ، حدد اسم العلامة على المتغير labelSorter.
الكود المحدد بهذا اللون labelSorter حدد اسم التسمية إذا كان الخيار sortByLabel يستحق true.
الأكواد المحددة بهذا اللون النصوص خاصة بنصوص الملاحة وما إلى ذلك تستطيع تغييرها بما يناسبك.
الكود المحدد بهذا اللون postPerPage خاص بعدد المواضيع المراد عرضها على صفحة واحدة..إذا أردت غير الرقم 5 الذي يعني خمس مواضيع في كل صفحة.
الكود المحدد بهذا اللون numChars خاص بعدد الأحرف الموجزة في التلخيص للتدوينة..إذا أردت غير الرقم 300 الذي يعني عدد الأحرف.
الكود المحدد بهذا اللون imgBlank خاص بصورة احتياطية إذا  كان المنشور الذي يظهر ليس به صورة..طبعا تستطيع تغيير رابط الصورة إلى صورة من رفعك.

add_commentإرسال تعليق

إرسال تعليق