انشاء صفحة فهرس خريطة مدونة بلوجر بشكل احترافي و رائع

انشاء صفحة فهرس خريطة مدونة بلوجر بشكل احترافي و رائع

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

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

الاكواد المستخدمة :

الاكواد من هنا: sitemap ----------------------- <div dir="rtl" style="text-align: right;" trbidi="on"> <style scoped="" type="text/css"> .post{margin:0}#comments{display:none}.toggle-comments{display:none!important}#table-outer{padding:7px 10px;margin:0 auto}#table-outer table{width:auto;margin:0 auto}#table-outer form{font:inherit}#table-outer label{margin:0 10px 0 0;padding:4px 0 0;display:block;text-align:right}#table-outer select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#table-outer input,#table-outer select{font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;border:1px solid #dedede;border-radius:5px;margin:0 0 5px;padding:5px}#table-outer select option{min-height:1.4em!important}#table-outer input#feed-q{padding:5px 10px!important}#feed-container{overflow:hidden;position:relative;border-top:none;display:block;clear:both;margin:0 -10px 0 0;padding:0;list-style:none}#feed-container li{list-style:none;margin:0 0 10px;padding:0 10px 0 0;color:#555;width:33.33333%;text-align:center;float:left;display:inline;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#feed-container li .inner{position:relative;overflow:hidden;word-wrap:break-word;border-radius:3px;background:#fff;color:#333;border:1px solid #dedede;margin:0;padding:30px;height:200px;line-height:1.2em}#feed-container li a{color:#333;font-weight:500}#feed-container li a.toc-read{text-decoration:none;color:#fff;margin-top:30px}#feed-container li .inner:hover a.toc-read{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}#feed-container li .news-text{font-size:14px;margin-top:10px}#feed-container li .news-text div{display:none!important}#feed-container li img{margin:0;padding:0;width:100%!important;height:100%!important;position:absolute;top:0;left:0}#feed-container li .inner:hover img{transition:all 1s ease-in-out;-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;left:-500px;animation-fill-mode:both}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}#result-desc{margin:0;padding:0}#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#result-desc div{color:inherit}#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}#feed-nav span{cursor:wait}@media screen and (max-width:1024px){#main-wrapper{padding:0 30px!important}#feed-container{display:block;clear:both;margin:0 -30px 0 0}#feed-container li{list-style:none;margin:0 0 30px;padding:0 30px 0 0}#feed-container li .inner{padding:20px}}@media screen and (max-width:960px){#main-wrapper{padding:0 20px!important}#feed-container{display:block;clear:both;margin:0 -20px 0 0}#feed-container li{list-style:none;margin:0 0 20px;padding:0 20px 0 0}#feed-container li .inner{padding:20px}}@media screen and (max-width:800px){#feed-container li{width:50%}}@media screen and (max-width:640px){#feed-container li .inner{height:150px}}@media screen and (max-width:414px){#table-outer table,#feed-container li{width:100%}#table-outer table,#table-outer label{text-align:center}#table-outer table td{display:block;margin:0 auto 5px;clear:both;float:none}#table-outer label{margin:0}#table-outer{padding:0}}@media (max-width:414px){#table-outer table td{text-align:center;display:block}#table-outer label{text-align:center;display:block;margin:0;padding:4px 0 0}#table-outer input,#table-outer select{margin:0 0 10px}}a.btn-default{color:#333}#feed-nav a,a.btn-primary,a.btn-success,a.btn-info,a.btn-warning,a.btn-danger{color:#fff}#feed-nav a,#feed-nav a:active,.btn,.btn:active{background-image:none}#feed-nav a,.parser,.btn,.btn-link{font-weight:400}#feed-nav a,.comment_form>a,.comments .paging-control-container .paging-control,.parser,.btn{border:1px solid transparent;border-radius:4px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:manipulation;cursor:pointer;user-select:none;display:inline-block;padding:6px 12px}#feed-nav a:active:focus,#feed-nav a:focus,.comment_form>a:active:focus,.comment_form>a:focus,.comments .paging-control-container .paging-control:active:focus,.comments .paging-control-container .paging-control:focus,.parser:active:focus,.parser:focus,.btn:active:focus,.btn:focus{outline:0}#feed-nav a:focus,#feed-nav a:hover,#feed-nav a:hover,.btn:focus,.btn:hover{text-decoration:none;color:#333;outline:0}#feed-nav a:active,.btn:active{outline:0;box-shadow:inset 0 3px 5px rgba(0,0,0,.125);-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-default{background:#fff;color:#333;border-color:#ccc}.btn-default:focus{background:#e6e6e6;color:#333;border-color:#8c8c8c}.btn-default:active,.btn-default:hover{background:#e6e6e6;color:#333;border-color:#adadad}#feed-nav a,.btn-primary,.comments .paging-control-container .paging-control,.parser{background:#337ab7;color:#fff;border-color:#2e6da4}#feed-nav a:focus,.comments .paging-control-container .paging-control:focus,.button-group button:disabled,.parser:focus,.btn-primary:focus{background:#286090;color:#fff;border-color:#122b40}#feed-nav a:active,#feed-nav a:hover,.comments .paging-control-container .paging-control:hover,.comments .paging-control-container .paging-control:active,.parser:active,.parser:hover,.btn-primary:active,.btn-primary:hover{background:#286090;color:#fff;border-color:#204d74}.btn-success{background:#5cb85c;color:#fff;border-color:#4cae4c}.btn-success:focus{background:#449d44;color:#fff;border-color:#255625}.btn-success:active,.btn-success:hover{background:#449d44;color:#fff;border-color:#398439}.btn-info{background:#5bc0de;color:#fff;border-color:#46b8da}.btn-info:focus{background:#31b0d5;color:#fff;border-color:#1b6d85}.btn-info:active,.btn-info:hover{background:#31b0d5;color:#fff;border-color:#269abc}.comment_form>a,.btn-warning{background:#f0ad4e;color:#fff;border-color:#eea236}.comment_form>a:focus,.btn-warning:focus{background:#ec971f;color:#fff;border-color:#985f0d}.comment_form>a:active,.comment_form>a:hover,.btn-warning:active,.btn-warning:hover{background:#ec971f;color:#fff;border-color:#d58512}.btn-danger{background:#d9534f;color:#fff;border-color:#d43f3a}.btn-danger:focus{color:#fff;border-color:#761c19;background:#c9302c}.btn-danger:active,.btn-danger:hover{color:#fff;border-color:#ac2925;background:#c9302c}.btn-link{border-radius:0;color:#337ab7}.btn-link,.btn-link:active{box-shadow:none;background:transparent;-webkit-box-shadow:none}.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color:transparent}.btn-link:focus,.btn-link:hover{text-decoration:underline;color:#23527c;background:transparent}#feed-nav a,.comment_form>a,.btn-lg{font-size:18px;padding:10px 16px;border-radius:6px;line-height:1.3333333}.parser,.btn-sm,.btn-xs{border-radius:3px;font-size:12px;line-height:1.5}.btn-sm{padding:5px 10px}.comments .paging-control-container .paging-control,.parser,.btn-xs{padding:1px 5px}#feed-nav a,.comment_form>a,.btn-block{display:block;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;width:100%;box-sizing:border-box}.btn-block+.btn-block{margin-top:5px}.comment_form>a+a{border-color:#fff;padding:0;margin-bottom:0;background:#fff} </style> <br /> <div id="table-outer"> <table> <tbody> <tr> <td><label for="feed-order"> تصنيف المنشورات : </label> </td> <td><select id="feed-order"> <option selected="" value="published">المشاركات الأخيرة</option> <option value="updated">الوظائف التي تم تحديثها مؤخرا</option> </select> </td> </tr> <tr>a <td><label for="label-sorter">تصنيف الأقسام : </label> </td> <td><select disabled="" id="label-sorter"> <option selected="">الأقسام . . . .</option> </select> </td> </tr> <tr> <td><label for="feed-q">البحث عن مقالات بحسب الكلمة الرئيسية : </label> </td> <td><form id="post-searcher"> <input id="feed-q" placeholder="ابحث هنا . . ." type="text" /> </form> </td> </tr> </tbody> </table> </div> <br /> <br /> <header id="result-desc"></header> <br /> <ul id="feed-container"></ul> <div id="feed-nav"> </div> <script src="https://raw.githack.com/didorahim/arabes1/master/new.index.js"></script> <a href="https://www.arabes1.com/2019/04/create-sitemap-page-for-blogger.html" rel="nofollow" target="_blank"><span style="color: #999999;"><span style="font-size: xx-small;">get this widget</span></span></a>  </div>

الشرح الفيديو :