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

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

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

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

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

اولا نبحث على </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>