الرئيسية بلوجر فهرس متطور و أنيق لمواضيع مدونتك

فهرس متطور و أنيق لمواضيع مدونتك

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

و الفهرس من الصفحات الأساسية التي لابد منها لكل موقع أو مدونة كما تحدثنا في تدوينة سابقة بعنوان : إنشاء صفحات أساسية لابد منها
لمدونتك الربحية.

و سنتحدث اليوم بإذن الله عن كيفية إضافة فهرس لمدونتك. هذه الإضافة مستمدة من مدونة أجنبية اسمها : Beautiful Beta
سنقدمها لكم اليوم بإذن الله معربة و مطورة مع بيان إمكانية تعديلاتك على ألوانها كيفما يوافق موقعك أو مدونتك.

نستعين بالله أولا قبل كل شئ.

1- ادخل على لوحة تحكم بلوجر الخاصة بمدونتك.

2- ادخل على " الصفحات " ثم " صفحة جديدة ".

3- قم بتحويل طريقة الكتابة من " تأليف " إلى " HTML ".

4- قم بإضافة الكود التالي بعد حذف أي شئ موجود داخل مربع كتابة الرسائل ثم قم بالحفظ.

 
 <div id="bp_toc">
<script src="https://rawgit.com/Abu-Omar/profit-tech/master/profit-tech-site-map.js" type="text/javascript"></script>
<script src="Your-blog-name.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=999&callback=loadtoc" type="text/javascript"></script>
<style>
    #bp_toc {
      font-family: Droid Arabic Kufi;
      font-size: 14px;
      margin-bottom: 10px;
      margin-top: 28px;
      text-align: right;
      width: 100%;
    }
    #bp_toc a {text-decoration: none;}
    .toc-note {
        background: #CDCDCD ;
        border: 2px solid #ADADAD;
 color: #000;
        padding: 5px 10px;
        position: relative;
        right: 2px;
        top: -13px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        font-weight: bold;
    }
    .toc-header-col1, .toc-header-col2, .toc-header-col3 {
 background: #CDCDCD;
        border: 1px solid #ADADAD;
        color: #000;
        padding: 10px;
        font-size: 14px;
        font-weight: bold;
        border-radius: 10px; }
    /*عناوين المواضيع */
    .toc-header-col1 { width:52%;}
    .toc-entry-col1 {
        background: #F6F6F6;
        text-align: right;
        border: 1px solid #CDCDCD;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        padding-right: 8px;
 transition: all 1s ease-out 0s;
    }
    .toc-entry-col1:hover {
        background: #E3DAFC;
        border-color: #A7A8A8;
        transition: all 1s ease-out 0s; }
    /*التاريخ*/
    .toc-header-col2 {width: 16%;text-align: center; }
    .toc-entry-col2 {
        background: #000;
        border: 1px solid #CDCDCD;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        color: #fff;
        text-align: center;
 transition: all 1s ease-out 0s;
    }
    .toc-entry-col2:hover {
        background: #fff;
        border-color: #CDCDCD;
 color: #000;
        transition: all 1s ease-out 0s; }
    /*الأقسام*/
    .toc-header-col3 {width:32%;}
    .toc-entry-col3 {
        background: #960776;
        border: 1px solid #CDCDCD;
        text-align: right;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        color: #fff;
        padding-right: 8px;
 transition: all 1s ease-out 0s;
    }
    .toc-entry-col3 a {
 transition: all 1s ease-out 0s;
 color: #fff; }
    .toc-entry-col3 a:hover {
 color: #ffd600;
        transition: all 1s ease-out 0s;
    }
    .toc-entry-col3:hover {
        background: #3D5288;
        border-color: #A7A8A8;
        transition: all 1s ease-out 0s; }
</style>
</div>

مع مراعاة التالي :

قم باستبدال " your-blog-name " باسم مدونتك.
" font-family:Droid Arabic Kufi; " : هو كود نوع الخط. قم بتغييره بما يناسبك.
" font-size: 14px; " : هو حجم الخط. قم بتغييره بما يناسبك.
" #CDCDCD " : هو لون خلفية " عدد المواضيع " و " عنوان الموضوع " و " تاريخ الموضوع " و " أقسام المواضيع ".
" #ADADAD " : هو لون إطار " عدد المواضيع " و " عنوان الموضوع " و " تاريخ الموضوع " و " أقسام المواضيع ".
" #000 " : هو لون خط " عدد المواضيع " و " عنوان الموضوع " و " تاريخ الموضوع " و " أقسام المواضيع ".

بالنسبة لـ " عناوين المواضيع " :

" 52% " : هو عرض جزء " عناوين المواضيع " بالنسبة لعرض الفهرس. قم بتغييره بما يناسبك مع مراعاة أن مجموع عرض " عنوان الموضوع " و " تاريخ الموضوع " و " أقسام المواضيع " يساوي 100%.
" #F6F6F6 " : هو لون خلفية العناوين.
" #CDCDCD " : هو لون إطار العناوين.
" #E3DAFC " : هو لون خلفية العناوين عند الإشارة بالماوس.
" #A7A8A8 " : هو لون إطار العناوين عند الإشارة بالماوس.

بالنسبة لـ " تاريخ المواضيع " :

" 16% " : هو عرض جزء " تاريخ المواضيع " بالنسبة لعرض الفهرس. قم بتغييره بما يناسبك مع مراعاة أن مجموع عرض " عنوان الموضوع " و " تاريخ الموضوع " و " أقسام المواضيع " يساوي 100%.
" #000 " : هو لون خلفية تاريخ المواضيع.
" #CDCDCD " : هو لون إطار تاريخ المواضيع.
" #FFF " : هو لون الخط لتاريخ المواضيع.
" #FFF " : هو لون خلفية التاريخ عند الإشارة بالماوس.
" #CDCDCD " : هو لون إطار التاريخ عند الإشارة بالماوس.
" #000 " : هو لون الخط لتاريخ المواضيع عند الإشارة بالماوس.

بالنسبة لـ " أقسام المواضيع " :

" 32% " : هو عرض جزء " أقسام المواضيع " بالنسبة لعرض الفهرس. قم بتغييره بما يناسبك مع مراعاة أن مجموع عرض " عنوان الموضوع " و " تاريخ الموضوع " و " أقسام المواضيع " يساوي 100%.
" #960776 " : هو لون خلفية الأقسام.
" #CDCDCD " : هو لون إطار الأقسام.
" #FFF " : هو لون الخط للأقسام.
" #FFD600 " : هو لون الخط للأقسام عند الإشارة بالماوس.
" #3d5288" : هو لون خلفية الأقسام عند الإشارة بالماوس.
" #A7A8A8 " : هو لون إطار الأقسام عند الإشارة بالماوس.

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

الوسوم: بلوجر

الكاتب

مدونة ابو جبه

فهرس متطور و أنيق لمواضيع مدونتك

بالنسبة لـ " عناوين المواضيع " :

بالنسبة لـ " تاريخ المواضيع " :

بالنسبة لـ " أقسام المواضيع " :

Mahmoud

ليست هناك تعليقات:

إرسال تعليق

المشاركات الشائعة

مشاركة مميزة

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

من أنا

مواقيت الصلاة

التعليقات

نموذج الاتصال

إجمالي مرات مشاهدة الصفحة

تسجيل الدخول

الكاتب

مدونة ابو جبه

إعلان في أعلي التدوينة

فهرس متطور و أنيق لمواضيع مدونتك

بالنسبة لـ " عناوين المواضيع " :

بالنسبة لـ " تاريخ المواضيع " :

بالنسبة لـ " أقسام المواضيع " :

مقالات ذات صلة

Mahmoud

التالي

رسالة أحدث

السابق

رسالة أقدم

ليست هناك تعليقات:

إرسال تعليق

إعلان في أسفل التدوينة

عداد مواقع التواصل الإجتماعي

المشاركات الشائعة

مشاركة مميزة

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

من أنا

مواقيت الصلاة

التعليقات

نموذج الاتصال

إجمالي مرات مشاهدة الصفحة