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

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

و درسنا اليوم بإذن الله يتحدث عن هذا الموضوع.

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

هيا بنا إلى التطبيق العملي :

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&amp;max-results=999&amp;callback=loadtoc" type="text/javascript"></script>

<style>

 #bp_toc {

 font-family: Droid Arabic Kufi;

 font-size: 14px;

 margin-bottom: 10px;

 margin-top: 28px;

 width: 100%;

 text-align: right;
}

 .toc-note {
#bp_toc a {text-decoration: none;}

 background: #CDCDCD ;

 border: 2px solid #ADADAD;

color: #000;

 padding: 5px 10px;

 position: relative;
right: 2px;

 border-radius: 8px;
top: -13px;

 -webkit-border-radius: 8px;
-moz-border-radius: 8px;

 .toc-header-col1, .toc-header-col2, .toc-header-col3 {
font-weight: bold;
 }

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;

transition: all 1s ease-out 0s;
padding-right: 8px;
 }

 background: #E3DAFC;
.toc-entry-col1:hover {


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 {

color: #fff; }
transition: all 1s ease-out 0s;

color: #ffd600;
.toc-entry-col3 a:hover {


transition: all 1s ease-out 0s;

 background: #3D5288;
}
 .toc-entry-col3:hover {


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 " : هو لون إطار الأقسام عند الإشارة بالماوس.

شارك

Tweet

المزيد

مواضيع ذات صلة