اضافة صفحة الفهرس لمدونات بلوجر النسخة الاولى

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي

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

يمكنكم معاينة الاضافة من هنا

الان ننتقل لشرح اضافة الاضافة

اولا نبحث على </head> ونضع الكود التالي فوقه مباشرة

<b:if cond='data:view.isPage'>
<style type='text/css'>
/*<![CDATA[*/
/* Sitemap */
.abdoutech-sitemap{position:relative;margin:30px auto}.abdoutech-toc-wrap{display:inline-block;width:100%}.abdoutech-toc-wrap .abdoutech-cat{background:#2e3543;border-radius:2px;color:#fff;font-size:16px;font-weight:500;padding:10px 20px;border-radius:3px;text-transform:capitalize}.abdoutech-toc::before{background:#2e3543;bottom:0;content:"";right:19.9%;margin-right:-10px;position:absolute;top:0;width:4px}.abdoutech-toc{margin:0;padding:30px 20px;position:relative}.abdoutech-sitemap ul.abdoutech-toc{margin:0;padding:30px 0;list-style-type:none}.abdoutech-toc li{list-style:none;margin:0;padding:0;position:relative;list-style-type: none!important;}.abdoutech-toc >li .toc-date{color:#999;display:block;font-size:14px;font-weight:500;position:absolute;text-transform:uppercase;top:25px;width:15%}.abdoutech-toc >li .abdoutech-icon{background:#fff;border-radius:50%;box-shadow:0 0 0 4px #2e3543;color:#fff;font-size:1.4em;font-style:normal;font-variant:normal;font-weight:normal;height:10px;right:21.2%;line-height:10px;margin:0 -25px 0 0;position:absolute;text-align:center;text-transform:none;top:30px;width:10px}.abdoutech-toc >li .abdoutech-post::after{border-color:transparent transparent transparent #f5f5f5;border-style:solid;border-width:10px;content:"";height:0;pointer-events:none;position:absolute;left:100%;top:auto;width:0}.abdoutech-toc >li .abdoutech-post{background:#f5f5f5;border-radius:5px;display:block;font-size:15px;margin:0 23% 15px 0;padding:25px 30px;position:relative}.abdoutech-toc >li .abdoutech-post a{text-decoration: none!important;color:#2e3543;font-weight:500}.abdoutech-toc >li:last-child .abdoutech-post{margin:0 23% 0 0}.abdoutech-toc >li .abdoutech-post a:hover{color:#999}
@media (max-width:768px){.abdoutech-toc > li .abdoutech-icon{display:none}}
/*]]>*/
</style>
</b:if>

الان ضع الكود هذا فوق ال </body> مباشرة

الان احفظ القالب واذهب الى صفحات و افتح صفحة وضع فيها هذا الكود الصغير

[sitemap]

و انشر الصفحة ومبروك عليك الاضافة

اذا اعجبك شرح لاتنسى الاشتراك في المدونة لكي تتوصل بكل جديد

سكربتات التي تقدم من طرف المدونة اغلبها تكون مشفرة لحماية حقوق المدونة لذا من يريد استعمال الاكواد يستعمل الحرية لك اخي الكريم وبدون قذف او كلام خارج عن الموضوع