فهرس المواضيع بصفحة ثابتة


السلام عليكم
ورحمة الله
وبركاته

تدوينتنا اليوم عبارة عن
فهرس بالصفحات الثابتة يقوم بعرض المواضيع
مرتبة من الألف الى الياء




طريقة التركيب
  1. قم بانشاء صفحة جديدة
  2. انتقل الى تبويب html وضع الاكواد التالية
  • <!--DOCTYPE html-->
  • <html lang="en" >
  • <head>
  • <meta charset="UTF-8">
  • <title>فهرس المدونة</title>
  • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  • <style>
  • @import url('https://fonts.googleapis.com/css?family=Cairo&display=swap');
  • a,a:link,a:visited {color:#ffa502;text-decoration:none;transition:all .3s}
  • a:hover,a:hover:visited {color:#ea9906}
  • *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
  • body {
  •   background: #f5f5f5;
  •   font-family: "Cairo", sans-serif;
  •   margin: 0;
  •   padding: 0;
  •   position: relative;
  •   line-height: normal;
  •   direction:rtl;
  • }

  • .container {
  •   max-width: 768px;
  •   margin: 4% auto;
  •   padding: 40px;
  •   background: #fff;
  •   color: #666;
  •   font-size: 16px;
  •   line-height: 1.6;
  •   border-radius: 10px;
  •   box-shadow: 0 3px 20px rgba(0, 0, 0, 0.03);
  • }

  • .container h1,
  • .container h2 {
  •   display: block;
  •   margin-bottom: 40px;
  •   font-size: 2rem;
  •   font-weight: 700;
  •   color: #000;
  • }

  • .container h2 {
  •   margin-top: 30px;
  • }
  • .timeline-sitemap{position:relative;margin:30px auto}
  • .timeline-toc-wrap{display:inline-block;width:100%}
  • .timeline-toc-wrap .timeline-cat{background:#fff;border-radius:2px;color:#333;font-size:15px;font-weight:700;padding:10px 20px;border:4px solid #333;text-transform:capitalize}
  • .timeline-toc::before{background:#333;bottom:0;content:'';left:20%;margin-left:-10px;position:absolute;top:0;width:4px}
  • .timeline-toc{margin:0;padding:30px 20px;position:relative}
  • .timeline-sitemap ul.timeline-toc{margin:0;padding:30px 0;list-style-type:none}
  • .timeline-toc li{list-style:none;margin:0;padding:0;position:relative}
  • .timeline-toc > li .toc-date{    left: 0;color:#999;display:block;font-size:14px;font-weight:bold;position:absolute;text-transform:uppercase;top:25px;width:15%}
  • .timeline-toc > li .timeline-icon{background:#fff;border-radius:50%;box-shadow:0 0 0 4px #333;color:#fff;font-size:1.4em;font-style:normal;font-variant:normal;font-weight:normal;height:10px;left:21.8%;line-height:10px;margin:0 0 0 -25px;position:absolute;text-align:center;text-transform:none;top:30px;width:10px}
  • .timeline-toc > li .timeline-post::after{border-color:transparent #f5f5f5 transparent transparent;border-style:solid;border-width:10px;content:'';height:0;pointer-events:none;position:absolute;right:100%;top:auto;width:0}
  • .timeline-toc > li .timeline-post{background:#f5f5f5;border-radius:5px;display:block;font-size:15px;margin:0 0 15px 23%;padding:25px 30px;position:relative}
  • .timeline-toc > li .timeline-post a{color:#333;font-weight:700}
  • .timeline-toc > li:last-child .timeline-post{margin:0 0 0 23%}
  • .timeline-toc > li .timeline-post a:hover{color:#999}
  • </style>
  • </head>
  • <body>
  • <div class="container">
  • <h1>فهرس المدونة</h1>
  • <div class="post-body">[sitemap]</div>
  • </div>
  • <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'>
  • </script>
  • <script>
  • //<![CDATA[
  • $(document).ready(function(){var static_page_text=$.trim($(".post-body").text());var text_month=[,"يناير","فبراير","مارس","أبريل","ماي","يونيو","يوليوز","غشت","شتنبر","أكتوبر","نونبر","دجنبر"];if(static_page_text==="[sitemap]"){var postbody=$(".post-body");$.ajax({url:"https://www.isweeb.com/feeds/posts/default?alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var t=[];for(var n=0;n<e.feed.category.length;n++){t.push(e.feed.category[n].term)}var t=t.join("/");postbody.html('<div class="timeline-sitemap"></div>');$(".post-body .timeline-sitemap").text(t);var r=$(".timeline-sitemap").text().split("/");var i="";for(get=0;get<r.length;++get){i+="<span>"+r[get]+"</span>"}$(".timeline-sitemap").html(i);$(".timeline-sitemap span").each(function(){var e=$(this);var t=$(this).text();$.ajax({url:"https://www.isweeb.com/feeds/posts/default/-/"+t+"?alt=json-in-script",type:"get",dataType:"jsonp",success:function(n){var r="";var i='<ul class="timeline-toc">';for(var s=0;s<n.feed.entry.length;s++){for(var o=0;o<n.feed.entry[s].link.length;o++){if(n.feed.entry[s].link[o].rel=="alternate"){r=n.feed.entry[s].link[o].href;break}}var u=n.feed.entry[s].title.$t;var a=n.feed.entry[s].published.$t,f=a.substring(0,4),l=a.substring(5,7),c=a.substring(8,10),h='<span class="day">'+c.replace(/^0+/,"")+'</span><span class="month">'+text_month[parseInt(l,10)]+' </span><span class="year">'+f+"</span>";i+='<li><div class="toc-date">'+h+'</div><div class="timeline-icon"></div><span class="timeline-post"><a href="'+r+'">'+u+"</a></span></li>"}i+="</ul>";e.replaceWith('<div class="timeline-toc-wrap"><div class="timeline-cat">'+t+'</div>'+i+"</div>")}})})}})}});
  • //]]>
  • </script>
  • </body>
  • </html>
غير الروابط باللون الأحمر برابط مدونتك

هناك 5 تعليقات


EmoticonEmoticon