الدرس 165: طريقة انشاء صفحة فهرس مدونة بلوجر احترافي جدا

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

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

مميزات صفحة الفهرس لمدونة بلوجر

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

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

لتحميل الاكواد من هنا : sitemap page blogger

لنسخ الاكواد :

<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>

ان اعجبك الدرس شاركه مع اصدقائك 

تعديل المقال