طريقة اضافة فهرس لمدونة بلوجر

سلام عليكم اخواني

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

طريقة اضافة الفهرس :

• قم بالدخول الى لوحة التحكم الخاصة بمدونتك »»» نقوم بانشاء صفحة جديدة او مشاركة جديدة.
• تم اضغط على html  الموجودة اعلى الصفحة من الجهة اليمنى.

•  قم بلصق الكود التالي في تدوينة التي انشئتها.

الكود :

<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="bp_toc">
<script src="https://cnmu.googlecode.com/svn/trunk/cnmu-index-map.js" type="text/javascript"></script>
<script src="http://sofaxe.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"> </script>
<style>
#bp_toc {
  font-family: arial;
  font-size: 14px;
  margin-bottom: 10px;
  margin-top: 28px;
  text-align: right;
  width: 100%;
}
#bp_toc a {text-decoration: none;}
.toc-note {
    background: #ddd ;
    border: 2px solid #BBB;
    padding: 5px 10px;
    position: relative;
    right: 2px;
    top: -13px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    font-weight: bold;
    text-shadow: 4px 4px 4px #515151; }

.toc-header-col1, .toc-header-col2, .toc-header-col3 {
    background: #ddd;
    border: 1px solid #BBB;
    color: #000;
    padding: 2px 5px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 10px; }

/*عناوين المواضيع */
.toc-header-col1 { width:58%;}
.toc-entry-col1 {
    background: #F6F6F6;
    border: 1px solid #ddd;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    padding-right: 8px; }

.toc-entry-col1:hover {
    background: #FDE3E6;
    border-color: #8A8B8B;
    transition: all 1s ease-out 0s; }
/*التاريخ*/
.toc-header-col2 {width: 11%;text-align: center; }
.toc-entry-col2 {
    background: #000;
    border: 1px solid #ddd;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    color: #fff;
    text-align: center; }
/*الأقسام*/
.toc-header-col3 {width:31%;}
.toc-entry-col3 {
    background: #9C0022;
    border: 1px solid #ddd;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    color: #fff;
    padding-right: 8px; }

.toc-entry-col3 a { color: #fff; }

.toc-entry-col3:hover {
    background: #3D5288;
    border-color: #8A8B8B;
    transition: all 1s ease-out 0s; }
 </style>
</div>


</div
>

                             ملحوظة :

قم بتغير رابط مدونتي ملون باحمر برابط مدونتك.

...............................................................................................................

اذا كان لديك اي مشكل او اي استفسار حول الموضوع ,المرجوا كتابة سؤالك في التعليق .

اذا اعجبك الموضوع قم بمشاركته مع اصدقائك.

By mvp

Similiar tagsاضافات بلوجر