حصرياً اضافة ارشيف لمدونات بلوجر بثلاثه الوان احترافيه

بسم الله والصلاة والسلام على رسول الله , السلام عليكم ورحمة الله تعالى وبركاته ،باذن الله اليوم سوف نتطرق الى كيفية اضافة ارشيف للمدونه (فهرس المدونه) بثلاثه الوان واشكال مختلفه جميله وانيقه وانسيابيه تضفي  رونقا إضافيا لترتيب وتزيين المدونة , من مميزات هذه الاضافه  هو عرض تاريخ النشر لكل موضوع لمعرفة الموضوعات الأحدث والأقدم. وايضا يقوم بعرض الأقسام أو التصنيفات الخاصة بكل موضوع. كما انه يوفر إمكانية ترتيب الموضوعات من قبل الزائر حسب التاريخ وذلك بالضغط على كلمة التاريخ فيتغير الترتيب من الأحدث إلى الأقدم أو العكس. ايضا يسمح للزائر بفلترة الموضوعات بحسب أقسام المدونة وذلك بالضغط على عنوان قسم معين سيظهر فقط الموضوعات الخاصة بهذا القسم. وهناك الكثير من المميزات الاخرى الذي ساجعلكم تكتشفونها بانفسكم ,,,,

     ۞ معاينة الاضافه▼

كيفية اضافة هذا الارشيف لمدوناتكم

1-من لوحة التحكم >>> الصفحات

2- اضغط على صفحة جديدة واختر صفحة فارغة

3- الان قم بالتحويل الى HTML والصق احد الاكواد التاليه داخل المستطيع الخاص ب HTML

اللون الاحمر

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

اللون الازرق

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

</div>

اللون الرمادي

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

وبالاخير قم بنشر الصفحه ومعاينتها ,,,,,,,,  هذا كل شئ .... بالتوفيق للجميع

By glok

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