زوار ومتابعي المدونة
أسعد الله أوقاتكم بكل خير ومحبة
اليوم سوف نتطرق الى كيفية اضافة ارشيف للمدونه (فهرس المدونه) بثلاثه الوان واشكال مختلفه جميله وانيقه وانسيابيه تضفي رونقا إضافيا لترتيب وتزيين المدونة , من مميزات هذه الاضافه هو عرض تاريخ النشر لكل موضوع لمعرفة الموضوعات الأحدث والأقدم. وايضا يقوم بعرض الأقسام أو التصنيفات الخاصة بكل موضوع. كما انه يوفر إمكانية ترتيب الموضوعات من قبل الزائر حسب التاريخ وذلك بالضغط على كلمة التاريخ فيتغير الترتيب من الأحدث إلى الأقدم أو العكس. ايضا يسمح للزائر بفلترة الموضوعات بحسب أقسام المدونة وذلك بالضغط على عنوان قسم معين سيظهر فقط الموضوعات الخاصة بهذا القسم. وهناك الكثير من المميزات الاخرى الذي ساجعلكم تكتشفونها بانفسكم ,,,,
- كيفية اضافة هذا الارشيف لمدوناتكم :
2- اضغط على صفحة جديدة واختر صفحة فارغة
3- الان قم بالتحويل الى HTML والصق احد الاكواد التاليه داخل المستطيل الخاص ب HTML
1- اللون الأحمر
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">
<style type="text/css">
#bp_toc {
margin-bottom: 10px;margin-top: 28px;text-align: right;width: 100%;}#bp_toc a {text-decoration: none;}
.toc-note {
padding: 5px 10px;
position: relative;
top: -13px;
}.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #eee;
border: 1px solid #ddd;
color: #666;
padding: 2px 5px;
font-weight: bold;}
/*------عناوين المواضيع------*/
.toc-header-col1 { width:58%;}
.toc-entry-col1 {
background: #FFFFFF;
border: 1px solid #ddd;
padding-right: 8px;
line-height: 30px;
font-size: 14px;}
.toc-entry-col1 a {
color: #E75139;}
/*------التاريخ------*/
.toc-header-col2 {width: 11%;text-align: center; }
.toc-entry-col2 {
background: #222;border: 1px solid #111;color: #fff;
text-align: center;font-size: 14px;}
/*------الأقسام-------*/
.toc-header-col3 {width:31%;}
.toc-entry-col3 {background: #E75139;border: 1px solid #B43A27;
color: #fff;padding-right: 8px;
font-size: 14px;}.toc-entry-col3 a { color: #fff; }
.post-header,.post-title.entry-title,.bvd,#menu2{display: none;}
.post-body {border-bottom: 20px ridge #E4E4E4;}</style><br /><div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div>
<script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script></div>
</div>
</pre>
2- اللون الأزرق
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">
<style type="text/css">
#bp_toc {
margin-bottom: 10px;margin-top: 28px;
text-align: right;width: 100%;}
#bp_toc a {text-decoration: none;}
.toc-note {padding: 5px 10px;
position: relative;top: -13px;
}.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #eee;border: 1px solid #ddd;
color: #006BFF;padding: 2px 5px;
font-weight: bold;}
/*------عناوين المواضيع------*/
.toc-header-col1 { width:58%;}
.toc-entry-col1 {
background: #FFFFFF;border: 1px solid #ddd;
padding-right: 8px;line-height: 30px;font-size: 14px;}
.toc-entry-col1 a {color: #018EC5;
}
/*------التاريخ------*/
.toc-header-col2 {width: 11%;text-align: center; }
.toc-entry-col2 {
background: #222;
border: 1px solid #111;
color: #fff;text-align: center;font-size: 14px;}
/*------الأقسام-------*/
.toc-header-col3 {width:31%;}
.toc-entry-col3 {
background: #018EC5;
border: 1px solid #0086B7;color: #fff;
padding-right: 8px;
font-size: 14px;}
.toc-entry-col3 a { color: #fff; }.post-header,.post-title.entry-title,.bvd,#menu2{display: none;}
.post-body {border-bottom: 20px ridge #E4E4E4;}</style>
<br /><div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div>
<script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script></div>
</div>
</pre>
3- اللون الرمادي
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">
<style type="text/css">
#bp_toc {border: 0px solid #000;
background: none repeat scroll 0% 0% #FFF;
padding: 5px;margin-top: 10px;width: 100%;}
.toc-note {padding: 5px 10px;position: relative;top: -13px;}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
text-align: center;
background: none repeat scroll 0% 0% #E6E6E6;
box-shadow: 2px 2px 5px 5px #CCC inset;
color: #000;
padding-left: 2px;width: 58%;}
.toc-header-col2 {width: 11%;}.toc-entry-col2 {text-align: center;}
.toc-header-col3 {width: 31%;}
.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:80%;text-decoration:none;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {font-size:70%;text-decoration:underline;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;font-size:70%;
border: 2px solid white !important;background: #F6F6F6;
white-space:nowrap;}</style><br />
<div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div><script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script><script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script></div>
</div>
</pre>
وبالاخير قم بنشر الصفحه ومعاينتها ,,,,,,,, هذا كل شئ .... بالتوفيق للجميع
ليست هناك تعليقات:
إرسال تعليق