فهرس مدونة بلوجر بشكل رائـــــــــــــــــع

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

اليوم لنا مع أضافة جميلة جدا يمكن وضعها في صفحة من صفحات المدونة , الأضافة هي فهرس مدونتك,

فهرس مدونتي ما هو ؟ سهله :) هي صفحة تجمع لنا كل ما بالمدونة على شكل جدول و بالروابط التي تؤدي الى كل مسار للرابط,

هنا صورة توضيحية :







الأمر واضح الأن ,

الأن كيفية التركيب , ندهب الى أدارة المدونة ثم التصميم ثم Html و نبجث عن :

</head>

و بدله بالتالي :

<b:if cond='data:blog.url == &quot;http://www.devlope.com&quot;'>
<style>

#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:100%;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ddd;
color: #000000;
padding-left: 5px;
width:50%px;
}
.toc-header-col2 {
width:15%;
}
.toc-header-col3 {
width:25%px;
}
.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:93%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:93%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:93%;
}
.post{display:none;}
.comments-block{display:none;}
.comment-form{display:none;}
.comment-footer{display:none;}
.blog-pager{display:none;}
.date-header{display:none;}
.feed-links{display:none;}
.comments{display:none;}
</style>
</b:if>
</head>

الأن نبحث عن الكود التالي :

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

و نضع بعده الأتي :

<b:widget id='HTML345' locked='false' title='Table Of Contents' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://www.devlope.com&quot;'>
<h2 class='title'>Blog Table Of Contents</h2>
<div class='widget-content'>
<div id='toc'><img src='http://i38.tinypic.com/34ov7n4.gif'/>Loading The Blog TOC...</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

ثم نبحث عن التالي :

</body>

و نضع قبله :

<b:if cond='data:blog.url == &quot;http://www.devlope.com&quot;'>
&lt;script style=&quot;text/javascript&quot; src=&quot;http://blogger-plugins.googlecode.com/files/blogtoc.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://www.devlope/feeds/posts/default?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://www.devlope.org/feeds/posts/default?alt=json-in-script&amp;start-index=501&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://www.devlope.org/feeds/posts/default?alt=json-in-script&amp;start-index=1001&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;showToc();&lt;/script&gt;
</b:if>

يبقى تغيير الرابط بروابط مدوناتكم أو بالأحرى الصفحة المخصصة للفهرس :ك 

: شارك

Tweet

✚

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