اضافة فهرس جذاب لموقعك (responsive) - الاحتراف الجزائري

اضافة فهرس جذاب لموقعك (responsive)

اضافة فهرس جذاب لموقعك (responsive) كيفية انشاء فهرس جميل واحترافي لمدونتك (ARCHIVE) على بلوجر خصوصا اذا كنت تكتب كثيرا ومدونتك بها المئات من التدوينات وتريد إضافة فهرس للمدونه بشكل جذاب ومميزات رهيبه . اضافة فهرس جذاب لموقعك html من أهم الإضافات التى يجب تواجدها على موقعك أو مدونتك حتى يتسنى للزائر الوصول إلى جميع الموضوعات بـ سرعه ودون أى عناء، وفى هذا الموضوع أعرض عليكم كود الإضافه بـ شكل جميل وجذاب وبـ ميزات الفلتره حسب ترتيب المقالات تصاعديا وتنازليا للتسهيل على زوار مدونتك التصفح بين مواضيع والمقالات الموجوده على المدونة.
شارك :
اضافة فهرس جذاب لموقعك ,sitemap,

اضافة فهرس جذاب لموقعك  (responsive)


كيفية انشاء فهرس جميل واحترافي لمدونتك (ARCHIVE) على بلوجر خصوصا اذا كنت تكتب كثيرا ومدونتك بها المئات من التدوينات وتريد إضافة فهرس للمدونه بشكل جذاب ومميزات رهيبه .

اضافة فهرس جذاب لموقعك html من أهم الإضافات التى يجب تواجدها على موقعك أو مدونتك حتى يتسنى للزائر الوصول إلى جميع الموضوعات بـ سرعه ودون أى عناء، وفى هذا الموضوع  أعرض عليكم كود الإضافه بـ شكل جميل وجذاب وبـ ميزات الفلتره حسب ترتيب المقالات تصاعديا وتنازليا للتسهيل على زوار مدونتك التصفح بين مواضيع والمقالات الموجوده على المدونة. 

1. اذهب الى مدونتك وقم بانشاء صفحة جديده باسم " ARCHIVE" واضف داخلها الكود التالي :


<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;"> 
</div>
 <script src="https://cdn.rawgit.com/assadalqaisi/qaisi1web/master/qaisi-sitemap.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script> 
 <style scoped="" type="text/css"> 
#comments {display:none;}
 /* CSS Full Sitemap qaisi1web*/ 
#bp_toc {background:#75CC8E<;color:#fff;margin:0 auto;padding:5px;} 
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fff;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#ccc;width:250px;}
.toc-header-col2 {padding:10px;background-color:#ccc;width:75px;} 
.toc-header-col3 {padding:10px;background-color:#ccc;width:125px;} 
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px; text-decoration:none;color:#fff;font-family:'Noto Sans Kufi Arabic', sans-serif!important;font-weight:700;letter-spacing: 0.5px;}
 .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { text-decoration:none;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%} 
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;} 
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;} #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;} .toc-entry-col1 {counter-increment:rowNumber;} #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;} td.toc-entry-col2 {background:#fafafa;} </style>


2. قم بحفظ الصفحة ومبروك عليك الاضافة المجانية .

ملاحظة : الكود بالون الاحمر هو خلفية الصفحة يمكنك تغييره .


شارك :

Design

ما رأيك بالموضوع !

0 تعليق:

ان مدونة الاحتراف الجزائري تحتفظ بحقها في نشر او عدم نشر اي تعليق لا يستوفي شروط النشر ونشير الى ان كل ما يندرج ضمن تعليقات القرّاء لا يعبّر بأي شكل من الأشكال عن آراء الموقع وهي تلزم بمضمون كاتبها حصرياً.
يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى

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

صفحة >>> سياسة الخصوصية Privacy Policy

اي مشكلة >>> contact اتصل بنا
خريطة الموقع >>> site map
جميع الكورسات >>> all course

لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"